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): reorg parameter panel to make room for controlnet

Browse Source
This commit is contained in:
psychedelicious 2023-06-01 21:26:45 +10:00
parent 94c953deab
commit 98493ed9e2
12 changed files with 173 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/common/components/IAISlider.tsx
View File

@ -203,6 +203,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
sx={{ sx={{
insetInlineStart: '0 !important', insetInlineStart: '0 !important',
insetInlineEnd: 'unset !important', insetInlineEnd: 'unset !important',
mt: 1.5,
}} }}
{...sliderMarkProps} {...sliderMarkProps}
> >
@ -213,6 +214,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
sx={{ sx={{
insetInlineStart: 'unset !important', insetInlineStart: 'unset !important',
insetInlineEnd: '0 !important', insetInlineEnd: '0 !important',
mt: 1.5,
}} }}
{...sliderMarkProps} {...sliderMarkProps}
> >

6
invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts
View File

@ -62,16 +62,21 @@ export type ControlNet = {
export type ControlNetState = { export type ControlNetState = {
controlNets: Record<string, ControlNet>; controlNets: Record<string, ControlNet>;
isEnabled: boolean;
}; };
export const initialControlNetState: ControlNetState = { export const initialControlNetState: ControlNetState = {
controlNets: {}, controlNets: {},
isEnabled: false,
}; };
export const controlNetSlice = createSlice({ export const controlNetSlice = createSlice({
name: 'controlNet', name: 'controlNet',
initialState: initialControlNetState, initialState: initialControlNetState,
reducers: { reducers: {
isControlNetEnabledToggled: (state) => {
state.isEnabled = !state.isEnabled;
},
controlNetAdded: ( controlNetAdded: (
state, state,
action: PayloadAction<{ controlNetId: string }> action: PayloadAction<{ controlNetId: string }>
@ -166,6 +171,7 @@ export const controlNetSlice = createSlice({
}); });
export const { export const {
isControlNetEnabledToggled,
controlNetAdded, controlNetAdded,
controlNetAddedFromImage, controlNetAddedFromImage,
controlNetRemoved, controlNetRemoved,

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

@ -10,6 +10,7 @@ import { createSelector } from '@reduxjs/toolkit';
import { import {
controlNetAdded, controlNetAdded,
controlNetSelector, controlNetSelector,
isControlNetEnabledToggled,
} from 'features/controlNet/store/controlNetSlice'; } from 'features/controlNet/store/controlNetSlice';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { map } from 'lodash-es'; import { map } from 'lodash-es';
@ -18,19 +19,22 @@ import { v4 as uuidv4 } from 'uuid';
const selector = createSelector( const selector = createSelector(
controlNetSelector, controlNetSelector,
(controlNet) => { (controlNet) => {
const { controlNets } = controlNet; const { controlNets, isEnabled } = controlNet;
return { controlNets }; return { controlNets, isEnabled };
}, },
defaultSelectorOptions defaultSelectorOptions
); );
const ParamControlNetCollapse = () => { const ParamControlNetCollapse = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { isOpen, onToggle } = useDisclosure(); const { controlNets, isEnabled } = useAppSelector(selector);
const { controlNets } = useAppSelector(selector);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const handleClickControlNetToggle = useCallback(() => {
dispatch(isControlNetEnabledToggled());
}, [dispatch]);
const handleClickedAddControlNet = useCallback(() => { const handleClickedAddControlNet = useCallback(() => {
dispatch(controlNetAdded({ controlNetId: uuidv4() })); dispatch(controlNetAdded({ controlNetId: uuidv4() }));
}, [dispatch]); }, [dispatch]);
@ -38,9 +42,9 @@ const ParamControlNetCollapse = () => {
return ( return (
<IAICollapse <IAICollapse
label={'ControlNet'} label={'ControlNet'}
// label={t('parameters.seamCorrectionHeader')} isOpen={isEnabled}
isOpen={isOpen} onToggle={handleClickControlNetToggle}
onToggle={onToggle} withSwitch
> >
<Flex sx={{ alignItems: 'flex-end' }}> <Flex sx={{ alignItems: 'flex-end' }}>
<IAIIconButton <IAIIconButton

17
invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedFull.tsx Normal file
View File

@ -0,0 +1,17 @@
import { Flex } from '@chakra-ui/react';
import { memo } from 'react';
import ParamSeed from './ParamSeed';
import ParamSeedShuffle from './ParamSeedShuffle';
import ParamSeedRandomize from './ParamSeedRandomize';
const ParamSeedFull = () => {
return (
<Flex sx={{ gap: 4, alignItems: 'center' }}>
<ParamSeed />
<ParamSeedShuffle />
<ParamSeedRandomize />
</Flex>
);
};
export default memo(ParamSeedFull);

32
invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedRandomize.tsx
View File

@ -2,30 +2,10 @@ import { ChangeEvent, memo } from 'react';
import { RootState } from 'app/store/store'; import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldRandomizeSeed } from 'features/parameters/store/generationSlice'; import { setShouldRandomizeSeed } from 'features/parameters/store/generationSlice';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FormControl, FormLabel, Switch } from '@chakra-ui/react'; import { FormControl, FormLabel, Switch, Tooltip } from '@chakra-ui/react';
import IAISwitch from 'common/components/IAISwitch';
// export default function RandomizeSeed() {
// const dispatch = useAppDispatch();
// const { t } = useTranslation();
// const shouldRandomizeSeed = useAppSelector(
// (state: RootState) => state.generation.shouldRandomizeSeed
// );
// const handleChangeShouldRandomizeSeed = (e: ChangeEvent<HTMLInputElement>) =>
// dispatch(setShouldRandomizeSeed(e.target.checked));
// return (
// <Switch
// aria-label={t('parameters.randomizeSeed')}
// isChecked={shouldRandomizeSeed}
// onChange={handleChangeShouldRandomizeSeed}
// />
// );
// }
const ParamSeedRandomize = () => { const ParamSeedRandomize = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -38,6 +18,14 @@ const ParamSeedRandomize = () => {
const handleChangeShouldRandomizeSeed = (e: ChangeEvent<HTMLInputElement>) => const handleChangeShouldRandomizeSeed = (e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldRandomizeSeed(e.target.checked)); dispatch(setShouldRandomizeSeed(e.target.checked));
return (
<IAISwitch
label={t('common.random')}
isChecked={shouldRandomizeSeed}
onChange={handleChangeShouldRandomizeSeed}
/>
);
return ( return (
<FormControl <FormControl
sx={{ sx={{

13
invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedShuffle.tsx
View File

@ -3,9 +3,11 @@ import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
import { RootState } from 'app/store/store'; import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import IAIIconButton from 'common/components/IAIIconButton';
import randomInt from 'common/util/randomInt'; import randomInt from 'common/util/randomInt';
import { setSeed } from 'features/parameters/store/generationSlice'; import { setSeed } from 'features/parameters/store/generationSlice';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaRandom } from 'react-icons/fa';
export default function ParamSeedShuffle() { export default function ParamSeedShuffle() {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -17,6 +19,17 @@ export default function ParamSeedShuffle() {
const handleClickRandomizeSeed = () => const handleClickRandomizeSeed = () =>
dispatch(setSeed(randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX))); dispatch(setSeed(randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX)));
return (
<IAIIconButton
size="sm"
isDisabled={shouldRandomizeSeed}
aria-label={t('parameters.shuffle')}
tooltip={t('parameters.shuffle')}
onClick={handleClickRandomizeSeed}
icon={<FaRandom />}
/>
);
return ( return (
<IAIButton <IAIButton
size="sm" size="sm"

72
invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
View File

@ -1,5 +1,5 @@
import { memo } from 'react'; import { memo } from 'react';
import { Flex } from '@chakra-ui/react'; import { Box, Flex, useDisclosure } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { uiSelector } from 'features/ui/store/uiSelectors'; import { uiSelector } from 'features/ui/store/uiSelectors';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
@ -13,6 +13,8 @@ import ImageToImageStrength from 'features/parameters/components/Parameters/Imag
import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit'; import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
import { generationSelector } from 'features/parameters/store/generationSelectors'; import { generationSelector } from 'features/parameters/store/generationSelectors';
import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel'; import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel';
import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
import IAICollapse from 'common/components/IAICollapse';
const selector = createSelector( const selector = createSelector(
[uiSelector, generationSelector], [uiSelector, generationSelector],
@ -27,43 +29,47 @@ const selector = createSelector(
const ImageToImageTabCoreParameters = () => { const ImageToImageTabCoreParameters = () => {
const { shouldUseSliders, shouldFitToWidthHeight } = useAppSelector(selector); const { shouldUseSliders, shouldFitToWidthHeight } = useAppSelector(selector);
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
return ( return (
<Flex <IAICollapse label={'General'} isOpen={isOpen} onToggle={onToggle}>
sx={{ <Flex
flexDirection: 'column', sx={{
gap: 2, flexDirection: 'column',
bg: 'base.800', gap: 3,
p: 4, }}
borderRadius: 'base', >
}} {shouldUseSliders ? (
> <>
{shouldUseSliders ? ( <ParamSchedulerAndModel />
<Flex sx={{ gap: 3, flexDirection: 'column' }}> <Box pt={2}>
<ParamIterations /> <ParamSeedFull />
<ParamSteps /> </Box>
<ParamCFGScale />
<ParamWidth isDisabled={!shouldFitToWidthHeight} />
<ParamHeight isDisabled={!shouldFitToWidthHeight} />
<ImageToImageStrength />
<ImageToImageFit />
<ParamSchedulerAndModel />
</Flex>
) : (
<Flex sx={{ gap: 2, flexDirection: 'column' }}>
<Flex gap={3}>
<ParamIterations /> <ParamIterations />
<ParamSteps /> <ParamSteps />
<ParamCFGScale /> <ParamCFGScale />
</Flex> <ParamWidth isDisabled={!shouldFitToWidthHeight} />
<ParamSchedulerAndModel /> <ParamHeight isDisabled={!shouldFitToWidthHeight} />
<ParamWidth isDisabled={!shouldFitToWidthHeight} /> </>
<ParamHeight isDisabled={!shouldFitToWidthHeight} /> ) : (
<ImageToImageStrength /> <>
<ImageToImageFit /> <Flex gap={3}>
</Flex> <ParamIterations />
)} <ParamSteps />
</Flex> <ParamCFGScale />
</Flex>
<ParamSchedulerAndModel />
<Box pt={2}>
<ParamSeedFull />
</Box>
<ParamWidth isDisabled={!shouldFitToWidthHeight} />
<ParamHeight isDisabled={!shouldFitToWidthHeight} />
</>
)}
<ImageToImageStrength />
<ImageToImageFit />
</Flex>
</IAICollapse>
); );
}; };

2
invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
View File

@ -2,7 +2,6 @@ import { memo } from 'react';
import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; 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 ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse'; import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse'; import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
@ -17,7 +16,6 @@ const ImageToImageTabParameters = () => {
<ParamNegativeConditioning /> <ParamNegativeConditioning />
<ProcessButtons /> <ProcessButtons />
<ImageToImageTabCoreParameters /> <ImageToImageTabCoreParameters />
<ParamSeedCollapse />
<ParamControlNetCollapse /> <ParamControlNetCollapse />
<ParamVariationCollapse /> <ParamVariationCollapse />
<ParamNoiseCollapse /> <ParamNoiseCollapse />

66
invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
View File

@ -3,13 +3,15 @@ import ParamSteps from 'features/parameters/components/Parameters/Core/ParamStep
import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale'; import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth'; import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth';
import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight'; import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight';
import { Flex } from '@chakra-ui/react'; import { Box, Flex, useDisclosure } from '@chakra-ui/react';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { uiSelector } from 'features/ui/store/uiSelectors'; import { uiSelector } from 'features/ui/store/uiSelectors';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { memo } from 'react'; import { memo } from 'react';
import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel'; import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel';
import IAICollapse from 'common/components/IAICollapse';
import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
const selector = createSelector( const selector = createSelector(
uiSelector, uiSelector,
@ -23,39 +25,45 @@ const selector = createSelector(
const TextToImageTabCoreParameters = () => { const TextToImageTabCoreParameters = () => {
const { shouldUseSliders } = useAppSelector(selector); const { shouldUseSliders } = useAppSelector(selector);
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
return ( return (
<Flex <IAICollapse label={'General'} isOpen={isOpen} onToggle={onToggle}>
sx={{ <Flex
flexDirection: 'column', sx={{
gap: 2, flexDirection: 'column',
bg: 'base.800', gap: 3,
p: 4, }}
borderRadius: 'base', >
}} {shouldUseSliders ? (
> <>
{shouldUseSliders ? ( <ParamSchedulerAndModel />
<Flex sx={{ gap: 3, flexDirection: 'column' }}> <Box pt={2}>
<ParamIterations /> <ParamSeedFull />
<ParamSteps /> </Box>
<ParamCFGScale />
<ParamWidth />
<ParamHeight />
<ParamSchedulerAndModel />
</Flex>
) : (
<Flex sx={{ gap: 2, flexDirection: 'column' }}>
<Flex gap={3}>
<ParamIterations /> <ParamIterations />
<ParamSteps /> <ParamSteps />
<ParamCFGScale /> <ParamCFGScale />
</Flex> <ParamWidth />
<ParamSchedulerAndModel /> <ParamHeight />
<ParamWidth /> </>
<ParamHeight /> ) : (
</Flex> <>
)} <Flex gap={3}>
</Flex> <ParamIterations />
<ParamSteps />
<ParamCFGScale />
</Flex>
<ParamSchedulerAndModel />
<Box pt={2}>
<ParamSeedFull />
</Box>
<ParamWidth />
<ParamHeight />
</>
)}
</Flex>
</IAICollapse>
); );
}; };

2
invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
View File

@ -2,7 +2,6 @@ import ProcessButtons from 'features/parameters/components/ProcessButtons/Proces
import { memo } from 'react'; import { memo } from 'react';
import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; 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 ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse'; import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse'; import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
@ -18,7 +17,6 @@ const TextToImageTabParameters = () => {
<ParamNegativeConditioning /> <ParamNegativeConditioning />
<ProcessButtons /> <ProcessButtons />
<TextToImageTabCoreParameters /> <TextToImageTabCoreParameters />
<ParamSeedCollapse />
<ParamControlNetCollapse /> <ParamControlNetCollapse />
<ParamVariationCollapse /> <ParamVariationCollapse />
<ParamNoiseCollapse /> <ParamNoiseCollapse />

71
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
View File

@ -1,5 +1,5 @@
import { memo } from 'react'; import { memo } from 'react';
import { Flex } from '@chakra-ui/react'; import { Box, Flex, useDisclosure } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { uiSelector } from 'features/ui/store/uiSelectors'; import { uiSelector } from 'features/ui/store/uiSelectors';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
@ -8,10 +8,11 @@ import ParamIterations from 'features/parameters/components/Parameters/Core/Para
import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps'; import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale'; import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength'; import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength';
import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel'; import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel';
import ParamBoundingBoxWidth from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth'; import ParamBoundingBoxWidth from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth';
import ParamBoundingBoxHeight from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight'; import ParamBoundingBoxHeight from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight';
import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
import IAICollapse from 'common/components/IAICollapse';
const selector = createSelector( const selector = createSelector(
uiSelector, uiSelector,
@ -25,42 +26,46 @@ const selector = createSelector(
const UnifiedCanvasCoreParameters = () => { const UnifiedCanvasCoreParameters = () => {
const { shouldUseSliders } = useAppSelector(selector); const { shouldUseSliders } = useAppSelector(selector);
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
return ( return (
<Flex <IAICollapse label={'General'} isOpen={isOpen} onToggle={onToggle}>
sx={{ <Flex
flexDirection: 'column', sx={{
gap: 2, flexDirection: 'column',
bg: 'base.800', gap: 3,
p: 4, }}
borderRadius: 'base', >
}} {shouldUseSliders ? (
> <>
{shouldUseSliders ? ( <ParamSchedulerAndModel />
<Flex sx={{ gap: 3, flexDirection: 'column' }}> <Box pt={2}>
<ParamIterations /> <ParamSeedFull />
<ParamSteps /> </Box>
<ParamCFGScale />
<ParamBoundingBoxWidth />
<ParamBoundingBoxHeight />
<ImageToImageStrength />
<ImageToImageFit />
<ParamSchedulerAndModel />
</Flex>
) : (
<Flex sx={{ gap: 2, flexDirection: 'column' }}>
<Flex gap={3}>
<ParamIterations /> <ParamIterations />
<ParamSteps /> <ParamSteps />
<ParamCFGScale /> <ParamCFGScale />
</Flex> <ParamBoundingBoxWidth />
<ParamSchedulerAndModel /> <ParamBoundingBoxHeight />
<ParamBoundingBoxWidth /> </>
<ParamBoundingBoxHeight /> ) : (
<ImageToImageStrength /> <>
</Flex> <Flex gap={3}>
)} <ParamIterations />
</Flex> <ParamSteps />
<ParamCFGScale />
</Flex>
<ParamSchedulerAndModel />
<Box pt={2}>
<ParamSeedFull />
</Box>
<ParamBoundingBoxWidth />
<ParamBoundingBoxHeight />
</>
)}
<ImageToImageStrength />
</Flex>
</IAICollapse>
); );
}; };

1
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
View File

@ -16,7 +16,6 @@ const UnifiedCanvasParameters = () => {
<ParamNegativeConditioning /> <ParamNegativeConditioning />
<ProcessButtons /> <ProcessButtons />
<UnifiedCanvasCoreParameters /> <UnifiedCanvasCoreParameters />
<ParamSeedCollapse />
<ParamVariationCollapse /> <ParamVariationCollapse />
<ParamSymmetryCollapse /> <ParamSymmetryCollapse />
<ParamSeamCorrectionCollapse /> <ParamSeamCorrectionCollapse />