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): more work on controlnet mini

Browse Source
This commit is contained in:
psychedelicious
2023-06-03 13:06:37 +10:00
parent b6b3b9f99c
commit a0dde66b5d
9 changed files with 166 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import {
Divider,
Flex,
Spacer,
Tab,
TabList,
TabPanel,
@ -9,7 +9,7 @@ import {
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import IAICollapse from 'common/components/IAICollapse';
import { memo, useCallback } from 'react';
import { Fragment, memo, useCallback } from 'react';
import IAIIconButton from 'common/components/IAIIconButton';
import { FaPlus } from 'react-icons/fa';
import ControlNet from 'features/controlNet/components/ControlNet';
@ -21,11 +21,11 @@ import {
isControlNetEnabledToggled,
} from 'features/controlNet/store/controlNetSlice';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { map, startCase } from 'lodash-es';
import { map } from 'lodash-es';
import { v4 as uuidv4 } from 'uuid';
import { CloseIcon } from '@chakra-ui/icons';
import ControlNetMini from 'features/controlNet/components/ControlNetMini';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import IAIButton from 'common/components/IAIButton';
const selector = createSelector(
controlNetSelector,
@ -56,11 +56,26 @@ const ParamControlNetCollapse = () => {
}
return (
<>
{controlNetsArray.map((c) => (
<ControlNetMini key={c.controlNetId} controlNet={c} />
))}
</>
<IAICollapse
label={'ControlNet'}
isOpen={isEnabled}
onToggle={handleClickControlNetToggle}
withSwitch
>
{controlNetsArray.length === 0 && (
<IAIButton onClick={handleClickedAddControlNet}>
Add ControlNet
</IAIButton>
)}
<Flex sx={{ flexDir: 'column', gap: 4 }}>
{controlNetsArray.map((c, i) => (
<Fragment key={c.controlNetId}>
{i > 0 && <Divider />}
<ControlNetMini controlNet={c} />
</Fragment>
))}
</Flex>
</IAICollapse>
);
return (