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 24c2028739
commit 65f6cb416f
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 { useAppDispatch } from 'app/store/storeHooks';
import { useDefaultControlAdapter, useDefaultIPAdapter } from 'features/controlLayers/hooks/useLayerControlAdapter';
import {
controlLayerAdded,
inpaintMaskAdded,
@ -15,23 +14,21 @@ import { PiPlusBold } from 'react-icons/pi';
export const CanvasAddEntityButtons = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const defaultControlAdapter = useDefaultControlAdapter();
const defaultIPAdapter = useDefaultIPAdapter();
const addInpaintMask = useCallback(() => {
dispatch(inpaintMaskAdded());
dispatch(inpaintMaskAdded({ isSelected: true }));
}, [dispatch]);
const addRegionalGuidance = useCallback(() => {
dispatch(rgAdded());
dispatch(rgAdded({ isSelected: true }));
}, [dispatch]);
const addRasterLayer = useCallback(() => {
dispatch(rasterLayerAdded({ isSelected: true }));
}, [dispatch]);
const addControlLayer = useCallback(() => {
dispatch(controlLayerAdded({ isSelected: true, overrides: { controlAdapter: defaultControlAdapter } }));
}, [defaultControlAdapter, dispatch]);
dispatch(controlLayerAdded({ isSelected: true }));
}, [dispatch]);
const addIPAdapter = useCallback(() => {
dispatch(ipaAdded({ ipAdapter: defaultIPAdapter }));
}, [defaultIPAdapter, dispatch]);
dispatch(ipaAdded({ isSelected: true }));
}, [dispatch]);
return (
<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 { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useDefaultIPAdapter } from 'features/controlLayers/hooks/useLayerControlAdapter';
import { nanoid } from 'features/controlLayers/konva/util';
import {
rgIPAdapterAdded,
rgNegativePromptChanged,
@ -20,7 +18,6 @@ type AddPromptButtonProps = {
export const RegionalGuidanceAddPromptsIPAdapterButtons = ({ id }: AddPromptButtonProps) => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const defaultIPAdapter = useDefaultIPAdapter();
const selectValidActions = useMemo(
() =>
createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
@ -40,8 +37,8 @@ export const RegionalGuidanceAddPromptsIPAdapterButtons = ({ id }: AddPromptButt
dispatch(rgNegativePromptChanged({ id, prompt: '' }));
}, [dispatch, id]);
const addIPAdapter = useCallback(() => {
dispatch(rgIPAdapterAdded({ id, ipAdapter: { ...defaultIPAdapter, id: nanoid() } }));
}, [defaultIPAdapter, dispatch, id]);
dispatch(rgIPAdapterAdded({ id }));
}, [dispatch, id]);
return (
<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 { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import { useDefaultIPAdapter } from 'features/controlLayers/hooks/useLayerControlAdapter';
import { nanoid } from 'features/controlLayers/konva/util';
import {
rgIPAdapterAdded,
rgNegativePromptChanged,
@ -17,7 +15,6 @@ export const RegionalGuidanceMenuItemsAddPromptsAndIPAdapter = memo(() => {
const { id } = useEntityIdentifierContext();
const { t } = useTranslation();
const dispatch = useAppDispatch();
const defaultIPAdapter = useDefaultIPAdapter();
const selectValidActions = useMemo(
() =>
createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
@ -37,8 +34,8 @@ export const RegionalGuidanceMenuItemsAddPromptsAndIPAdapter = memo(() => {
dispatch(rgNegativePromptChanged({ id: id, prompt: '' }));
}, [dispatch, id]);
const addIPAdapter = useCallback(() => {
dispatch(rgIPAdapterAdded({ id, ipAdapter: { ...defaultIPAdapter, id: nanoid() } }));
}, [defaultIPAdapter, dispatch, id]);
dispatch(rgIPAdapterAdded({ id }));
}, [dispatch, id]);
return (
<>

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

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

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!
return [
...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 { deepClone } from 'common/util/deepClone';
import { getPrefixedId } from 'features/controlLayers/konva/util';
import type {
CanvasV2State,
@ -8,7 +9,7 @@ import type {
RegionalGuidanceIPAdapterConfig,
RgbColor,
} 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 { isEqual, merge } from 'lodash-es';
import type { ImageDTO, IPAdapterModelConfig } from 'services/api/types';
@ -134,13 +135,23 @@ export const regionsReducers = {
}
rg.autoNegative = !rg.autoNegative;
},
rgIPAdapterAdded: (state, action: PayloadAction<{ id: string; ipAdapter: RegionalGuidanceIPAdapterConfig }>) => {
const { id, ipAdapter } = action.payload;
const entity = selectRegionalGuidanceEntity(state, id);
if (!entity) {
return;
}
entity.ipAdapters.push(ipAdapter);
rgIPAdapterAdded: {
reducer: (
state,
action: PayloadAction<{ id: string; ipAdapterId: string; overrides?: Partial<RegionalGuidanceIPAdapterConfig> }>
) => {
const { id, overrides, ipAdapterId } = action.payload;
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 }>) => {
const { id, ipAdapterId } = action.payload;