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

fix(ui): lint & fix issues with adding regional ip adapters

Browse Source
This commit is contained in:
psychedelicious 2024-08-24 12:32:38 +10:00
parent c776ac3af2
commit afc6f83d72
7 changed files with 32 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
invokeai/frontend/web/src/features/controlLayers/components/CanvasAddEntityButtons.tsx
View File

@ -1,6 +1,5 @@
import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library'; import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { useDefaultControlAdapter, useDefaultIPAdapter } from 'features/controlLayers/hooks/useLayerControlAdapter';
import { import {
controlLayerAdded, controlLayerAdded,
inpaintMaskAdded, inpaintMaskAdded,
@ -15,23 +14,21 @@ import { PiPlusBold } from 'react-icons/pi';
export const CanvasAddEntityButtons = memo(() => { export const CanvasAddEntityButtons = memo(() => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const defaultControlAdapter = useDefaultControlAdapter();
const defaultIPAdapter = useDefaultIPAdapter();
const addInpaintMask = useCallback(() => { const addInpaintMask = useCallback(() => {
dispatch(inpaintMaskAdded()); dispatch(inpaintMaskAdded({ isSelected: true }));
}, [dispatch]); }, [dispatch]);
const addRegionalGuidance = useCallback(() => { const addRegionalGuidance = useCallback(() => {
dispatch(rgAdded()); dispatch(rgAdded({ isSelected: true }));
}, [dispatch]); }, [dispatch]);
const addRasterLayer = useCallback(() => { const addRasterLayer = useCallback(() => {
dispatch(rasterLayerAdded({ isSelected: true })); dispatch(rasterLayerAdded({ isSelected: true }));
}, [dispatch]); }, [dispatch]);
const addControlLayer = useCallback(() => { const addControlLayer = useCallback(() => {
dispatch(controlLayerAdded({ isSelected: true, overrides: { controlAdapter: defaultControlAdapter } })); dispatch(controlLayerAdded({ isSelected: true }));
}, [defaultControlAdapter, dispatch]); }, [dispatch]);
const addIPAdapter = useCallback(() => { const addIPAdapter = useCallback(() => {
dispatch(ipaAdded({ ipAdapter: defaultIPAdapter })); dispatch(ipaAdded({ isSelected: true }));
}, [defaultIPAdapter, dispatch]); }, [dispatch]);
return ( return (
<Flex flexDir="column" w="full" h="full" alignItems="center" justifyContent="center"> <Flex flexDir="column" w="full" h="full" alignItems="center" justifyContent="center">

7
invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceAddPromptsIPAdapterButtons.tsx
View File

@ -1,8 +1,6 @@
import { Button, Flex } from '@invoke-ai/ui-library'; import { Button, Flex } from '@invoke-ai/ui-library';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useDefaultIPAdapter } from 'features/controlLayers/hooks/useLayerControlAdapter';
import { nanoid } from 'features/controlLayers/konva/util';
import { import {
rgIPAdapterAdded, rgIPAdapterAdded,
rgNegativePromptChanged, rgNegativePromptChanged,
@ -20,7 +18,6 @@ type AddPromptButtonProps = {
export const RegionalGuidanceAddPromptsIPAdapterButtons = ({ id }: AddPromptButtonProps) => { export const RegionalGuidanceAddPromptsIPAdapterButtons = ({ id }: AddPromptButtonProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const defaultIPAdapter = useDefaultIPAdapter();
const selectValidActions = useMemo( const selectValidActions = useMemo(
() => () =>
createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => { createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
@ -40,8 +37,8 @@ export const RegionalGuidanceAddPromptsIPAdapterButtons = ({ id }: AddPromptButt
dispatch(rgNegativePromptChanged({ id, prompt: '' })); dispatch(rgNegativePromptChanged({ id, prompt: '' }));
}, [dispatch, id]); }, [dispatch, id]);
const addIPAdapter = useCallback(() => { const addIPAdapter = useCallback(() => {
dispatch(rgIPAdapterAdded({ id, ipAdapter: { ...defaultIPAdapter, id: nanoid() } })); dispatch(rgIPAdapterAdded({ id }));
}, [defaultIPAdapter, dispatch, id]); }, [dispatch, id]);
return ( return (
<Flex w="full" p={2} justifyContent="space-between"> <Flex w="full" p={2} justifyContent="space-between">

7
invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAddPromptsAndIPAdapter.tsx
View File

@ -2,8 +2,6 @@ import { MenuItem } from '@invoke-ai/ui-library';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import { useDefaultIPAdapter } from 'features/controlLayers/hooks/useLayerControlAdapter';
import { nanoid } from 'features/controlLayers/konva/util';
import { import {
rgIPAdapterAdded, rgIPAdapterAdded,
rgNegativePromptChanged, rgNegativePromptChanged,
@ -17,7 +15,6 @@ export const RegionalGuidanceMenuItemsAddPromptsAndIPAdapter = memo(() => {
const { id } = useEntityIdentifierContext(); const { id } = useEntityIdentifierContext();
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const defaultIPAdapter = useDefaultIPAdapter();
const selectValidActions = useMemo( const selectValidActions = useMemo(
() => () =>
createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => { createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
@ -37,8 +34,8 @@ export const RegionalGuidanceMenuItemsAddPromptsAndIPAdapter = memo(() => {
dispatch(rgNegativePromptChanged({ id: id, prompt: '' })); dispatch(rgNegativePromptChanged({ id: id, prompt: '' }));
}, [dispatch, id]); }, [dispatch, id]);
const addIPAdapter = useCallback(() => { const addIPAdapter = useCallback(() => {
dispatch(rgIPAdapterAdded({ id, ipAdapter: { ...defaultIPAdapter, id: nanoid() } })); dispatch(rgIPAdapterAdded({ id }));
}, [defaultIPAdapter, dispatch, id]); }, [dispatch, id]);
return ( return (
<> <>

2
invokeai/frontend/web/src/features/controlLayers/hooks/useLayerControlAdapter.ts
View File

@ -27,6 +27,7 @@ export const useControlLayerControlAdapter = (entityIdentifier: CanvasEntityIden
return controlAdapter; return controlAdapter;
}; };
/** @knipignore */
export const useDefaultControlAdapter = (): ControlNetConfig | T2IAdapterConfig => { export const useDefaultControlAdapter = (): ControlNetConfig | T2IAdapterConfig => {
const [modelConfigs] = useControlNetAndT2IAdapterModels(); const [modelConfigs] = useControlNetAndT2IAdapterModels();
@ -47,6 +48,7 @@ export const useDefaultControlAdapter = (): ControlNetConfig | T2IAdapterConfig
return defaultControlAdapter; return defaultControlAdapter;
}; };
/** @knipignore */
export const useDefaultIPAdapter = (): IPAdapterConfig => { export const useDefaultIPAdapter = (): IPAdapterConfig => {
const [modelConfigs] = useIPAdapterModels(); const [modelConfigs] = useIPAdapterModels();

5
invokeai/frontend/web/src/features/controlLayers/konva/constants.ts
View File

@ -15,11 +15,6 @@ export const BRUSH_BORDER_INNER_COLOR = 'rgba(0,0,0,1)';
*/ */
export const BRUSH_BORDER_OUTER_COLOR = 'rgba(255,255,255,0.8)'; export const BRUSH_BORDER_OUTER_COLOR = 'rgba(255,255,255,0.8)';
/**
* The border width for the brush preview.
*/
export const BRUSH_ERASER_BORDER_WIDTH = 1;
/** /**
* The target spacing of individual points of brush strokes, as a percentage of the brush size. * The target spacing of individual points of brush strokes, as a percentage of the brush size.
*/ */

2
invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts
View File

@ -175,7 +175,7 @@ function selectAllEntitiesOfType(state: CanvasV2State, type: CanvasEntityState['
} }
} }
export function selectAllEntities(state: CanvasV2State): CanvasEntityState[] { function selectAllEntities(state: CanvasV2State): CanvasEntityState[] {
// These are in the same order as they are displayed in the list! // These are in the same order as they are displayed in the list!
return [ return [
...state.inpaintMasks.entities.toReversed(), ...state.inpaintMasks.entities.toReversed(),

27
invokeai/frontend/web/src/features/controlLayers/store/regionsReducers.ts
View File

@ -1,4 +1,5 @@
import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit'; import type { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
import { deepClone } from 'common/util/deepClone';
import { getPrefixedId } from 'features/controlLayers/konva/util'; import { getPrefixedId } from 'features/controlLayers/konva/util';
import type { import type {
CanvasV2State, CanvasV2State,
@ -8,7 +9,7 @@ import type {
RegionalGuidanceIPAdapterConfig, RegionalGuidanceIPAdapterConfig,
RgbColor, RgbColor,
} from 'features/controlLayers/store/types'; } from 'features/controlLayers/store/types';
import { getEntityIdentifier, imageDTOToImageWithDims } from 'features/controlLayers/store/types'; import { getEntityIdentifier, imageDTOToImageWithDims, initialIPAdapter } from 'features/controlLayers/store/types';
import { zModelIdentifierField } from 'features/nodes/types/common'; import { zModelIdentifierField } from 'features/nodes/types/common';
import { isEqual, merge } from 'lodash-es'; import { isEqual, merge } from 'lodash-es';
import type { ImageDTO, IPAdapterModelConfig } from 'services/api/types'; import type { ImageDTO, IPAdapterModelConfig } from 'services/api/types';
@ -134,13 +135,23 @@ export const regionsReducers = {
} }
rg.autoNegative = !rg.autoNegative; rg.autoNegative = !rg.autoNegative;
}, },
rgIPAdapterAdded: (state, action: PayloadAction<{ id: string; ipAdapter: RegionalGuidanceIPAdapterConfig }>) => { rgIPAdapterAdded: {
const { id, ipAdapter } = action.payload; reducer: (
const entity = selectRegionalGuidanceEntity(state, id); state,
if (!entity) { action: PayloadAction<{ id: string; ipAdapterId: string; overrides?: Partial<RegionalGuidanceIPAdapterConfig> }>
return; ) => {
} const { id, overrides, ipAdapterId } = action.payload;
entity.ipAdapters.push(ipAdapter); const entity = selectRegionalGuidanceEntity(state, id);
if (!entity) {
return;
}
const ipAdapter = { ...deepClone(initialIPAdapter), id: ipAdapterId };
merge(ipAdapter, overrides);
entity.ipAdapters.push(ipAdapter);
},
prepare: (payload: { id: string; overrides?: Partial<RegionalGuidanceIPAdapterConfig> }) => ({
payload: { ...payload, ipAdapterId: getPrefixedId('regional_guidance_ip_adapter') },
}),
}, },
rgIPAdapterDeleted: (state, action: PayloadAction<{ id: string; ipAdapterId: string }>) => { rgIPAdapterDeleted: (state, action: PayloadAction<{ id: string; ipAdapterId: string }>) => {
const { id, ipAdapterId } = action.payload; const { id, ipAdapterId } = action.payload;