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): add mini/advanced controlnet ui

Browse Source
This commit is contained in:
psychedelicious
2023-06-03 15:05:49 +10:00
parent 69f0ba65f1
commit d6c08ba469
18 changed files with 430 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,7 @@
import {
Divider,
Flex,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
} from '@chakra-ui/react';
import { Divider, Flex } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import IAICollapse from 'common/components/IAICollapse';
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';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { createSelector } from '@reduxjs/toolkit';
import {
@ -23,9 +12,9 @@ import {
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { map } from 'lodash-es';
import { v4 as uuidv4 } from 'uuid';
import ControlNetMini from 'features/controlNet/components/ControlNetMini';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import IAIButton from 'common/components/IAIButton';
import ControlNet from 'features/controlNet/components/ControlNet';
const selector = createSelector(
controlNetSelector,
@ -62,61 +51,19 @@ const ParamControlNetCollapse = () => {
onToggle={handleClickControlNetToggle}
withSwitch
>
{controlNetsArray.length === 0 && (
<IAIButton onClick={handleClickedAddControlNet}>
Add ControlNet
</IAIButton>
)}
<Flex sx={{ flexDir: 'column', gap: 4 }}>
<Flex sx={{ flexDir: 'column', gap: 3 }}>
{controlNetsArray.map((c, i) => (
<Fragment key={c.controlNetId}>
{i > 0 && <Divider />}
<ControlNetMini controlNet={c} />
<ControlNet controlNet={c} />
</Fragment>
))}
<IAIButton flexGrow={1} onClick={handleClickedAddControlNet}>
Add ControlNet
</IAIButton>
</Flex>
</IAICollapse>
);
return (
<IAICollapse
label={'ControlNet'}
isOpen={isEnabled}
onToggle={handleClickControlNetToggle}
withSwitch
>
<Tabs
isFitted
orientation="horizontal"
variant="line"
size="sm"
colorScheme="accent"
>
<TabList alignItems="center" borderBottomColor="base.800" pb={4}>
{controlNetsArray.map((c, i) => (
<Tab key={`tab_${c.controlNetId}`} borderTopRadius="base">
{i + 1}
</Tab>
))}
<IAIIconButton
marginInlineStart={2}
size="sm"
aria-label="Add ControlNet"
onClick={handleClickedAddControlNet}
icon={<FaPlus />}
/>
</TabList>
<TabPanels>
{controlNetsArray.map((c) => (
<TabPanel key={`tabPanel_${c.controlNetId}`} sx={{ p: 0 }}>
<ControlNet controlNet={c} />
{/* <ControlNetMini controlNet={c} /> */}
</TabPanel>
))}
</TabPanels>
</Tabs>
</IAICollapse>
);
};
export default memo(ParamControlNetCollapse);