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

tidy(ui): "regional prompts" -> "control layers"

Browse Source
This commit is contained in:
psychedelicious 2024-04-30 13:28:03 +10:00 committed by Kent Keirsey
parent 8de56fd77c
commit 3441187c23
78 changed files with 336 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
invokeai/frontend/web/public/locales/en.json
View File

@ -1513,7 +1513,7 @@
"app": {
"storeNotInitialized": "Store is not initialized"
},
"regionalPrompts": {
"controlLayers": {
"deleteAll": "Delete All",
"addLayer": "Add Layer",
"moveToFront": "Move to Front",
@ -1521,8 +1521,7 @@
"moveForward": "Move Forward",
"moveBackward": "Move Backward",
"brushSize": "Brush Size",
"regionalControl": "Regional Control (ALPHA)",
"enableRegionalPrompts": "Enable $t(regionalPrompts.regionalPrompts)",
"controlLayers": "Control Layers (BETA)",
"globalMaskOpacity": "Global Mask Opacity",
"autoNegative": "Auto Negative",
"toggleVisibility": "Toggle Layer Visibility",
@ -1535,7 +1534,7 @@
"addNegativePrompt": "Add $t(common.negativePrompt)",
"addIPAdapter": "Add $t(common.ipAdapter)",
"maskedGuidance": "Masked Guidance",
"maskedGuidanceLayer": "$t(regionalPrompts.maskedGuidance) $t(unifiedCanvas.layer)",
"maskedGuidanceLayer": "$t(controlLayers.maskedGuidance) $t(unifiedCanvas.layer)",
"controlNetLayer": "$t(common.controlNet) $t(unifiedCanvas.layer)",
"ipAdapterLayer": "$t(common.ipAdapter) $t(unifiedCanvas.layer)",
"opacity": "Opacity"

2
invokeai/frontend/web/src/app/logging/logger.ts
View File

@ -28,7 +28,7 @@ export type LoggerNamespace =
| 'session'
| 'queue'
| 'dnd'
| 'regionalPrompts';
| 'controlLayers';
export const logger = (namespace: LoggerNamespace) => $logger.get().child({ namespace });

8
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts
View File

@ -6,7 +6,7 @@ import {
controlAdapterModelCleared,
selectControlAdapterAll,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { heightChanged, widthChanged } from 'features/controlLayers/store/regionalPromptsSlice';
import { heightChanged, widthChanged } from 'features/controlLayers/store/controlLayersSlice';
import { loraRemoved } from 'features/lora/store/loraSlice';
import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize';
import { modelChanged, vaeSelected } from 'features/parameters/store/generationSlice';
@ -72,15 +72,15 @@ const handleMainModels: ModelHandler = (models, state, dispatch, log) => {
const optimalDimension = getOptimalDimension(defaultModelInList);
if (
getIsSizeOptimal(
state.regionalPrompts.present.size.width,
state.regionalPrompts.present.size.height,
state.controlLayers.present.size.width,
state.controlLayers.present.size.height,
optimalDimension
)
) {
return;
}
const { width, height } = calculateNewSize(
state.regionalPrompts.present.size.aspectRatio.value,
state.controlLayers.present.size.aspectRatio.value,
optimalDimension * optimalDimension
);

4
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts
View File

@ -1,6 +1,6 @@
import { isAnyOf } from '@reduxjs/toolkit';
import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
import { positivePromptChanged } from 'features/controlLayers/store/regionalPromptsSlice';
import { positivePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
import {
combinatorialToggled,
isErrorChanged,
@ -28,7 +28,7 @@ export const addDynamicPromptsListener = (startAppListening: AppStartListening)
effect: async (action, { dispatch, getState, cancelActiveListeners, delay }) => {
cancelActiveListeners();
const state = getState();
const { positivePrompt } = state.regionalPrompts.present;
const { positivePrompt } = state.controlLayers.present;
const { maxPrompts } = state.dynamicPrompts;
if (state.config.disabledFeatures.includes('dynamicPrompting')) {

20
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge.ts
View File

@ -11,19 +11,19 @@ import {
maskedGuidanceLayerAdded,
maskLayerIPAdapterAdded,
maskLayerIPAdapterDeleted,
} from 'features/controlLayers/store/regionalPromptsSlice';
} from 'features/controlLayers/store/controlLayersSlice';
import type { Layer } from 'features/controlLayers/store/types';
import { modelConfigsAdapterSelectors, modelsApi } from 'services/api/endpoints/models';
import { isControlNetModelConfig, isIPAdapterModelConfig } from 'services/api/types';
import { assert } from 'tsafe';
import { v4 as uuidv4 } from 'uuid';
export const guidanceLayerAdded = createAction<Layer['type']>('regionalPrompts/guidanceLayerAdded');
export const guidanceLayerDeleted = createAction<string>('regionalPrompts/guidanceLayerDeleted');
export const allLayersDeleted = createAction('regionalPrompts/allLayersDeleted');
export const guidanceLayerIPAdapterAdded = createAction<string>('regionalPrompts/guidanceLayerIPAdapterAdded');
export const guidanceLayerAdded = createAction<Layer['type']>('controlLayers/guidanceLayerAdded');
export const guidanceLayerDeleted = createAction<string>('controlLayers/guidanceLayerDeleted');
export const allLayersDeleted = createAction('controlLayers/allLayersDeleted');
export const guidanceLayerIPAdapterAdded = createAction<string>('controlLayers/guidanceLayerIPAdapterAdded');
export const guidanceLayerIPAdapterDeleted = createAction<{ layerId: string; ipAdapterId: string }>(
'regionalPrompts/guidanceLayerIPAdapterDeleted'
'controlLayers/guidanceLayerIPAdapterDeleted'
);
export const addRegionalControlToControlAdapterBridge = (startAppListening: AppStartListening) => {
@ -32,7 +32,7 @@ export const addRegionalControlToControlAdapterBridge = (startAppListening: AppS
effect: (action, { dispatch, getState }) => {
const type = action.payload;
const layerId = uuidv4();
if (type === 'masked_guidance_layer') {
if (type === 'regional_guidance_layer') {
dispatch(maskedGuidanceLayerAdded({ layerId }));
return;
}
@ -84,14 +84,14 @@ export const addRegionalControlToControlAdapterBridge = (startAppListening: AppS
effect: (action, { getState, dispatch }) => {
const layerId = action.payload;
const state = getState();
const layer = state.regionalPrompts.present.layers.find((l) => l.id === layerId);
const layer = state.controlLayers.present.layers.find((l) => l.id === layerId);
assert(layer, `Layer ${layerId} not found`);
if (layer.type === 'ip_adapter_layer') {
dispatch(controlAdapterRemoved({ id: layer.ipAdapterId }));
} else if (layer.type === 'control_adapter_layer') {
dispatch(controlAdapterRemoved({ id: layer.controlNetId }));
} else if (layer.type === 'masked_guidance_layer') {
} else if (layer.type === 'regional_guidance_layer') {
for (const ipAdapterId of layer.ipAdapterIds) {
dispatch(controlAdapterRemoved({ id: ipAdapterId }));
}
@ -104,7 +104,7 @@ export const addRegionalControlToControlAdapterBridge = (startAppListening: AppS
actionCreator: allLayersDeleted,
effect: (action, { dispatch, getOriginalState }) => {
const state = getOriginalState();
for (const layer of state.regionalPrompts.present.layers) {
for (const layer of state.controlLayers.present.layers) {
dispatch(guidanceLayerDeleted(layer.id));
}
},

2
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/setDefaultSettings.ts
View File

@ -1,5 +1,5 @@
import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
import { heightChanged, widthChanged } from 'features/controlLayers/store/regionalPromptsSlice';
import { heightChanged, widthChanged } from 'features/controlLayers/store/controlLayersSlice';
import { setDefaultSettings } from 'features/parameters/store/actions';
import {
setCfgRescaleMultiplier,

12
invokeai/frontend/web/src/app/store/store.ts
View File

@ -11,10 +11,10 @@ import {
controlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import {
regionalPromptsPersistConfig,
regionalPromptsSlice,
regionalPromptsUndoableConfig,
} from 'features/controlLayers/store/regionalPromptsSlice';
controlLayersPersistConfig,
controlLayersSlice,
controlLayersUndoableConfig,
} from 'features/controlLayers/store/controlLayersSlice';
import { deleteImageModalSlice } from 'features/deleteImageModal/store/slice';
import { dynamicPromptsPersistConfig, dynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
import { galleryPersistConfig, gallerySlice } from 'features/gallery/store/gallerySlice';
@ -65,7 +65,7 @@ const allReducers = {
[queueSlice.name]: queueSlice.reducer,
[workflowSlice.name]: workflowSlice.reducer,
[hrfSlice.name]: hrfSlice.reducer,
[regionalPromptsSlice.name]: undoable(regionalPromptsSlice.reducer, regionalPromptsUndoableConfig),
[controlLayersSlice.name]: undoable(controlLayersSlice.reducer, controlLayersUndoableConfig),
[api.reducerPath]: api.reducer,
};
@ -110,7 +110,7 @@ const persistConfigs: { [key in keyof typeof allReducers]?: PersistConfig } = {
[loraPersistConfig.name]: loraPersistConfig,
[modelManagerV2PersistConfig.name]: modelManagerV2PersistConfig,
[hrfPersistConfig.name]: hrfPersistConfig,
[regionalPromptsPersistConfig.name]: regionalPromptsPersistConfig,
[controlLayersPersistConfig.name]: controlLayersPersistConfig,
};
const unserialize: UnserializeFunction = (data, key) => {

16
invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
View File

@ -5,7 +5,7 @@ import {
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
import { selectRegionalPromptsSlice } from 'features/controlLayers/store/regionalPromptsSlice';
import { selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
@ -24,12 +24,12 @@ const selector = createMemoizedSelector(
selectSystemSlice,
selectNodesSlice,
selectDynamicPromptsSlice,
selectRegionalPromptsSlice,
selectControlLayersSlice,
activeTabNameSelector,
],
(controlAdapters, generation, system, nodes, dynamicPrompts, regionalPrompts, activeTabName) => {
(controlAdapters, generation, system, nodes, dynamicPrompts, controlLayers, activeTabName) => {
const { initialImage, model } = generation;
const { positivePrompt } = regionalPrompts.present;
const { positivePrompt } = controlLayers.present;
const { isConnected } = system;
@ -101,10 +101,10 @@ const selector = createMemoizedSelector(
if (activeTabName === 'txt2img') {
// Special handling for control layers on txt2img
const enabledControlLayersAdapterIds = regionalPrompts.present.layers
const enabledControlLayersAdapterIds = controlLayers.present.layers
.filter((l) => l.isEnabled)
.flatMap((layer) => {
if (layer.type === 'masked_guidance_layer') {
if (layer.type === 'regional_guidance_layer') {
return layer.ipAdapterIds;
}
if (layer.type === 'control_adapter_layer') {
@ -117,8 +117,8 @@ const selector = createMemoizedSelector(
enabledControlAdapters = enabledControlAdapters.filter((ca) => enabledControlLayersAdapterIds.includes(ca.id));
} else {
const allControlLayerAdapterIds = regionalPrompts.present.layers.flatMap((layer) => {
if (layer.type === 'masked_guidance_layer') {
const allControlLayerAdapterIds = controlLayers.present.layers.flatMap((layer) => {
if (layer.type === 'regional_guidance_layer') {
return layer.ipAdapterIds;
}
if (layer.type === 'control_adapter_layer') {

2
invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
View File

@ -13,7 +13,7 @@ import {
controlAdapterImageChanged,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { heightChanged, widthChanged } from 'features/controlLayers/store/regionalPromptsSlice';
import { heightChanged, widthChanged } from 'features/controlLayers/store/controlLayersSlice';
import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize';
import { selectOptimalDimension } from 'features/parameters/store/generationSlice';

10
invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx
View File

@ -9,7 +9,7 @@ export const AddLayerButton = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const addMaskedGuidanceLayer = useCallback(() => {
dispatch(guidanceLayerAdded('masked_guidance_layer'));
dispatch(guidanceLayerAdded('regional_guidance_layer'));
}, [dispatch]);
const addControlNetLayer = useCallback(() => {
dispatch(guidanceLayerAdded('control_adapter_layer'));
@ -21,12 +21,12 @@ export const AddLayerButton = memo(() => {
return (
<Menu>
<MenuButton as={Button} leftIcon={<PiPlusBold />} variant="ghost">
{t('regionalPrompts.addLayer')}
{t('controlLayers.addLayer')}
</MenuButton>
<MenuList>
<MenuItem onClick={addMaskedGuidanceLayer}> {t('regionalPrompts.maskedGuidanceLayer')}</MenuItem>
<MenuItem onClick={addControlNetLayer}> {t('regionalPrompts.controlNetLayer')}</MenuItem>
<MenuItem onClick={addIPAdapterLayer}> {t('regionalPrompts.ipAdapterLayer')}</MenuItem>
<MenuItem onClick={addMaskedGuidanceLayer}> {t('controlLayers.maskedGuidanceLayer')}</MenuItem>
<MenuItem onClick={addControlNetLayer}> {t('controlLayers.controlNetLayer')}</MenuItem>
<MenuItem onClick={addIPAdapterLayer}> {t('controlLayers.ipAdapterLayer')}</MenuItem>
</MenuList>
</Menu>
);

8
invokeai/frontend/web/src/features/controlLayers/components/AddPromptButtons.tsx
View File

@ -6,8 +6,8 @@ import {
isMaskedGuidanceLayer,
maskLayerNegativePromptChanged,
maskLayerPositivePromptChanged,
selectRegionalPromptsSlice,
} from 'features/controlLayers/store/regionalPromptsSlice';
selectControlLayersSlice,
} from 'features/controlLayers/store/controlLayersSlice';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiPlusBold } from 'react-icons/pi';
@ -21,8 +21,8 @@ export const AddPromptButtons = ({ layerId }: AddPromptButtonProps) => {
const dispatch = useAppDispatch();
const selectValidActions = useMemo(
() =>
createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId);
assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`);
return {
canAddPositivePrompt: layer.positivePrompt === null,

10
invokeai/frontend/web/src/features/controlLayers/components/BrushSize.tsx
View File

@ -10,7 +10,7 @@ import {
PopoverTrigger,
} from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { brushSizeChanged, initialRegionalPromptsState } from 'features/controlLayers/store/regionalPromptsSlice';
import { brushSizeChanged, initialControlLayersState } from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -20,7 +20,7 @@ const formatPx = (v: number | string) => `${v} px`;
export const BrushSize = memo(() => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const brushSize = useAppSelector((s) => s.regionalPrompts.present.brushSize);
const brushSize = useAppSelector((s) => s.controlLayers.present.brushSize);
const onChange = useCallback(
(v: number) => {
dispatch(brushSizeChanged(Math.round(v)));
@ -29,13 +29,13 @@ export const BrushSize = memo(() => {
);
return (
<FormControl w="min-content">
<FormLabel m={0}>{t('regionalPrompts.brushSize')}</FormLabel>
<FormLabel m={0}>{t('controlLayers.brushSize')}</FormLabel>
<Popover isLazy>
<PopoverTrigger>
<CompositeNumberInput
min={1}
max={600}
defaultValue={initialRegionalPromptsState.brushSize}
defaultValue={initialControlLayersState.brushSize}
value={brushSize}
onChange={onChange}
w={24}
@ -48,7 +48,7 @@ export const BrushSize = memo(() => {
<CompositeSlider
min={1}
max={300}
defaultValue={initialRegionalPromptsState.brushSize}
defaultValue={initialControlLayersState.brushSize}
value={brushSize}
onChange={onChange}
marks={marks}

6
invokeai/frontend/web/src/features/controlLayers/components/CALayerOpacity.tsx
View File

@ -13,7 +13,7 @@ import {
} from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { useLayerOpacity } from 'features/controlLayers/hooks/layerStateHooks';
import { layerOpacityChanged } from 'features/controlLayers/store/regionalPromptsSlice';
import { layerOpacityChanged } from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiDropHalfFill } from 'react-icons/pi';
@ -39,7 +39,7 @@ const CALayerOpacity = ({ layerId }: Props) => {
<Popover isLazy>
<PopoverTrigger>
<IconButton
aria-label={t('regionalPrompts.opacity')}
aria-label={t('controlLayers.opacity')}
size="sm"
icon={<PiDropHalfFill size={16} />}
variant="ghost"
@ -50,7 +50,7 @@ const CALayerOpacity = ({ layerId }: Props) => {
<PopoverBody>
<Flex direction="column" gap={2}>
<FormControl orientation="horizontal" minW={96}>
<FormLabel m={0}>{t('regionalPrompts.opacity')}</FormLabel>
<FormLabel m={0}>{t('controlLayers.opacity')}</FormLabel>
<CompositeSlider
min={0}
max={100}

10
invokeai/frontend/web/src/features/controlLayers/components/ControlAdapterLayerListItem.tsx
View File

@ -10,8 +10,8 @@ import { RPLayerVisibilityToggle } from 'features/controlLayers/components/RPLay
import {
isControlAdapterLayer,
layerSelected,
selectRegionalPromptsSlice,
} from 'features/controlLayers/store/regionalPromptsSlice';
selectControlLayersSlice,
} from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback, useMemo } from 'react';
import { assert } from 'tsafe';
@ -23,12 +23,12 @@ export const ControlAdapterLayerListItem = memo(({ layerId }: Props) => {
const dispatch = useAppDispatch();
const selector = useMemo(
() =>
createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId);
assert(isControlAdapterLayer(layer), `Layer ${layerId} not found or not a ControlNet layer`);
return {
controlNetId: layer.controlNetId,
isSelected: layerId === regionalPrompts.present.selectedLayerId,
isSelected: layerId === controlLayers.present.selectedLayerId,
};
}),
[layerId]

24
invokeai/frontend/web/src/features/controlLayers/components/ControlLayersEditor.stories.tsx Normal file
View File

@ -0,0 +1,24 @@
import { Flex } from '@invoke-ai/ui-library';
import type { Meta, StoryObj } from '@storybook/react';
import { ControlLayersEditor } from 'features/controlLayers/components/ControlLayersEditor';
const meta: Meta<typeof ControlLayersEditor> = {
title: 'Feature/ControlLayers',
tags: ['autodocs'],
component: ControlLayersEditor,
};
export default meta;
type Story = StoryObj<typeof ControlLayersEditor>;
const Component = () => {
return (
<Flex w={1500} h={1500}>
<ControlLayersEditor />
</Flex>
);
};
export const Default: Story = {
render: Component,
};

8
invokeai/frontend/web/src/features/controlLayers/components/RegionalPromptsEditor.tsx → invokeai/frontend/web/src/features/controlLayers/components/ControlLayersEditor.tsx
View File

@ -1,10 +1,10 @@
/* eslint-disable i18next/no-literal-string */
import { Flex } from '@invoke-ai/ui-library';
import { RegionalPromptsToolbar } from 'features/controlLayers/components/RegionalPromptsToolbar';
import { ControlLayersToolbar } from 'features/controlLayers/components/ControlLayersToolbar';
import { StageComponent } from 'features/controlLayers/components/StageComponent';
import { memo } from 'react';
export const RegionalPromptsEditor = memo(() => {
export const ControlLayersEditor = memo(() => {
return (
<Flex
position="relative"
@ -15,10 +15,10 @@ export const RegionalPromptsEditor = memo(() => {
alignItems="center"
justifyContent="center"
>
<RegionalPromptsToolbar />
<ControlLayersToolbar />
<StageComponent />
</Flex>
);
});
RegionalPromptsEditor.displayName = 'RegionalPromptsEditor';
ControlLayersEditor.displayName = 'ControlLayersEditor';

12
invokeai/frontend/web/src/features/controlLayers/components/RegionalPromptsPanelContent.tsx → invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
View File

@ -8,17 +8,17 @@ import { ControlAdapterLayerListItem } from 'features/controlLayers/components/C
import { DeleteAllLayersButton } from 'features/controlLayers/components/DeleteAllLayersButton';
import { IPAdapterLayerListItem } from 'features/controlLayers/components/IPAdapterLayerListItem';
import { MaskedGuidanceLayerListItem } from 'features/controlLayers/components/MaskedGuidanceLayerListItem';
import { isRenderableLayer, selectRegionalPromptsSlice } from 'features/controlLayers/store/regionalPromptsSlice';
import { isRenderableLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
import type { Layer } from 'features/controlLayers/store/types';
import { partition } from 'lodash-es';
import { memo } from 'react';
const selectLayerIdTypePairs = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const [renderableLayers, ipAdapterLayers] = partition(regionalPrompts.present.layers, isRenderableLayer);
const selectLayerIdTypePairs = createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const [renderableLayers, ipAdapterLayers] = partition(controlLayers.present.layers, isRenderableLayer);
return [...ipAdapterLayers, ...renderableLayers].map((l) => ({ id: l.id, type: l.type })).reverse();
});
export const RegionalPromptsPanelContent = memo(() => {
export const ControlLayersPanelContent = memo(() => {
const layerIdTypePairs = useAppSelector(selectLayerIdTypePairs);
return (
<Flex flexDir="column" gap={4} w="full" h="full">
@ -37,7 +37,7 @@ export const RegionalPromptsPanelContent = memo(() => {
);
});
RegionalPromptsPanelContent.displayName = 'RegionalPromptsPanelContent';
ControlLayersPanelContent.displayName = 'ControlLayersPanelContent';
type LayerWrapperProps = {
id: string;
@ -45,7 +45,7 @@ type LayerWrapperProps = {
};
const LayerWrapper = memo(({ id, type }: LayerWrapperProps) => {
if (type === 'masked_guidance_layer') {
if (type === 'regional_guidance_layer') {
return <MaskedGuidanceLayerListItem key={id} layerId={id} />;
}
if (type === 'control_adapter_layer') {

4
invokeai/frontend/web/src/features/controlLayers/components/RegionalPromptsToolbar.tsx → invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
View File

@ -6,7 +6,7 @@ import { ToolChooser } from 'features/controlLayers/components/ToolChooser';
import { UndoRedoButtonGroup } from 'features/controlLayers/components/UndoRedoButtonGroup';
import { memo } from 'react';
export const RegionalPromptsToolbar = memo(() => {
export const ControlLayersToolbar = memo(() => {
return (
<Flex gap={4}>
<BrushSize />
@ -17,4 +17,4 @@ export const RegionalPromptsToolbar = memo(() => {
);
});
RegionalPromptsToolbar.displayName = 'RegionalPromptsToolbar';
ControlLayersToolbar.displayName = 'ControlLayersToolbar';

2
invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx
View File

@ -14,7 +14,7 @@ export const DeleteAllLayersButton = memo(() => {
return (
<Button onClick={onClick} leftIcon={<PiTrashSimpleBold />} variant="ghost" colorScheme="error">
{t('regionalPrompts.deleteAll')}
{t('controlLayers.deleteAll')}
</Button>
);
});

12
invokeai/frontend/web/src/features/controlLayers/components/GlobalMaskLayerOpacity.tsx
View File

@ -2,8 +2,8 @@ import { CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } f
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import {
globalMaskLayerOpacityChanged,
initialRegionalPromptsState,
} from 'features/controlLayers/store/regionalPromptsSlice';
initialControlLayersState,
} from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -14,7 +14,7 @@ export const GlobalMaskLayerOpacity = memo(() => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const globalMaskLayerOpacity = useAppSelector((s) =>
Math.round(s.regionalPrompts.present.globalMaskLayerOpacity * 100)
Math.round(s.controlLayers.present.globalMaskLayerOpacity * 100)
);
const onChange = useCallback(
(v: number) => {
@ -24,14 +24,14 @@ export const GlobalMaskLayerOpacity = memo(() => {
);
return (
<FormControl orientation="vertical">
<FormLabel m={0}>{t('regionalPrompts.globalMaskOpacity')}</FormLabel>
<FormLabel m={0}>{t('controlLayers.globalMaskOpacity')}</FormLabel>
<Flex gap={4}>
<CompositeSlider
min={0}
max={100}
step={1}
value={globalMaskLayerOpacity}
defaultValue={initialRegionalPromptsState.globalMaskLayerOpacity * 100}
defaultValue={initialControlLayersState.globalMaskLayerOpacity * 100}
onChange={onChange}
marks={marks}
minW={48}
@ -41,7 +41,7 @@ export const GlobalMaskLayerOpacity = memo(() => {
max={100}
step={1}
value={globalMaskLayerOpacity}
defaultValue={initialRegionalPromptsState.globalMaskLayerOpacity * 100}
defaultValue={initialControlLayersState.globalMaskLayerOpacity * 100}
onChange={onChange}
w={28}
format={formatPct}

6
invokeai/frontend/web/src/features/controlLayers/components/IPAdapterLayerListItem.tsx
View File

@ -5,7 +5,7 @@ import ControlAdapterLayerConfig from 'features/controlLayers/components/control
import { LayerTitle } from 'features/controlLayers/components/LayerTitle';
import { RPLayerDeleteButton } from 'features/controlLayers/components/RPLayerDeleteButton';
import { RPLayerVisibilityToggle } from 'features/controlLayers/components/RPLayerVisibilityToggle';
import { isIPAdapterLayer, selectRegionalPromptsSlice } from 'features/controlLayers/store/regionalPromptsSlice';
import { isIPAdapterLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
import { memo, useMemo } from 'react';
import { assert } from 'tsafe';
@ -16,8 +16,8 @@ type Props = {
export const IPAdapterLayerListItem = memo(({ layerId }: Props) => {
const selector = useMemo(
() =>
createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId);
assert(isIPAdapterLayer(layer), `Layer ${layerId} not found or not an IP Adapter layer`);
return layer.ipAdapterId;
}),

4
invokeai/frontend/web/src/features/controlLayers/components/LayerTitle.tsx
View File

@ -10,8 +10,8 @@ type Props = {
export const LayerTitle = memo(({ type }: Props) => {
const { t } = useTranslation();
const title = useMemo(() => {
if (type === 'masked_guidance_layer') {
return t('regionalPrompts.maskedGuidance');
if (type === 'regional_guidance_layer') {
return t('controlLayers.maskedGuidance');
} else if (type === 'control_adapter_layer') {
return t('common.controlNet');
} else if (type === 'ip_adapter_layer') {

14
invokeai/frontend/web/src/features/controlLayers/components/MaskedGuidanceLayerListItem.tsx
View File

@ -14,8 +14,8 @@ import { RPLayerVisibilityToggle } from 'features/controlLayers/components/RPLay
import {
isMaskedGuidanceLayer,
layerSelected,
selectRegionalPromptsSlice,
} from 'features/controlLayers/store/regionalPromptsSlice';
selectControlLayersSlice,
} from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { assert } from 'tsafe';
@ -31,15 +31,15 @@ export const MaskedGuidanceLayerListItem = memo(({ layerId }: Props) => {
const dispatch = useAppDispatch();
const selector = useMemo(
() =>
createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId);
assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`);
return {
color: rgbColorToString(layer.previewColor),
hasPositivePrompt: layer.positivePrompt !== null,
hasNegativePrompt: layer.negativePrompt !== null,
hasIPAdapters: layer.ipAdapterIds.length > 0,
isSelected: layerId === regionalPrompts.present.selectedLayerId,
isSelected: layerId === controlLayers.present.selectedLayerId,
autoNegative: layer.autoNegative,
};
}),
@ -63,11 +63,11 @@ export const MaskedGuidanceLayerListItem = memo(({ layerId }: Props) => {
<Flex flexDir="column" w="full" bg="base.850" p={3} gap={3} borderRadius="base">
<Flex gap={3} alignItems="center" cursor="pointer">
<RPLayerVisibilityToggle layerId={layerId} />
<LayerTitle type="masked_guidance_layer" />
<LayerTitle type="regional_guidance_layer" />
<Spacer />
{autoNegative === 'invert' && (
<Badge color="base.300" bg="transparent" borderWidth={1}>
{t('regionalPrompts.autoNegative')}
{t('controlLayers.autoNegative')}
</Badge>
)}
<RPLayerColorPicker layerId={layerId} />

10
invokeai/frontend/web/src/features/controlLayers/components/RPLayerAutoNegativeCheckbox.tsx
View File

@ -4,8 +4,8 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import {
isMaskedGuidanceLayer,
maskLayerAutoNegativeChanged,
selectRegionalPromptsSlice,
} from 'features/controlLayers/store/regionalPromptsSlice';
selectControlLayersSlice,
} from 'features/controlLayers/store/controlLayersSlice';
import type { ChangeEvent } from 'react';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@ -18,8 +18,8 @@ type Props = {
const useAutoNegative = (layerId: string) => {
const selectAutoNegative = useMemo(
() =>
createSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
createSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId);
assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`);
return layer.autoNegative;
}),
@ -42,7 +42,7 @@ export const MaskedGuidanceLayerAutoNegativeCheckbox = memo(({ layerId }: Props)
return (
<FormControl gap={2}>
<FormLabel m={0}>{t('regionalPrompts.autoNegative')}</FormLabel>
<FormLabel m={0}>{t('controlLayers.autoNegative')}</FormLabel>
<Checkbox size="md" isChecked={autoNegative === 'invert'} onChange={onChange} />
</FormControl>
);

12
invokeai/frontend/web/src/features/controlLayers/components/RPLayerColorPicker.tsx
View File

@ -6,8 +6,8 @@ import { rgbColorToString } from 'features/canvas/util/colorToString';
import {
isMaskedGuidanceLayer,
maskLayerPreviewColorChanged,
selectRegionalPromptsSlice,
} from 'features/controlLayers/store/regionalPromptsSlice';
selectControlLayersSlice,
} from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback, useMemo } from 'react';
import type { RgbColor } from 'react-colorful';
import { useTranslation } from 'react-i18next';
@ -21,8 +21,8 @@ export const RPLayerColorPicker = memo(({ layerId }: Props) => {
const { t } = useTranslation();
const selectColor = useMemo(
() =>
createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId);
assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an vector mask layer`);
return layer.previewColor;
}),
@ -40,10 +40,10 @@ export const RPLayerColorPicker = memo(({ layerId }: Props) => {
<Popover isLazy>
<PopoverTrigger>
<span>
<Tooltip label={t('regionalPrompts.maskPreviewColor')}>
<Tooltip label={t('controlLayers.maskPreviewColor')}>
<Flex
as="button"
aria-label={t('regionalPrompts.maskPreviewColor')}
aria-label={t('controlLayers.maskPreviewColor')}
borderRadius="base"
borderWidth={1}
bg={rgbColorToString(color)}

6
invokeai/frontend/web/src/features/controlLayers/components/RPLayerIPAdapterList.tsx
View File

@ -3,7 +3,7 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { guidanceLayerIPAdapterDeleted } from 'app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import ControlAdapterLayerConfig from 'features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig';
import { isMaskedGuidanceLayer, selectRegionalPromptsSlice } from 'features/controlLayers/store/regionalPromptsSlice';
import { isMaskedGuidanceLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback, useMemo } from 'react';
import { PiTrashSimpleBold } from 'react-icons/pi';
import { assert } from 'tsafe';
@ -15,8 +15,8 @@ type Props = {
export const RPLayerIPAdapterList = memo(({ layerId }: Props) => {
const selectIPAdapterIds = useMemo(
() =>
createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.filter(isMaskedGuidanceLayer).find((l) => l.id === layerId);
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.filter(isMaskedGuidanceLayer).find((l) => l.id === layerId);
assert(layer, `Layer ${layerId} not found`);
return layer.ipAdapterIds;
}),

8
invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenu.tsx
View File

@ -3,7 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
import { RPLayerMenuArrangeActions } from 'features/controlLayers/components/RPLayerMenuArrangeActions';
import { RPLayerMenuMaskedGuidanceActions } from 'features/controlLayers/components/RPLayerMenuMaskedGuidanceActions';
import { useLayerType } from 'features/controlLayers/hooks/layerStateHooks';
import { layerDeleted, layerReset } from 'features/controlLayers/store/regionalPromptsSlice';
import { layerDeleted, layerReset } from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiArrowCounterClockwiseBold, PiDotsThreeVerticalBold, PiTrashSimpleBold } from 'react-icons/pi';
@ -24,19 +24,19 @@ export const RPLayerMenu = memo(({ layerId }: Props) => {
<Menu>
<MenuButton as={IconButton} aria-label="Layer menu" size="sm" icon={<PiDotsThreeVerticalBold />} />
<MenuList>
{layerType === 'masked_guidance_layer' && (
{layerType === 'regional_guidance_layer' && (
<>
<RPLayerMenuMaskedGuidanceActions layerId={layerId} />
<MenuDivider />
</>
)}
{(layerType === 'masked_guidance_layer' || layerType === 'control_adapter_layer') && (
{(layerType === 'regional_guidance_layer' || layerType === 'control_adapter_layer') && (
<>
<RPLayerMenuArrangeActions layerId={layerId} />
<MenuDivider />
</>
)}
{layerType === 'masked_guidance_layer' && (
{layerType === 'regional_guidance_layer' && (
<MenuItem onClick={resetLayer} icon={<PiArrowCounterClockwiseBold />}>
{t('accessibility.reset')}
</MenuItem>

20
invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenuArrangeActions.tsx
View File

@ -7,8 +7,8 @@ import {
layerMovedForward,
layerMovedToBack,
layerMovedToFront,
selectRegionalPromptsSlice,
} from 'features/controlLayers/store/regionalPromptsSlice';
selectControlLayersSlice,
} from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiArrowDownBold, PiArrowLineDownBold, PiArrowLineUpBold, PiArrowUpBold } from 'react-icons/pi';
@ -21,11 +21,11 @@ export const RPLayerMenuArrangeActions = memo(({ layerId }: Props) => {
const { t } = useTranslation();
const selectValidActions = useMemo(
() =>
createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId);
assert(isRenderableLayer(layer), `Layer ${layerId} not found or not an RP layer`);
const layerIndex = regionalPrompts.present.layers.findIndex((l) => l.id === layerId);
const layerCount = regionalPrompts.present.layers.length;
const layerIndex = controlLayers.present.layers.findIndex((l) => l.id === layerId);
const layerCount = controlLayers.present.layers.length;
return {
canMoveForward: layerIndex < layerCount - 1,
canMoveBackward: layerIndex > 0,
@ -51,16 +51,16 @@ export const RPLayerMenuArrangeActions = memo(({ layerId }: Props) => {
return (
<>
<MenuItem onClick={moveToFront} isDisabled={!validActions.canMoveToFront} icon={<PiArrowLineUpBold />}>
{t('regionalPrompts.moveToFront')}
{t('controlLayers.moveToFront')}
</MenuItem>
<MenuItem onClick={moveForward} isDisabled={!validActions.canMoveForward} icon={<PiArrowUpBold />}>
{t('regionalPrompts.moveForward')}
{t('controlLayers.moveForward')}
</MenuItem>
<MenuItem onClick={moveBackward} isDisabled={!validActions.canMoveBackward} icon={<PiArrowDownBold />}>
{t('regionalPrompts.moveBackward')}
{t('controlLayers.moveBackward')}
</MenuItem>
<MenuItem onClick={moveToBack} isDisabled={!validActions.canMoveToBack} icon={<PiArrowLineDownBold />}>
{t('regionalPrompts.moveToBack')}
{t('controlLayers.moveToBack')}
</MenuItem>
</>
);

14
invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenuMaskedGuidanceActions.tsx
View File

@ -6,8 +6,8 @@ import {
isMaskedGuidanceLayer,
maskLayerNegativePromptChanged,
maskLayerPositivePromptChanged,
selectRegionalPromptsSlice,
} from 'features/controlLayers/store/regionalPromptsSlice';
selectControlLayersSlice,
} from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiPlusBold } from 'react-icons/pi';
@ -20,8 +20,8 @@ export const RPLayerMenuMaskedGuidanceActions = memo(({ layerId }: Props) => {
const { t } = useTranslation();
const selectValidActions = useMemo(
() =>
createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId);
assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`);
return {
canAddPositivePrompt: layer.positivePrompt === null,
@ -43,13 +43,13 @@ export const RPLayerMenuMaskedGuidanceActions = memo(({ layerId }: Props) => {
return (
<>
<MenuItem onClick={addPositivePrompt} isDisabled={!validActions.canAddPositivePrompt} icon={<PiPlusBold />}>
{t('regionalPrompts.addPositivePrompt')}
{t('controlLayers.addPositivePrompt')}
</MenuItem>
<MenuItem onClick={addNegativePrompt} isDisabled={!validActions.canAddNegativePrompt} icon={<PiPlusBold />}>
{t('regionalPrompts.addNegativePrompt')}
{t('controlLayers.addNegativePrompt')}
</MenuItem>
<MenuItem onClick={addIPAdapter} icon={<PiPlusBold />}>
{t('regionalPrompts.addIPAdapter')}
{t('controlLayers.addIPAdapter')}
</MenuItem>
</>
);

2
invokeai/frontend/web/src/features/controlLayers/components/RPLayerNegativePrompt.tsx
View File

@ -2,7 +2,7 @@ import { Box, Textarea } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { RPLayerPromptDeleteButton } from 'features/controlLayers/components/RPLayerPromptDeleteButton';
import { useLayerNegativePrompt } from 'features/controlLayers/hooks/layerStateHooks';
import { maskLayerNegativePromptChanged } from 'features/controlLayers/store/regionalPromptsSlice';
import { maskLayerNegativePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
import { PromptPopover } from 'features/prompt/PromptPopover';

2
invokeai/frontend/web/src/features/controlLayers/components/RPLayerPositivePrompt.tsx
View File

@ -2,7 +2,7 @@ import { Box, Textarea } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { RPLayerPromptDeleteButton } from 'features/controlLayers/components/RPLayerPromptDeleteButton';
import { useLayerPositivePrompt } from 'features/controlLayers/hooks/layerStateHooks';
import { maskLayerPositivePromptChanged } from 'features/controlLayers/store/regionalPromptsSlice';
import { maskLayerPositivePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
import { PromptPopover } from 'features/prompt/PromptPopover';

6
invokeai/frontend/web/src/features/controlLayers/components/RPLayerPromptDeleteButton.tsx
View File

@ -3,7 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
import {
maskLayerNegativePromptChanged,
maskLayerPositivePromptChanged,
} from 'features/controlLayers/store/regionalPromptsSlice';
} from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiTrashSimpleBold } from 'react-icons/pi';
@ -24,10 +24,10 @@ export const RPLayerPromptDeleteButton = memo(({ layerId, polarity }: Props) =>
}
}, [dispatch, layerId, polarity]);
return (
<Tooltip label={t('regionalPrompts.deletePrompt')}>
<Tooltip label={t('controlLayers.deletePrompt')}>
<IconButton
variant="promptOverlay"
aria-label={t('regionalPrompts.deletePrompt')}
aria-label={t('controlLayers.deletePrompt')}
icon={<PiTrashSimpleBold />}
onClick={onClick}
/>

6
invokeai/frontend/web/src/features/controlLayers/components/RPLayerVisibilityToggle.tsx
View File

@ -1,7 +1,7 @@
import { IconButton } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { useLayerIsVisible } from 'features/controlLayers/hooks/layerStateHooks';
import { layerVisibilityToggled } from 'features/controlLayers/store/regionalPromptsSlice';
import { layerVisibilityToggled } from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiCheckBold } from 'react-icons/pi';
@ -21,8 +21,8 @@ export const RPLayerVisibilityToggle = memo(({ layerId }: Props) => {
return (
<IconButton
size="sm"
aria-label={t('regionalPrompts.toggleVisibility')}
tooltip={t('regionalPrompts.toggleVisibility')}
aria-label={t('controlLayers.toggleVisibility')}
tooltip={t('controlLayers.toggleVisibility')}
variant="outline"
icon={isVisible ? <PiCheckBold /> : undefined}
onClick={onClick}

24
invokeai/frontend/web/src/features/controlLayers/components/RegionalPromptingEditor.stories.tsx
View File

@ -1,24 +0,0 @@
import { Flex } from '@invoke-ai/ui-library';
import type { Meta, StoryObj } from '@storybook/react';
import { RegionalPromptsEditor } from 'features/controlLayers/components/RegionalPromptsEditor';
const meta: Meta<typeof RegionalPromptsEditor> = {
title: 'Feature/RegionalPrompts',
tags: ['autodocs'],
component: RegionalPromptsEditor,
};
export default meta;
type Story = StoryObj<typeof RegionalPromptsEditor>;
const Component = () => {
return (
<Flex w={1500} h={1500}>
<RegionalPromptsEditor />
</Flex>
);
};
export const Default: Story = {
render: Component,
};

18
invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
View File

@ -13,8 +13,8 @@ import {
isMaskedGuidanceLayer,
layerBboxChanged,
layerTranslated,
selectRegionalPromptsSlice,
} from 'features/controlLayers/store/regionalPromptsSlice';
selectControlLayersSlice,
} from 'features/controlLayers/store/controlLayersSlice';
import { debouncedRenderers, renderers as normalRenderers } from 'features/controlLayers/util/renderers';
import Konva from 'konva';
import type { IRect } from 'konva/lib/types';
@ -25,17 +25,17 @@ import { v4 as uuidv4 } from 'uuid';
// This will log warnings when layers > 5 - maybe use `import.meta.env.MODE === 'development'` instead?
Konva.showWarnings = false;
const log = logger('regionalPrompts');
const log = logger('controlLayers');
const selectSelectedLayerColor = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers
const selectSelectedLayerColor = createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers
.filter(isMaskedGuidanceLayer)
.find((l) => l.id === regionalPrompts.present.selectedLayerId);
.find((l) => l.id === controlLayers.present.selectedLayerId);
return layer?.previewColor ?? null;
});
const selectSelectedLayerType = createSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const selectedLayer = regionalPrompts.present.layers.find((l) => l.id === regionalPrompts.present.selectedLayerId);
const selectSelectedLayerType = createSelector(selectControlLayersSlice, (controlLayers) => {
const selectedLayer = controlLayers.present.layers.find((l) => l.id === controlLayers.present.selectedLayerId);
return selectedLayer?.type ?? null;
});
@ -46,7 +46,7 @@ const useStageRenderer = (
asPreview: boolean
) => {
const dispatch = useAppDispatch();
const state = useAppSelector((s) => s.regionalPrompts.present);
const state = useAppSelector((s) => s.controlLayers.present);
const tool = useStore($tool);
const { onMouseDown, onMouseUp, onMouseMove, onMouseEnter, onMouseLeave, onMouseWheel } = useMouseEvents();
const cursorPosition = useStore($cursorPosition);

14
invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx
View File

@ -4,18 +4,18 @@ import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import {
$tool,
selectControlLayersSlice,
selectedLayerDeleted,
selectedLayerReset,
selectRegionalPromptsSlice,
} from 'features/controlLayers/store/regionalPromptsSlice';
} from 'features/controlLayers/store/controlLayersSlice';
import { useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import { PiArrowsOutCardinalBold, PiEraserBold, PiPaintBrushBold, PiRectangleBold } from 'react-icons/pi';
const selectIsDisabled = createSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const selectedLayer = regionalPrompts.present.layers.find((l) => l.id === regionalPrompts.present.selectedLayerId);
return selectedLayer?.type !== 'masked_guidance_layer';
const selectIsDisabled = createSelector(selectControlLayersSlice, (controlLayers) => {
const selectedLayer = controlLayers.present.layers.find((l) => l.id === controlLayers.present.selectedLayerId);
return selectedLayer?.type !== 'regional_guidance_layer';
});
export const ToolChooser: React.FC = () => {
@ -70,8 +70,8 @@ export const ToolChooser: React.FC = () => {
isDisabled={isDisabled}
/>
<IconButton
aria-label={`${t('regionalPrompts.rectangle')} (U)`}
tooltip={`${t('regionalPrompts.rectangle')} (U)`}
aria-label={`${t('controlLayers.rectangle')} (U)`}
tooltip={`${t('controlLayers.rectangle')} (U)`}
icon={<PiRectangleBold />}
variant={tool === 'rect' ? 'solid' : 'outline'}
onClick={setToolToRect}

6
invokeai/frontend/web/src/features/controlLayers/components/UndoRedoButtonGroup.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable i18next/no-literal-string */
import { ButtonGroup, IconButton } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { redo, undo } from 'features/controlLayers/store/regionalPromptsSlice';
import { redo, undo } from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
@ -11,13 +11,13 @@ export const UndoRedoButtonGroup = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const mayUndo = useAppSelector((s) => s.regionalPrompts.past.length > 0);
const mayUndo = useAppSelector((s) => s.controlLayers.past.length > 0);
const handleUndo = useCallback(() => {
dispatch(undo());
}, [dispatch]);
useHotkeys(['meta+z', 'ctrl+z'], handleUndo, { enabled: mayUndo, preventDefault: true }, [mayUndo, handleUndo]);
const mayRedo = useAppSelector((s) => s.regionalPrompts.future.length > 0);
const mayRedo = useAppSelector((s) => s.controlLayers.future.length > 0);
const handleRedo = useCallback(() => {
dispatch(redo());
}, [dispatch]);

2
invokeai/frontend/web/src/features/controlLayers/components/controlAdapterOverrides/ControlAdapterImagePreview.tsx
View File

@ -13,7 +13,7 @@ import {
controlAdapterImageChanged,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { heightChanged, widthChanged } from 'features/controlLayers/store/regionalPromptsSlice';
import { heightChanged, widthChanged } from 'features/controlLayers/store/controlLayersSlice';
import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize';
import { selectOptimalDimension } from 'features/parameters/store/generationSlice';

24
invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts
View File

@ -3,16 +3,16 @@ import { useAppSelector } from 'app/store/storeHooks';
import {
isControlAdapterLayer,
isMaskedGuidanceLayer,
selectRegionalPromptsSlice,
} from 'features/controlLayers/store/regionalPromptsSlice';
selectControlLayersSlice,
} from 'features/controlLayers/store/controlLayersSlice';
import { useMemo } from 'react';
import { assert } from 'tsafe';
export const useLayerPositivePrompt = (layerId: string) => {
const selectLayer = useMemo(
() =>
createSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
createSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId);
assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`);
assert(layer.positivePrompt !== null, `Layer ${layerId} does not have a positive prompt`);
return layer.positivePrompt;
@ -26,8 +26,8 @@ export const useLayerPositivePrompt = (layerId: string) => {
export const useLayerNegativePrompt = (layerId: string) => {
const selectLayer = useMemo(
() =>
createSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
createSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId);
assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`);
assert(layer.negativePrompt !== null, `Layer ${layerId} does not have a negative prompt`);
return layer.negativePrompt;
@ -41,8 +41,8 @@ export const useLayerNegativePrompt = (layerId: string) => {
export const useLayerIsVisible = (layerId: string) => {
const selectLayer = useMemo(
() =>
createSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
createSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId);
assert(layer, `Layer ${layerId} not found`);
return layer.isEnabled;
}),
@ -55,8 +55,8 @@ export const useLayerIsVisible = (layerId: string) => {
export const useLayerType = (layerId: string) => {
const selectLayer = useMemo(
() =>
createSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.find((l) => l.id === layerId);
createSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId);
assert(layer, `Layer ${layerId} not found`);
return layer.type;
}),
@ -69,8 +69,8 @@ export const useLayerType = (layerId: string) => {
export const useLayerOpacity = (layerId: string) => {
const selectLayer = useMemo(
() =>
createSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
const layer = regionalPrompts.present.layers.filter(isControlAdapterLayer).find((l) => l.id === layerId);
createSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.filter(isControlAdapterLayer).find((l) => l.id === layerId);
assert(layer, `Layer ${layerId} not found`);
return Math.round(layer.opacity * 100);
}),

6
invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
View File

@ -12,7 +12,7 @@ import {
maskLayerLineAdded,
maskLayerPointsAdded,
maskLayerRectAdded,
} from 'features/controlLayers/store/regionalPromptsSlice';
} from 'features/controlLayers/store/controlLayersSlice';
import type Konva from 'konva';
import type { KonvaEventObject } from 'konva/lib/Node';
import type { Vector2d } from 'konva/lib/types';
@ -48,11 +48,11 @@ const BRUSH_SPACING = 20;
export const useMouseEvents = () => {
const dispatch = useAppDispatch();
const selectedLayerId = useAppSelector((s) => s.regionalPrompts.present.selectedLayerId);
const selectedLayerId = useAppSelector((s) => s.controlLayers.present.selectedLayerId);
const tool = useStore($tool);
const lastCursorPosRef = useRef<[number, number] | null>(null);
const shouldInvertBrushSizeScrollDirection = useAppSelector((s) => s.canvas.shouldInvertBrushSizeScrollDirection);
const brushSize = useAppSelector((s) => s.regionalPrompts.present.brushSize);
const brushSize = useAppSelector((s) => s.controlLayers.present.brushSize);
const onMouseDown = useCallback(
(e: KonvaEventObject<MouseEvent | TouchEvent>) => {

10
invokeai/frontend/web/src/features/controlLayers/hooks/useRegionalControlTitle.ts
View File

@ -1,14 +1,14 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { isMaskedGuidanceLayer, selectRegionalPromptsSlice } from 'features/controlLayers/store/regionalPromptsSlice';
import { isMaskedGuidanceLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
const selectValidLayerCount = createSelector(selectRegionalPromptsSlice, (regionalPrompts) => {
if (!regionalPrompts.present.isEnabled) {
const selectValidLayerCount = createSelector(selectControlLayersSlice, (controlLayers) => {
if (!controlLayers.present.isEnabled) {
return 0;
}
const validLayers = regionalPrompts.present.layers
const validLayers = controlLayers.present.layers
.filter(isMaskedGuidanceLayer)
.filter((l) => l.isEnabled)
.filter((l) => {
@ -25,7 +25,7 @@ export const useRegionalControlTitle = () => {
const validLayerCount = useAppSelector(selectValidLayerCount);
const title = useMemo(() => {
const suffix = validLayerCount > 0 ? ` (${validLayerCount})` : '';
return `${t('regionalPrompts.regionalControl')}${suffix}`;
return `${t('controlLayers.regionalControl')}${suffix}`;
}, [t, validLayerCount]);
return title;
};

86
invokeai/frontend/web/src/features/controlLayers/store/regionalPromptsSlice.ts → invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
View File

@ -25,17 +25,17 @@ import { v4 as uuidv4 } from 'uuid';
import type {
ControlAdapterLayer,
ControlLayersState,
DrawingTool,
IPAdapterLayer,
Layer,
MaskedGuidanceLayer,
RegionalPromptsState,
RegionalGuidanceLayer,
Tool,
VectorMaskLine,
VectorMaskRect,
} from './types';
export const initialRegionalPromptsState: RegionalPromptsState = {
export const initialControlLayersState: ControlLayersState = {
_version: 1,
selectedLayerId: null,
brushSize: 100,
@ -56,15 +56,15 @@ export const initialRegionalPromptsState: RegionalPromptsState = {
};
const isLine = (obj: VectorMaskLine | VectorMaskRect): obj is VectorMaskLine => obj.type === 'vector_mask_line';
export const isMaskedGuidanceLayer = (layer?: Layer): layer is MaskedGuidanceLayer =>
layer?.type === 'masked_guidance_layer';
export const isMaskedGuidanceLayer = (layer?: Layer): layer is RegionalGuidanceLayer =>
layer?.type === 'regional_guidance_layer';
export const isControlAdapterLayer = (layer?: Layer): layer is ControlAdapterLayer =>
layer?.type === 'control_adapter_layer';
export const isIPAdapterLayer = (layer?: Layer): layer is IPAdapterLayer => layer?.type === 'ip_adapter_layer';
export const isRenderableLayer = (layer?: Layer): layer is MaskedGuidanceLayer | ControlAdapterLayer =>
layer?.type === 'masked_guidance_layer' || layer?.type === 'control_adapter_layer';
export const isRenderableLayer = (layer?: Layer): layer is RegionalGuidanceLayer | ControlAdapterLayer =>
layer?.type === 'regional_guidance_layer' || layer?.type === 'control_adapter_layer';
const resetLayer = (layer: Layer) => {
if (layer.type === 'masked_guidance_layer') {
if (layer.type === 'regional_guidance_layer') {
layer.maskObjects = [];
layer.bbox = null;
layer.isEnabled = true;
@ -77,22 +77,22 @@ const resetLayer = (layer: Layer) => {
// TODO
}
};
const getVectorMaskPreviewColor = (state: RegionalPromptsState): RgbColor => {
const getVectorMaskPreviewColor = (state: ControlLayersState): RgbColor => {
const vmLayers = state.layers.filter(isMaskedGuidanceLayer);
const lastColor = vmLayers[vmLayers.length - 1]?.previewColor;
return LayerColors.next(lastColor);
};
export const regionalPromptsSlice = createSlice({
name: 'regionalPrompts',
initialState: initialRegionalPromptsState,
export const controlLayersSlice = createSlice({
name: 'controlLayers',
initialState: initialControlLayersState,
reducers: {
//#region All Layers
maskedGuidanceLayerAdded: (state, action: PayloadAction<{ layerId: string }>) => {
const { layerId } = action.payload;
const layer: MaskedGuidanceLayer = {
const layer: RegionalGuidanceLayer = {
id: getMaskedGuidanceLayerId(layerId),
type: 'masked_guidance_layer',
type: 'regional_guidance_layer',
isEnabled: true,
bbox: null,
bboxNeedsUpdate: false,
@ -181,7 +181,7 @@ export const regionalPromptsSlice = createSlice({
if (isRenderableLayer(layer)) {
layer.bbox = bbox;
layer.bboxNeedsUpdate = false;
if (bbox === null && layer.type === 'masked_guidance_layer') {
if (bbox === null && layer.type === 'regional_guidance_layer') {
// The layer was fully erased, empty its objects to prevent accumulation of invisible objects
layer.maskObjects = [];
layer.needsPixelBbox = false;
@ -247,35 +247,35 @@ export const regionalPromptsSlice = createSlice({
maskLayerPositivePromptChanged: (state, action: PayloadAction<{ layerId: string; prompt: string | null }>) => {
const { layerId, prompt } = action.payload;
const layer = state.layers.find((l) => l.id === layerId);
if (layer?.type === 'masked_guidance_layer') {
if (layer?.type === 'regional_guidance_layer') {
layer.positivePrompt = prompt;
}
},
maskLayerNegativePromptChanged: (state, action: PayloadAction<{ layerId: string; prompt: string | null }>) => {
const { layerId, prompt } = action.payload;
const layer = state.layers.find((l) => l.id === layerId);
if (layer?.type === 'masked_guidance_layer') {
if (layer?.type === 'regional_guidance_layer') {
layer.negativePrompt = prompt;
}
},
maskLayerIPAdapterAdded: (state, action: PayloadAction<{ layerId: string; ipAdapterId: string }>) => {
const { layerId, ipAdapterId } = action.payload;
const layer = state.layers.find((l) => l.id === layerId);
if (layer?.type === 'masked_guidance_layer') {
if (layer?.type === 'regional_guidance_layer') {
layer.ipAdapterIds.push(ipAdapterId);
}
},
maskLayerIPAdapterDeleted: (state, action: PayloadAction<{ layerId: string; ipAdapterId: string }>) => {
const { layerId, ipAdapterId } = action.payload;
const layer = state.layers.find((l) => l.id === layerId);
if (layer?.type === 'masked_guidance_layer') {
if (layer?.type === 'regional_guidance_layer') {
layer.ipAdapterIds = layer.ipAdapterIds.filter((id) => id !== ipAdapterId);
}
},
maskLayerPreviewColorChanged: (state, action: PayloadAction<{ layerId: string; color: RgbColor }>) => {
const { layerId, color } = action.payload;
const layer = state.layers.find((l) => l.id === layerId);
if (layer?.type === 'masked_guidance_layer') {
if (layer?.type === 'regional_guidance_layer') {
layer.previewColor = color;
}
},
@ -290,7 +290,7 @@ export const regionalPromptsSlice = createSlice({
) => {
const { layerId, points, tool } = action.payload;
const layer = state.layers.find((l) => l.id === layerId);
if (layer?.type === 'masked_guidance_layer') {
if (layer?.type === 'regional_guidance_layer') {
const lineId = getMaskedGuidanceLayerLineId(layer.id, action.meta.uuid);
layer.maskObjects.push({
type: 'vector_mask_line',
@ -315,7 +315,7 @@ export const regionalPromptsSlice = createSlice({
maskLayerPointsAdded: (state, action: PayloadAction<{ layerId: string; point: [number, number] }>) => {
const { layerId, point } = action.payload;
const layer = state.layers.find((l) => l.id === layerId);
if (layer?.type === 'masked_guidance_layer') {
if (layer?.type === 'regional_guidance_layer') {
const lastLine = layer.maskObjects.findLast(isLine);
if (!lastLine) {
return;
@ -334,7 +334,7 @@ export const regionalPromptsSlice = createSlice({
return;
}
const layer = state.layers.find((l) => l.id === layerId);
if (layer?.type === 'masked_guidance_layer') {
if (layer?.type === 'regional_guidance_layer') {
const id = getMaskedGuidnaceLayerRectId(layer.id, action.meta.uuid);
layer.maskObjects.push({
type: 'vector_mask_rect',
@ -355,7 +355,7 @@ export const regionalPromptsSlice = createSlice({
) => {
const { layerId, autoNegative } = action.payload;
const layer = state.layers.find((l) => l.id === layerId);
if (layer?.type === 'masked_guidance_layer') {
if (layer?.type === 'regional_guidance_layer') {
layer.autoNegative = autoNegative;
}
},
@ -546,26 +546,26 @@ export const {
globalMaskLayerOpacityChanged,
undo,
redo,
} = regionalPromptsSlice.actions;
} = controlLayersSlice.actions;
export const selectAllControlAdapterIds = (regionalPrompts: RegionalPromptsState) =>
regionalPrompts.layers.flatMap((l) => {
export const selectAllControlAdapterIds = (controlLayers: ControlLayersState) =>
controlLayers.layers.flatMap((l) => {
if (l.type === 'control_adapter_layer') {
return [l.controlNetId];
}
if (l.type === 'ip_adapter_layer') {
return [l.ipAdapterId];
}
if (l.type === 'masked_guidance_layer') {
if (l.type === 'regional_guidance_layer') {
return l.ipAdapterIds;
}
return [];
});
export const selectRegionalPromptsSlice = (state: RootState) => state.regionalPrompts;
export const selectControlLayersSlice = (state: RootState) => state.controlLayers;
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
const migrateRegionalPromptsState = (state: any): any => {
const migrateControlLayersState = (state: any): any => {
return state;
};
@ -588,14 +588,14 @@ export const BACKGROUND_RECT_ID = 'background_layer.rect';
// Names (aka classes) for Konva layers and objects
export const CONTROLNET_LAYER_NAME = 'control_adapter_layer';
export const CONTROLNET_LAYER_IMAGE_NAME = 'control_adapter_layer.image';
export const MASKED_GUIDANCE_LAYER_NAME = 'masked_guidance_layer';
export const MASKED_GUIDANCE_LAYER_LINE_NAME = 'masked_guidance_layer.line';
export const MASKED_GUIDANCE_LAYER_OBJECT_GROUP_NAME = 'masked_guidance_layer.object_group';
export const MASKED_GUIDANCE_LAYER_RECT_NAME = 'masked_guidance_layer.rect';
export const regional_guidance_layer_NAME = 'regional_guidance_layer';
export const regional_guidance_layer_LINE_NAME = 'regional_guidance_layer.line';
export const regional_guidance_layer_OBJECT_GROUP_NAME = 'regional_guidance_layer.object_group';
export const regional_guidance_layer_RECT_NAME = 'regional_guidance_layer.rect';
export const LAYER_BBOX_NAME = 'layer.bbox';
// Getters for non-singleton layer and object IDs
const getMaskedGuidanceLayerId = (layerId: string) => `${MASKED_GUIDANCE_LAYER_NAME}_${layerId}`;
const getMaskedGuidanceLayerId = (layerId: string) => `${regional_guidance_layer_NAME}_${layerId}`;
const getMaskedGuidanceLayerLineId = (layerId: string, lineId: string) => `${layerId}.line_${lineId}`;
const getMaskedGuidnaceLayerRectId = (layerId: string, lineId: string) => `${layerId}.rect_${lineId}`;
export const getMaskedGuidanceLayerObjectGroupId = (layerId: string, groupId: string) =>
@ -605,10 +605,10 @@ const getControlNetLayerId = (layerId: string) => `control_adapter_layer_${layer
export const getControlNetLayerImageId = (layerId: string, imageName: string) => `${layerId}.image_${imageName}`;
const getIPAdapterLayerId = (layerId: string) => `ip_adapter_layer_${layerId}`;
export const regionalPromptsPersistConfig: PersistConfig<RegionalPromptsState> = {
name: regionalPromptsSlice.name,
initialState: initialRegionalPromptsState,
migrate: migrateRegionalPromptsState,
export const controlLayersPersistConfig: PersistConfig<ControlLayersState> = {
name: controlLayersSlice.name,
initialState: initialControlLayersState,
migrate: migrateControlLayersState,
persistDenylist: [],
};
@ -626,10 +626,10 @@ const undoableGroupByMatcher = isAnyOf(
const LINE_1 = 'LINE_1';
const LINE_2 = 'LINE_2';
export const regionalPromptsUndoableConfig: UndoableOptions<RegionalPromptsState, UnknownAction> = {
export const controlLayersUndoableConfig: UndoableOptions<ControlLayersState, UnknownAction> = {
limit: 64,
undoType: regionalPromptsSlice.actions.undo.type,
redoType: regionalPromptsSlice.actions.redo.type,
undoType: controlLayersSlice.actions.undo.type,
redoType: controlLayersSlice.actions.redo.type,
groupBy: (action, state, history) => {
// Lines are started with `maskLayerLineAdded` and may have any number of subsequent `maskLayerPointsAdded` events.
// We can use a double-buffer-esque trick to group each "logical" line as a single undoable action, without grouping
@ -649,7 +649,7 @@ export const regionalPromptsUndoableConfig: UndoableOptions<RegionalPromptsState
},
filter: (action, _state, _history) => {
// Ignore all actions from other slices
if (!action.type.startsWith(regionalPromptsSlice.name)) {
if (!action.type.startsWith(controlLayersSlice.name)) {
return false;
}
// This action is triggered on state changes, including when we undo. If we do not ignore this action, when we

8
invokeai/frontend/web/src/features/controlLayers/store/types.ts
View File

@ -57,8 +57,8 @@ export type IPAdapterLayer = LayerBase & {
ipAdapterId: string;
};
export type MaskedGuidanceLayer = RenderableLayerBase & {
type: 'masked_guidance_layer';
export type RegionalGuidanceLayer = RenderableLayerBase & {
type: 'regional_guidance_layer';
maskObjects: (VectorMaskLine | VectorMaskRect)[];
positivePrompt: ParameterPositivePrompt | null;
negativePrompt: ParameterNegativePrompt | null; // Up to one text prompt per mask
@ -68,9 +68,9 @@ export type MaskedGuidanceLayer = RenderableLayerBase & {
needsPixelBbox: boolean; // Needs the slower pixel-based bbox calculation - set to true when an there is an eraser object
};
export type Layer = MaskedGuidanceLayer | ControlAdapterLayer | IPAdapterLayer;
export type Layer = RegionalGuidanceLayer | ControlAdapterLayer | IPAdapterLayer;
export type RegionalPromptsState = {
export type ControlLayersState = {
_version: 1;
selectedLayerId: string | null;
layers: Layer[];

4
invokeai/frontend/web/src/features/controlLayers/util/bbox.ts
View File

@ -1,6 +1,6 @@
import openBase64ImageInTab from 'common/util/openBase64ImageInTab';
import { imageDataToDataURL } from 'features/canvas/util/blobToDataURL';
import { MASKED_GUIDANCE_LAYER_OBJECT_GROUP_NAME } from 'features/controlLayers/store/regionalPromptsSlice';
import { regional_guidance_layer_OBJECT_GROUP_NAME } from 'features/controlLayers/store/controlLayersSlice';
import Konva from 'konva';
import type { Layer as KonvaLayerType } from 'konva/lib/Layer';
import type { IRect } from 'konva/lib/types';
@ -81,7 +81,7 @@ export const getLayerBboxPixels = (layer: KonvaLayerType, preview: boolean = fal
offscreenStage.add(layerClone);
for (const child of layerClone.getChildren()) {
if (child.name() === MASKED_GUIDANCE_LAYER_OBJECT_GROUP_NAME) {
if (child.name() === regional_guidance_layer_OBJECT_GROUP_NAME) {
// We need to cache the group to ensure it composites out eraser strokes correctly
child.opacity(1);
child.cache();

8
invokeai/frontend/web/src/features/controlLayers/util/getLayerBlobs.ts
View File

@ -1,7 +1,7 @@
import { getStore } from 'app/store/nanostores/store';
import openBase64ImageInTab from 'common/util/openBase64ImageInTab';
import { blobToDataURL } from 'features/canvas/util/blobToDataURL';
import { isMaskedGuidanceLayer, MASKED_GUIDANCE_LAYER_NAME } from 'features/controlLayers/store/regionalPromptsSlice';
import { isMaskedGuidanceLayer, regional_guidance_layer_NAME } from 'features/controlLayers/store/controlLayersSlice';
import { renderers } from 'features/controlLayers/util/renderers';
import Konva from 'konva';
import { assert } from 'tsafe';
@ -17,14 +17,14 @@ export const getRegionalPromptLayerBlobs = async (
preview: boolean = false
): Promise<Record<string, Blob>> => {
const state = getStore().getState();
const { layers } = state.regionalPrompts.present;
const { width, height } = state.regionalPrompts.present.size;
const { layers } = state.controlLayers.present;
const { width, height } = state.controlLayers.present.size;
const reduxLayers = layers.filter(isMaskedGuidanceLayer);
const container = document.createElement('div');
const stage = new Konva.Stage({ container, width, height });
renderers.renderLayers(stage, reduxLayers, 1, 'brush');
const konvaLayers = stage.find<Konva.Layer>(`.${MASKED_GUIDANCE_LAYER_NAME}`);
const konvaLayers = stage.find<Konva.Layer>(`.${regional_guidance_layer_NAME}`);
const blobs: Record<string, Blob> = {};
// First remove all layers

36
invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
View File

@ -14,21 +14,21 @@ import {
isMaskedGuidanceLayer,
isRenderableLayer,
LAYER_BBOX_NAME,
MASKED_GUIDANCE_LAYER_LINE_NAME,
MASKED_GUIDANCE_LAYER_NAME,
MASKED_GUIDANCE_LAYER_OBJECT_GROUP_NAME,
MASKED_GUIDANCE_LAYER_RECT_NAME,
regional_guidance_layer_LINE_NAME,
regional_guidance_layer_NAME,
regional_guidance_layer_OBJECT_GROUP_NAME,
regional_guidance_layer_RECT_NAME,
TOOL_PREVIEW_BRUSH_BORDER_INNER_ID,
TOOL_PREVIEW_BRUSH_BORDER_OUTER_ID,
TOOL_PREVIEW_BRUSH_FILL_ID,
TOOL_PREVIEW_BRUSH_GROUP_ID,
TOOL_PREVIEW_LAYER_ID,
TOOL_PREVIEW_RECT_ID,
} from 'features/controlLayers/store/regionalPromptsSlice';
} from 'features/controlLayers/store/controlLayersSlice';
import type {
ControlAdapterLayer,
Layer,
MaskedGuidanceLayer,
RegionalGuidanceLayer,
Tool,
VectorMaskLine,
VectorMaskRect,
@ -52,10 +52,10 @@ const STAGE_BG_DATAURL =
const mapId = (object: { id: string }) => object.id;
const selectRenderableLayers = (n: Konva.Node) =>
n.name() === MASKED_GUIDANCE_LAYER_NAME || n.name() === CONTROLNET_LAYER_NAME;
n.name() === regional_guidance_layer_NAME || n.name() === CONTROLNET_LAYER_NAME;
const selectVectorMaskObjects = (node: Konva.Node) => {
return node.name() === MASKED_GUIDANCE_LAYER_LINE_NAME || node.name() === MASKED_GUIDANCE_LAYER_RECT_NAME;
return node.name() === regional_guidance_layer_LINE_NAME || node.name() === regional_guidance_layer_RECT_NAME;
};
/**
@ -140,12 +140,12 @@ const renderToolPreview = (
isMouseOver: boolean,
brushSize: number
) => {
const layerCount = stage.find(`.${MASKED_GUIDANCE_LAYER_NAME}`).length;
const layerCount = stage.find(`.${regional_guidance_layer_NAME}`).length;
// Update the stage's pointer style
if (layerCount === 0) {
// We have no layers, so we should not render any tool
stage.container().style.cursor = 'default';
} else if (selectedLayerType !== 'masked_guidance_layer') {
} else if (selectedLayerType !== 'regional_guidance_layer') {
// Non-mask-guidance layers don't have tools
stage.container().style.cursor = 'not-allowed';
} else if (tool === 'move') {
@ -226,13 +226,13 @@ const renderToolPreview = (
*/
const createMaskedGuidanceLayer = (
stage: Konva.Stage,
reduxLayer: MaskedGuidanceLayer,
reduxLayer: RegionalGuidanceLayer,
onLayerPosChanged?: (layerId: string, x: number, y: number) => void
) => {
// This layer hasn't been added to the konva state yet
const konvaLayer = new Konva.Layer({
id: reduxLayer.id,
name: MASKED_GUIDANCE_LAYER_NAME,
name: regional_guidance_layer_NAME,
draggable: true,
dragDistance: 0,
});
@ -265,7 +265,7 @@ const createMaskedGuidanceLayer = (
// The object group holds all of the layer's objects (e.g. lines and rects)
const konvaObjectGroup = new Konva.Group({
id: getMaskedGuidanceLayerObjectGroupId(reduxLayer.id, uuidv4()),
name: MASKED_GUIDANCE_LAYER_OBJECT_GROUP_NAME,
name: regional_guidance_layer_OBJECT_GROUP_NAME,
listening: false,
});
konvaLayer.add(konvaObjectGroup);
@ -284,7 +284,7 @@ const createVectorMaskLine = (reduxObject: VectorMaskLine, konvaGroup: Konva.Gro
const vectorMaskLine = new Konva.Line({
id: reduxObject.id,
key: reduxObject.id,
name: MASKED_GUIDANCE_LAYER_LINE_NAME,
name: regional_guidance_layer_LINE_NAME,
strokeWidth: reduxObject.strokeWidth,
tension: 0,
lineCap: 'round',
@ -306,7 +306,7 @@ const createVectorMaskRect = (reduxObject: VectorMaskRect, konvaGroup: Konva.Gro
const vectorMaskRect = new Konva.Rect({
id: reduxObject.id,
key: reduxObject.id,
name: MASKED_GUIDANCE_LAYER_RECT_NAME,
name: regional_guidance_layer_RECT_NAME,
x: reduxObject.x,
y: reduxObject.y,
width: reduxObject.width,
@ -327,7 +327,7 @@ const createVectorMaskRect = (reduxObject: VectorMaskRect, konvaGroup: Konva.Gro
*/
const renderMaskedGuidanceLayer = (
stage: Konva.Stage,
reduxLayer: MaskedGuidanceLayer,
reduxLayer: RegionalGuidanceLayer,
globalMaskLayerOpacity: number,
tool: Tool,
onLayerPosChanged?: (layerId: string, x: number, y: number) => void
@ -345,7 +345,7 @@ const renderMaskedGuidanceLayer = (
// Convert the color to a string, stripping the alpha - the object group will handle opacity.
const rgbColor = rgbColorToString(reduxLayer.previewColor);
const konvaObjectGroup = konvaLayer.findOne<Konva.Group>(`.${MASKED_GUIDANCE_LAYER_OBJECT_GROUP_NAME}`);
const konvaObjectGroup = konvaLayer.findOne<Konva.Group>(`.${regional_guidance_layer_OBJECT_GROUP_NAME}`);
assert(konvaObjectGroup, `Object group not found for layer ${reduxLayer.id}`);
// We use caching to handle "global" layer opacity, but caching is expensive and we should only do it when required.
@ -592,7 +592,7 @@ const renderBbox = (
}
for (const reduxLayer of reduxLayers) {
if (reduxLayer.type === 'masked_guidance_layer') {
if (reduxLayer.type === 'regional_guidance_layer') {
const konvaLayer = stage.findOne<Konva.Layer>(`#${reduxLayer.id}`);
assert(konvaLayer, `Layer ${reduxLayer.id} not found in stage`);

2
invokeai/frontend/web/src/features/metadata/util/recallers.ts
View File

@ -12,7 +12,7 @@ import {
positivePrompt2Changed,
positivePromptChanged,
widthChanged,
} from 'features/controlLayers/store/regionalPromptsSlice';
} from 'features/controlLayers/store/controlLayersSlice';
import { setHrfEnabled, setHrfMethod, setHrfStrength } from 'features/hrf/store/hrfSlice';
import type { LoRA } from 'features/lora/store/loraSlice';
import { loraRecalled, lorasReset } from 'features/lora/store/loraSlice';

8
invokeai/frontend/web/src/features/nodes/util/graph/addRegionalPromptsToGraph.ts → invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
View File

@ -1,7 +1,7 @@
import { getStore } from 'app/store/nanostores/store';
import type { RootState } from 'app/store/store';
import { selectAllIPAdapters } from 'features/controlAdapters/store/controlAdaptersSlice';
import { isMaskedGuidanceLayer } from 'features/controlLayers/store/regionalPromptsSlice';
import { isMaskedGuidanceLayer } from 'features/controlLayers/store/controlLayersSlice';
import { getRegionalPromptLayerBlobs } from 'features/controlLayers/util/getLayerBlobs';
import {
IP_ADAPTER_COLLECT,
@ -20,13 +20,13 @@ import { imagesApi } from 'services/api/endpoints/images';
import type { CollectInvocation, Edge, IPAdapterInvocation, NonNullableGraph, S } from 'services/api/types';
import { assert } from 'tsafe';
export const addRegionalPromptsToGraph = async (state: RootState, graph: NonNullableGraph, denoiseNodeId: string) => {
if (!state.regionalPrompts.present.isEnabled) {
export const addControlLayersToGraph = async (state: RootState, graph: NonNullableGraph, denoiseNodeId: string) => {
if (!state.controlLayers.present.isEnabled) {
return;
}
const { dispatch } = getStore();
const isSDXL = state.generation.model?.base === 'sdxl';
const layers = state.regionalPrompts.present.layers
const layers = state.controlLayers.present.layers
// Only support vector mask layers now
// TODO: Image masks
.filter(isMaskedGuidanceLayer)

6
invokeai/frontend/web/src/features/nodes/util/graph/addControlNetToLinearGraph.ts
View File

@ -1,7 +1,7 @@
import type { RootState } from 'app/store/store';
import { selectValidControlNets } from 'features/controlAdapters/store/controlAdaptersSlice';
import type { ControlAdapterProcessorType, ControlNetConfig } from 'features/controlAdapters/store/types';
import { isControlAdapterLayer } from 'features/controlLayers/store/regionalPromptsSlice';
import { isControlAdapterLayer } from 'features/controlLayers/store/controlLayersSlice';
import type { ImageField } from 'features/nodes/types/common';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { differenceWith, intersectionWith } from 'lodash-es';
@ -36,7 +36,7 @@ const getControlNets = (state: RootState) => {
if (activeTabName === 'txt2img') {
// Add only the cnets that are used in control layers
// Collect all ControlNet ids for enabled ControlNet layers
const layerControlNetIds = state.regionalPrompts.present.layers
const layerControlNetIds = state.controlLayers.present.layers
.filter(isControlAdapterLayer)
.filter((l) => l.isEnabled)
.map((l) => l.controlNetId);
@ -44,7 +44,7 @@ const getControlNets = (state: RootState) => {
} else {
// Else, we want to exclude the cnets that are used in control layers
// Collect all ControlNet ids for all ControlNet layers
const layerControlNetIds = state.regionalPrompts.present.layers
const layerControlNetIds = state.controlLayers.present.layers
.filter(isControlAdapterLayer)
.map((l) => l.controlNetId);
return differenceWith(validControlNets, layerControlNetIds, (a, b) => a.id === b);

2
invokeai/frontend/web/src/features/nodes/util/graph/addHrfToGraph.ts
View File

@ -110,7 +110,7 @@ export const addHrfToGraph = (state: RootState, graph: NonNullableGraph): void =
const { vae, seamlessXAxis, seamlessYAxis } = state.generation;
const { hrfStrength, hrfEnabled, hrfMethod } = state.hrf;
const { width, height } = state.regionalPrompts.present.size;
const { width, height } = state.controlLayers.present.size;
const isAutoVae = !vae;
const isSeamlessEnabled = seamlessXAxis || seamlessYAxis;
const optimalDimension = selectOptimalDimension(state);

8
invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts
View File

@ -1,7 +1,7 @@
import type { RootState } from 'app/store/store';
import { selectValidIPAdapters } from 'features/controlAdapters/store/controlAdaptersSlice';
import type { IPAdapterConfig } from 'features/controlAdapters/store/types';
import { isIPAdapterLayer, isMaskedGuidanceLayer } from 'features/controlLayers/store/regionalPromptsSlice';
import { isIPAdapterLayer, isMaskedGuidanceLayer } from 'features/controlLayers/store/controlLayersSlice';
import type { ImageField } from 'features/nodes/types/common';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { differenceWith, intersectionWith } from 'lodash-es';
@ -27,7 +27,7 @@ const getIPAdapters = (state: RootState) => {
});
// Masked IP adapters are handled in the graph helper for regional control - skip them here
const maskedIPAdapterIds = state.regionalPrompts.present.layers
const maskedIPAdapterIds = state.controlLayers.present.layers
.filter(isMaskedGuidanceLayer)
.map((l) => l.ipAdapterIds)
.flat();
@ -40,7 +40,7 @@ const getIPAdapters = (state: RootState) => {
if (activeTabName === 'txt2img') {
// If we are on the t2i tab, we only want to add the IP adapters that are used in unmasked IP Adapter layers
// Collect all IP Adapter ids for enabled IP adapter layers
const layerIPAdapterIds = state.regionalPrompts.present.layers
const layerIPAdapterIds = state.controlLayers.present.layers
.filter(isIPAdapterLayer)
.filter((l) => l.isEnabled)
.map((l) => l.ipAdapterId);
@ -48,7 +48,7 @@ const getIPAdapters = (state: RootState) => {
} else {
// Else, we want to exclude the IP adapters that are used in IP Adapter layers
// Collect all IP Adapter ids for enabled IP adapter layers
const layerIPAdapterIds = state.regionalPrompts.present.layers.filter(isIPAdapterLayer).map((l) => l.ipAdapterId);
const layerIPAdapterIds = state.controlLayers.present.layers.filter(isIPAdapterLayer).map((l) => l.ipAdapterId);
return differenceWith(nonMaskedIPAdapters, layerIPAdapterIds, (a, b) => a.id === b);
}
};

6
invokeai/frontend/web/src/features/nodes/util/graph/addT2IAdapterToLinearGraph.ts
View File

@ -1,7 +1,7 @@
import type { RootState } from 'app/store/store';
import { selectValidT2IAdapters } from 'features/controlAdapters/store/controlAdaptersSlice';
import type { ControlAdapterProcessorType, T2IAdapterConfig } from 'features/controlAdapters/store/types';
import { isControlAdapterLayer } from 'features/controlLayers/store/regionalPromptsSlice';
import { isControlAdapterLayer } from 'features/controlLayers/store/controlLayersSlice';
import type { ImageField } from 'features/nodes/types/common';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { differenceWith, intersectionWith } from 'lodash-es';
@ -36,14 +36,14 @@ const getT2IAdapters = (state: RootState) => {
if (activeTabName === 'txt2img') {
// Add only the T2Is that are used in control layers
// Collect all ids for enabled control adapter layers
const layerControlAdapterIds = state.regionalPrompts.present.layers
const layerControlAdapterIds = state.controlLayers.present.layers
.filter(isControlAdapterLayer)
.filter((l) => l.isEnabled)
.map((l) => l.controlNetId);
return intersectionWith(validT2IAdapters, layerControlAdapterIds, (a, b) => a.id === b);
} else {
// Else, we want to exclude the T2Is that are used in control layers
const layerControlAdapterIds = state.regionalPrompts.present.layers
const layerControlAdapterIds = state.controlLayers.present.layers
.filter(isControlAdapterLayer)
.map((l) => l.controlNetId);
return differenceWith(validT2IAdapters, layerControlAdapterIds, (a, b) => a.id === b);

2
invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasImageToImageGraph.ts
View File

@ -55,7 +55,7 @@ export const buildCanvasImageToImageGraph = async (
seamlessXAxis,
seamlessYAxis,
} = state.generation;
const { positivePrompt, negativePrompt } = state.regionalPrompts.present;
const { positivePrompt, negativePrompt } = state.controlLayers.present;
// The bounding box determines width and height, not the width and height params
const { width, height } = state.canvas.boundingBoxDimensions;

2
invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasInpaintGraph.ts
View File

@ -64,7 +64,7 @@ export const buildCanvasInpaintGraph = async (
canvasCoherenceEdgeSize,
maskBlur,
} = state.generation;
const { positivePrompt, negativePrompt } = state.regionalPrompts.present;
const { positivePrompt, negativePrompt } = state.controlLayers.present;
if (!model) {
log.error('No model found in state');

2
invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasOutpaintGraph.ts
View File

@ -76,7 +76,7 @@ export const buildCanvasOutpaintGraph = async (
canvasCoherenceEdgeSize,
maskBlur,
} = state.generation;
const { positivePrompt, negativePrompt } = state.regionalPrompts.present;
const { positivePrompt, negativePrompt } = state.controlLayers.present;
if (!model) {
log.error('No model found in state');

2
invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLImageToImageGraph.ts
View File

@ -55,7 +55,7 @@ export const buildCanvasSDXLImageToImageGraph = async (
seamlessYAxis,
img2imgStrength: strength,
} = state.generation;
const { positivePrompt, negativePrompt } = state.regionalPrompts.present;
const { positivePrompt, negativePrompt } = state.controlLayers.present;
const { refinerModel, refinerStart } = state.sdxl;

2
invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLInpaintGraph.ts
View File

@ -64,7 +64,7 @@ export const buildCanvasSDXLInpaintGraph = async (
canvasCoherenceEdgeSize,
maskBlur,
} = state.generation;
const { positivePrompt, negativePrompt } = state.regionalPrompts.present;
const { positivePrompt, negativePrompt } = state.controlLayers.present;
const { refinerModel, refinerStart } = state.sdxl;

2
invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLOutpaintGraph.ts
View File

@ -76,7 +76,7 @@ export const buildCanvasSDXLOutpaintGraph = async (
canvasCoherenceEdgeSize,
maskBlur,
} = state.generation;
const { positivePrompt, negativePrompt } = state.regionalPrompts.present;
const { positivePrompt, negativePrompt } = state.controlLayers.present;
const { refinerModel, refinerStart } = state.sdxl;

2
invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasSDXLTextToImageGraph.ts
View File

@ -44,7 +44,7 @@ export const buildCanvasSDXLTextToImageGraph = async (state: RootState): Promise
seamlessXAxis,
seamlessYAxis,
} = state.generation;
const { positivePrompt, negativePrompt } = state.regionalPrompts.present;
const { positivePrompt, negativePrompt } = state.controlLayers.present;
// The bounding box determines width and height, not the width and height params
const { width, height } = state.canvas.boundingBoxDimensions;

2
invokeai/frontend/web/src/features/nodes/util/graph/buildCanvasTextToImageGraph.ts
View File

@ -44,7 +44,7 @@ export const buildCanvasTextToImageGraph = async (state: RootState): Promise<Non
seamlessXAxis,
seamlessYAxis,
} = state.generation;
const { positivePrompt, negativePrompt } = state.regionalPrompts.present;
const { positivePrompt, negativePrompt } = state.controlLayers.present;
// The bounding box determines width and height, not the width and height params
const { width, height } = state.canvas.boundingBoxDimensions;

2
invokeai/frontend/web/src/features/nodes/util/graph/buildLinearBatchConfig.ts
View File

@ -10,7 +10,7 @@ import { getHasMetadata, removeMetadata } from './metadata';
export const prepareLinearUIBatch = (state: RootState, graph: NonNullableGraph, prepend: boolean): BatchConfig => {
const { iterations, model, shouldRandomizeSeed, seed } = state.generation;
const { shouldConcatPrompts } = state.regionalPrompts.present;
const { shouldConcatPrompts } = state.controlLayers.present;
const { prompts, seedBehaviour } = state.dynamicPrompts;
const data: Batch['data'] = [];

4
invokeai/frontend/web/src/features/nodes/util/graph/buildLinearImageToImageGraph.ts
View File

@ -53,8 +53,8 @@ export const buildLinearImageToImageGraph = async (state: RootState): Promise<No
seamlessXAxis,
seamlessYAxis,
} = state.generation;
const { positivePrompt, negativePrompt } = state.regionalPrompts.present;
const { width, height } = state.regionalPrompts.present.size;
const { positivePrompt, negativePrompt } = state.controlLayers.present;
const { width, height } = state.controlLayers.present.size;
/**
* The easiest way to build linear graphs is to do it in the node editor, then copy and paste the

4
invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLImageToImageGraph.ts
View File

@ -53,8 +53,8 @@ export const buildLinearSDXLImageToImageGraph = async (state: RootState): Promis
seamlessYAxis,
img2imgStrength: strength,
} = state.generation;
const { positivePrompt, negativePrompt } = state.regionalPrompts.present;
const { width, height } = state.regionalPrompts.present.size;
const { positivePrompt, negativePrompt } = state.controlLayers.present;
const { width, height } = state.controlLayers.present.size;
const { refinerModel, refinerStart } = state.sdxl;

8
invokeai/frontend/web/src/features/nodes/util/graph/buildLinearSDXLTextToImageGraph.ts
View File

@ -1,7 +1,7 @@
import { logger } from 'app/logging/logger';
import type { RootState } from 'app/store/store';
import { fetchModelConfigWithTypeGuard } from 'features/metadata/util/modelFetchingHelpers';
import { addRegionalPromptsToGraph } from 'features/nodes/util/graph/addRegionalPromptsToGraph';
import { addControlLayersToGraph } from 'features/nodes/util/graph/addControlLayersToGraph';
import { isNonRefinerMainModelConfig, type NonNullableGraph } from 'services/api/types';
import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
@ -41,8 +41,8 @@ export const buildLinearSDXLTextToImageGraph = async (state: RootState): Promise
seamlessXAxis,
seamlessYAxis,
} = state.generation;
const { positivePrompt, negativePrompt } = state.regionalPrompts.present;
const { width, height } = state.regionalPrompts.present.size;
const { positivePrompt, negativePrompt } = state.controlLayers.present;
const { width, height } = state.controlLayers.present.size;
const { refinerModel, refinerStart } = state.sdxl;
@ -272,7 +272,7 @@ export const buildLinearSDXLTextToImageGraph = async (state: RootState): Promise
await addT2IAdaptersToLinearGraph(state, graph, SDXL_DENOISE_LATENTS);
await addRegionalPromptsToGraph(state, graph, SDXL_DENOISE_LATENTS);
await addControlLayersToGraph(state, graph, SDXL_DENOISE_LATENTS);
// NSFW & watermark - must be last thing added to graph
if (state.system.shouldUseNSFWChecker) {

8
invokeai/frontend/web/src/features/nodes/util/graph/buildLinearTextToImageGraph.ts
View File

@ -1,7 +1,7 @@
import { logger } from 'app/logging/logger';
import type { RootState } from 'app/store/store';
import { fetchModelConfigWithTypeGuard } from 'features/metadata/util/modelFetchingHelpers';
import { addRegionalPromptsToGraph } from 'features/nodes/util/graph/addRegionalPromptsToGraph';
import { addControlLayersToGraph } from 'features/nodes/util/graph/addControlLayersToGraph';
import { getBoardField, getIsIntermediate } from 'features/nodes/util/graph/graphBuilderUtils';
import { isNonRefinerMainModelConfig, type NonNullableGraph } from 'services/api/types';
@ -42,8 +42,8 @@ export const buildLinearTextToImageGraph = async (state: RootState): Promise<Non
seamlessYAxis,
seed,
} = state.generation;
const { positivePrompt, negativePrompt } = state.regionalPrompts.present;
const { width, height } = state.regionalPrompts.present.size;
const { positivePrompt, negativePrompt } = state.controlLayers.present;
const { width, height } = state.controlLayers.present.size;
const use_cpu = shouldUseCpuNoise;
@ -254,7 +254,7 @@ export const buildLinearTextToImageGraph = async (state: RootState): Promise<Non
await addT2IAdaptersToLinearGraph(state, graph, DENOISE_LATENTS);
await addRegionalPromptsToGraph(state, graph, DENOISE_LATENTS);
await addControlLayersToGraph(state, graph, DENOISE_LATENTS);
// High resolution fix.
if (state.hrf.hrfEnabled) {

2
invokeai/frontend/web/src/features/nodes/util/graph/graphBuilderUtils.ts
View File

@ -18,7 +18,7 @@ export const getBoardField = (state: RootState): BoardField | undefined => {
*/
export const getSDXLStylePrompts = (state: RootState): { positiveStylePrompt: string; negativeStylePrompt: string } => {
const { positivePrompt, negativePrompt, positivePrompt2, negativePrompt2, shouldConcatPrompts } =
state.regionalPrompts.present;
state.controlLayers.present;
return {
positiveStylePrompt: shouldConcatPrompts ? positivePrompt : positivePrompt2,

4
invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
View File

@ -1,6 +1,6 @@
import { Box, Textarea } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { negativePromptChanged } from 'features/controlLayers/store/regionalPromptsSlice';
import { negativePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
import { PromptPopover } from 'features/prompt/PromptPopover';
@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
export const ParamNegativePrompt = memo(() => {
const dispatch = useAppDispatch();
const prompt = useAppSelector((s) => s.regionalPrompts.present.negativePrompt);
const prompt = useAppSelector((s) => s.controlLayers.present.negativePrompt);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const { t } = useTranslation();
const _onChange = useCallback(

4
invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
View File

@ -1,6 +1,6 @@
import { Box, Textarea } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { positivePromptChanged } from 'features/controlLayers/store/regionalPromptsSlice';
import { positivePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
import { ShowDynamicPromptsPreviewButton } from 'features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
@ -14,7 +14,7 @@ import { useTranslation } from 'react-i18next';
export const ParamPositivePrompt = memo(() => {
const dispatch = useAppDispatch();
const prompt = useAppSelector((s) => s.regionalPrompts.present.positivePrompt);
const prompt = useAppSelector((s) => s.controlLayers.present.positivePrompt);
const baseModel = useAppSelector((s) => s.generation.model)?.base;
const textareaRef = useRef<HTMLTextAreaElement>(null);

8
invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
View File

@ -2,7 +2,7 @@ import { Divider, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-libr
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
import { selectRegionalPromptsSlice } from 'features/controlLayers/store/regionalPromptsSlice';
import { selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
import { memo, useMemo } from 'react';
@ -11,10 +11,10 @@ import { useEnqueueBatchMutation } from 'services/api/endpoints/queue';
import { useBoardName } from 'services/api/hooks/useBoardName';
const selectPromptsCount = createSelector(
selectRegionalPromptsSlice,
selectControlLayersSlice,
selectDynamicPromptsSlice,
(regionalPrompts, dynamicPrompts) =>
getShouldProcessPrompt(regionalPrompts.present.positivePrompt) ? dynamicPrompts.prompts.length : 1
(controlLayers, dynamicPrompts) =>
getShouldProcessPrompt(controlLayers.present.positivePrompt) ? dynamicPrompts.prompts.length : 1
);
type Props = {

4
invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
View File

@ -1,6 +1,6 @@
import { Box, Textarea } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { negativePrompt2Changed } from 'features/controlLayers/store/regionalPromptsSlice';
import { negativePrompt2Changed } from 'features/controlLayers/store/controlLayersSlice';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
import { PromptPopover } from 'features/prompt/PromptPopover';
@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next';
export const ParamSDXLNegativeStylePrompt = memo(() => {
const dispatch = useAppDispatch();
const prompt = useAppSelector((s) => s.regionalPrompts.present.negativePrompt2);
const prompt = useAppSelector((s) => s.controlLayers.present.negativePrompt2);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const { t } = useTranslation();
const handleChange = useCallback(

4
invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
View File

@ -1,6 +1,6 @@
import { Box, Textarea } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { positivePrompt2Changed } from 'features/controlLayers/store/regionalPromptsSlice';
import { positivePrompt2Changed } from 'features/controlLayers/store/controlLayersSlice';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
import { PromptPopover } from 'features/prompt/PromptPopover';
@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
export const ParamSDXLPositiveStylePrompt = memo(() => {
const dispatch = useAppDispatch();
const prompt = useAppSelector((s) => s.regionalPrompts.present.positivePrompt2);
const prompt = useAppSelector((s) => s.controlLayers.present.positivePrompt2);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const { t } = useTranslation();
const handleChange = useCallback(

4
invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx
View File

@ -1,12 +1,12 @@
import { IconButton, Tooltip } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { shouldConcatPromptsChanged } from 'features/controlLayers/store/regionalPromptsSlice';
import { shouldConcatPromptsChanged } from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiLinkSimpleBold, PiLinkSimpleBreakBold } from 'react-icons/pi';
export const SDXLConcatButton = memo(() => {
const shouldConcatPrompts = useAppSelector((s) => s.regionalPrompts.present.shouldConcatPrompts);
const shouldConcatPrompts = useAppSelector((s) => s.controlLayers.present.shouldConcatPrompts);
const dispatch = useAppDispatch();
const { t } = useTranslation();

2
invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx
View File

@ -8,7 +8,7 @@ import { ParamSDXLNegativeStylePrompt } from './ParamSDXLNegativeStylePrompt';
import { ParamSDXLPositiveStylePrompt } from './ParamSDXLPositiveStylePrompt';
export const SDXLPrompts = memo(() => {
const shouldConcatPrompts = useAppSelector((s) => s.regionalPrompts.present.shouldConcatPrompts);
const shouldConcatPrompts = useAppSelector((s) => s.controlLayers.present.shouldConcatPrompts);
return (
<Flex flexDir="column" gap={2} pos="relative">
<ParamPositivePrompt />

11
invokeai/frontend/web/src/features/settingsAccordions/components/ControlSettingsAccordion/ControlSettingsAccordion.tsx
View File

@ -13,10 +13,7 @@ import {
selectValidIPAdapters,
selectValidT2IAdapters,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectAllControlAdapterIds,
selectRegionalPromptsSlice,
} from 'features/controlLayers/store/regionalPromptsSlice';
import { selectAllControlAdapterIds, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { Fragment, memo } from 'react';
@ -24,12 +21,12 @@ import { useTranslation } from 'react-i18next';
import { PiPlusBold } from 'react-icons/pi';
const selector = createMemoizedSelector(
[selectControlAdaptersSlice, selectRegionalPromptsSlice],
(controlAdapters, regionalPrompts) => {
[selectControlAdaptersSlice, selectControlLayersSlice],
(controlAdapters, controlLayers) => {
const badges: string[] = [];
let isError = false;
const regionalControlAdapterIds = selectAllControlAdapterIds(regionalPrompts.present);
const regionalControlAdapterIds = selectAllControlAdapterIds(controlLayers.present);
const enabledNonRegionalIPAdapterCount = selectAllIPAdapters(controlAdapters)
.filter((ca) => !regionalControlAdapterIds.includes(ca.id))

8
invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
View File

@ -3,7 +3,7 @@ import { Expander, Flex, FormControlGroup, StandaloneAccordion } from '@invoke-a
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks';
import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
import { selectRegionalPromptsSlice } from 'features/controlLayers/store/regionalPromptsSlice';
import { selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
import { HrfSettings } from 'features/hrf/components/HrfSettings';
import { selectHrfSlice } from 'features/hrf/store/hrfSlice';
import ParamScaleBeforeProcessing from 'features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing';
@ -25,8 +25,8 @@ import { ImageSizeCanvas } from './ImageSizeCanvas';
import { ImageSizeLinear } from './ImageSizeLinear';
const selector = createMemoizedSelector(
[selectGenerationSlice, selectCanvasSlice, selectHrfSlice, selectRegionalPromptsSlice, activeTabNameSelector],
(generation, canvas, hrf, regionalPrompts, activeTabName) => {
[selectGenerationSlice, selectCanvasSlice, selectHrfSlice, selectControlLayersSlice, activeTabNameSelector],
(generation, canvas, hrf, controlLayers, activeTabName) => {
const { shouldRandomizeSeed, model } = generation;
const { hrfEnabled } = hrf;
const badges: string[] = [];
@ -43,7 +43,7 @@ const selector = createMemoizedSelector(
badges.push('locked');
}
} else {
const { aspectRatio, width, height } = regionalPrompts.present.size;
const { aspectRatio, width, height } = controlLayers.present.size;
badges.push(`${width}×${height}`);
badges.push(aspectRatio.id);
if (aspectRatio.isLocked) {

8
invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSizeLinear.tsx
View File

@ -1,5 +1,5 @@
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { aspectRatioChanged, heightChanged, widthChanged } from 'features/controlLayers/store/regionalPromptsSlice';
import { aspectRatioChanged, heightChanged, widthChanged } from 'features/controlLayers/store/controlLayersSlice';
import { ParamHeight } from 'features/parameters/components/Core/ParamHeight';
import { ParamWidth } from 'features/parameters/components/Core/ParamWidth';
import { AspectRatioCanvasPreview } from 'features/parameters/components/ImageSize/AspectRatioCanvasPreview';
@ -12,9 +12,9 @@ import { memo, useCallback } from 'react';
export const ImageSizeLinear = memo(() => {
const dispatch = useAppDispatch();
const tab = useAppSelector(activeTabNameSelector);
const width = useAppSelector((s) => s.regionalPrompts.present.size.width);
const height = useAppSelector((s) => s.regionalPrompts.present.size.height);
const aspectRatioState = useAppSelector((s) => s.regionalPrompts.present.size.aspectRatio);
const width = useAppSelector((s) => s.controlLayers.present.size.width);
const height = useAppSelector((s) => s.controlLayers.present.size.height);
const aspectRatioState = useAppSelector((s) => s.controlLayers.present.size.aspectRatio);
const onChangeWidth = useCallback(
(width: number) => {

4
invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
View File

@ -1,7 +1,7 @@
import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import { RegionalPromptsPanelContent } from 'features/controlLayers/components/RegionalPromptsPanelContent';
import { ControlLayersPanelContent } from 'features/controlLayers/components/ControlLayersPanelContent';
import { useRegionalControlTitle } from 'features/controlLayers/hooks/useRegionalControlTitle';
import { Prompts } from 'features/parameters/components/Prompts/Prompts';
import QueueControls from 'features/queue/components/QueueControls';
@ -55,7 +55,7 @@ const ParametersPanelTextToImage = () => {
</Flex>
</TabPanel>
<TabPanel>
<RegionalPromptsPanelContent />
<ControlLayersPanelContent />
</TabPanel>
</TabPanels>
</Tabs>

4
invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx
View File

@ -1,5 +1,5 @@
import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
import { RegionalPromptsEditor } from 'features/controlLayers/components/RegionalPromptsEditor';
import { ControlLayersEditor } from 'features/controlLayers/components/ControlLayersEditor';
import { useRegionalControlTitle } from 'features/controlLayers/hooks/useRegionalControlTitle';
import CurrentImageDisplay from 'features/gallery/components/CurrentImage/CurrentImageDisplay';
import { memo } from 'react';
@ -22,7 +22,7 @@ const TextToImageTab = () => {
<CurrentImageDisplay />
</TabPanel>
<TabPanel>
<RegionalPromptsEditor />
<ControlLayersEditor />
</TabPanel>
</TabPanels>
</Tabs>