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): initial mini controlnet UI, dnd improvements

Browse Source
This commit is contained in:
psychedelicious
2023-06-03 11:13:33 +10:00
parent 72b4371804
commit 6b824eb112
18 changed files with 377 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,8 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { map, startCase } 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';
const selector = createSelector(
controlNetSelector,
@ -38,6 +40,7 @@ const selector = createSelector(
const ParamControlNetCollapse = () => {
const { t } = useTranslation();
const { controlNetsArray, isEnabled } = useAppSelector(selector);
const isControlNetDisabled = useFeatureStatus('controlNet').isFeatureDisabled;
const dispatch = useAppDispatch();
const handleClickControlNetToggle = useCallback(() => {
@ -48,6 +51,18 @@ const ParamControlNetCollapse = () => {
dispatch(controlNetAdded({ controlNetId: uuidv4() }));
}, [dispatch]);
if (isControlNetDisabled) {
return null;
}
return (
<>
{controlNetsArray.map((c) => (
<ControlNetMini key={c.controlNetId} controlNet={c} />
))}
</>
);
return (
<IAICollapse
label={'ControlNet'}
@ -80,6 +95,7 @@ const ParamControlNetCollapse = () => {
{controlNetsArray.map((c) => (
<TabPanel key={`tabPanel_${c.controlNetId}`} sx={{ p: 0 }}>
<ControlNet controlNet={c} />
{/* <ControlNetMini controlNet={c} /> */}
</TabPanel>
))}
</TabPanels>

8
invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
View File

@ -12,8 +12,9 @@ import { generationSelector } from 'features/parameters/store/generationSelector
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { configSelector } from '../../../../system/store/configSelectors';
import { useAppToaster } from 'app/components/Toaster';
import IAISelectableImage from 'features/controlNet/components/parameters/IAISelectableImage';
import IAIDndImage from 'features/controlNet/components/parameters/IAISelectableImage';
import { ImageDTO } from 'services/api';
import { IAIImageFallback } from 'common/components/IAIImageFallback';
const selector = createSelector(
[generationSelector],
@ -73,10 +74,11 @@ const InitialImagePreview = () => {
justifyContent: 'center',
}}
>
<IAISelectableImage
<IAIDndImage
image={initialImage}
onChange={handleChange}
onDrop={handleChange}
onReset={handleReset}
fallback={<IAIImageFallback sx={{ bg: 'none' }} />}
/>
</Flex>
);