refactor(ui): move positive2 and negative2 prompt to regional

invokeai/frontend/web/src/features/metadata/util/recallers.ts

@@ -49,11 +49,14 @@ import type {
   ParameterVAEModel,
   ParameterWidth,
 } from 'features/parameters/types/parameterSchemas';
-import { negativePromptChanged, positivePromptChanged } from 'features/regionalPrompts/store/regionalPromptsSlice';
+import {
+  negativePrompt2Changed,
+  negativePromptChanged,
+  positivePrompt2Changed,
+  positivePromptChanged,
+} from 'features/regionalPrompts/store/regionalPromptsSlice';
 import {
   refinerModelChanged,
-  setNegativeStylePromptSDXL,
-  setPositiveStylePromptSDXL,
   setRefinerCFGScale,
   setRefinerNegativeAestheticScore,
   setRefinerPositiveAestheticScore,
@@ -72,11 +75,11 @@ const recallNegativePrompt: MetadataRecallFunc<ParameterNegativePrompt> = (negat
 };
 
 const recallSDXLPositiveStylePrompt: MetadataRecallFunc<ParameterPositiveStylePromptSDXL> = (positiveStylePrompt) => {
-  getStore().dispatch(setPositiveStylePromptSDXL(positiveStylePrompt));
+  getStore().dispatch(positivePrompt2Changed(positiveStylePrompt));
 };
 
 const recallSDXLNegativeStylePrompt: MetadataRecallFunc<ParameterNegativeStylePromptSDXL> = (negativeStylePrompt) => {
-  getStore().dispatch(setNegativeStylePromptSDXL(negativeStylePrompt));
+  getStore().dispatch(negativePrompt2Changed(negativeStylePrompt));
 };
 
 const recallSeed: MetadataRecallFunc<ParameterSeed> = (seed) => {

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

@@ -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 { shouldConcatSDXLStylePrompt } = state.sdxl;
+  const { shouldConcatPrompts } = state.regionalPrompts.present.baseLayer;
   const { prompts, seedBehaviour } = state.dynamicPrompts;
 
   const data: Batch['data'] = [];
@@ -105,7 +105,7 @@ export const prepareLinearUIBatch = (state: RootState, graph: NonNullableGraph,
     });
   }
 
-  if (shouldConcatSDXLStylePrompt && model?.base === 'sdxl') {
+  if (shouldConcatPrompts && model?.base === 'sdxl') {
     if (graph.nodes[POSITIVE_CONDITIONING]) {
       firstBatchDatumList.push({
         node_path: POSITIVE_CONDITIONING,

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

@@ -17,12 +17,12 @@ export const getBoardField = (state: RootState): BoardField | undefined => {
  * Gets the SDXL style prompts, based on the concat setting.
  */
 export const getSDXLStylePrompts = (state: RootState): { positiveStylePrompt: string; negativeStylePrompt: string } => {
-  const { positivePrompt, negativePrompt } = state.regionalPrompts.present.baseLayer;
+  const { positivePrompt, negativePrompt, positivePrompt2, negativePrompt2, shouldConcatPrompts } =
-  const { positiveStylePrompt, negativeStylePrompt, shouldConcatSDXLStylePrompt } = state.sdxl;
+    state.regionalPrompts.present.baseLayer;
 
   return {
-    positiveStylePrompt: shouldConcatSDXLStylePrompt ? positivePrompt : positiveStylePrompt,
+    positiveStylePrompt: shouldConcatPrompts ? positivePrompt : positivePrompt2,
-    negativeStylePrompt: shouldConcatSDXLStylePrompt ? negativePrompt : negativeStylePrompt,
+    negativeStylePrompt: shouldConcatPrompts ? negativePrompt : negativePrompt2,
   };
 };
 

invokeai/frontend/web/src/features/regionalPrompts/store/regionalPromptsSlice.ts

@@ -7,7 +7,9 @@ import type { ControlAdapterConfig } from 'features/controlAdapters/store/types'
 import type {
   ParameterAutoNegative,
   ParameterNegativePrompt,
+  ParameterNegativeStylePromptSDXL,
   ParameterPositivePrompt,
+  ParameterPositiveStylePromptSDXL,
 } from 'features/parameters/types/parameterSchemas';
 import type { IRect, Vector2d } from 'konva/lib/types';
 import { isEqual } from 'lodash-es';
@@ -71,6 +73,9 @@ export type Layer = VectorMaskLayer | ControlLayer;
 type BaseLayerState = {
   positivePrompt: ParameterPositivePrompt;
   negativePrompt: ParameterNegativePrompt;
+  positivePrompt2: ParameterPositiveStylePromptSDXL;
+  negativePrompt2: ParameterNegativeStylePromptSDXL;
+  shouldConcatPrompts: boolean;
 };
 
 type RegionalPromptsState = {
@@ -93,6 +98,9 @@ export const initialRegionalPromptsState: RegionalPromptsState = {
   baseLayer: {
     positivePrompt: '',
     negativePrompt: '',
+    positivePrompt2: '',
+    negativePrompt2: '',
+    shouldConcatPrompts: true,
   },
 };
 
@@ -347,6 +355,15 @@ export const regionalPromptsSlice = createSlice({
     negativePromptChanged: (state, action: PayloadAction<string>) => {
       state.baseLayer.negativePrompt = action.payload;
     },
+    positivePrompt2Changed: (state, action: PayloadAction<string>) => {
+      state.baseLayer.positivePrompt2 = action.payload;
+    },
+    negativePrompt2Changed: (state, action: PayloadAction<string>) => {
+      state.baseLayer.negativePrompt2 = action.payload;
+    },
+    shouldConcatPromptsChanged: (state, action: PayloadAction<boolean>) => {
+      state.baseLayer.shouldConcatPrompts = action.payload;
+    },
     //#endregion
 
     //#region General
@@ -441,6 +458,9 @@ export const {
   // Base layer actions
   positivePromptChanged,
   negativePromptChanged,
+  positivePrompt2Changed,
+  negativePrompt2Changed,
+  shouldConcatPromptsChanged,
   // General actions
   brushSizeChanged,
   globalMaskLayerOpacityChanged,

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

@@ -4,19 +4,19 @@ import { PromptOverlayButtonWrapper } from 'features/parameters/components/Promp
 import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
 import { PromptPopover } from 'features/prompt/PromptPopover';
 import { usePrompt } from 'features/prompt/usePrompt';
-import { setNegativeStylePromptSDXL } from 'features/sdxl/store/sdxlSlice';
+import { negativePrompt2Changed } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { memo, useCallback, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
 export const ParamSDXLNegativeStylePrompt = memo(() => {
   const dispatch = useAppDispatch();
-  const prompt = useAppSelector((s) => s.sdxl.negativeStylePrompt);
+  const prompt = useAppSelector((s) => s.regionalPrompts.present.baseLayer.negativePrompt2);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { t } = useTranslation();
   const handleChange = useCallback(
     (v: string) => {
-      dispatch(setNegativeStylePromptSDXL(v));
+      dispatch(negativePrompt2Changed(v));
     },
     [dispatch]
   );

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

@@ -4,18 +4,18 @@ import { PromptOverlayButtonWrapper } from 'features/parameters/components/Promp
 import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
 import { PromptPopover } from 'features/prompt/PromptPopover';
 import { usePrompt } from 'features/prompt/usePrompt';
-import { setPositiveStylePromptSDXL } from 'features/sdxl/store/sdxlSlice';
+import { positivePrompt2Changed } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const ParamSDXLPositiveStylePrompt = memo(() => {
   const dispatch = useAppDispatch();
-  const prompt = useAppSelector((s) => s.sdxl.positiveStylePrompt);
+  const prompt = useAppSelector((s) => s.regionalPrompts.present.baseLayer.positivePrompt2);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { t } = useTranslation();
   const handleChange = useCallback(
     (v: string) => {
-      dispatch(setPositiveStylePromptSDXL(v));
+      dispatch(positivePrompt2Changed(v));
     },
     [dispatch]
   );

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

@@ -1,23 +1,23 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { setShouldConcatSDXLStylePrompt } from 'features/sdxl/store/sdxlSlice';
+import { shouldConcatPromptsChanged } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiLinkSimpleBold, PiLinkSimpleBreakBold } from 'react-icons/pi';
 
 export const SDXLConcatButton = memo(() => {
-  const shouldConcatSDXLStylePrompt = useAppSelector((s) => s.sdxl.shouldConcatSDXLStylePrompt);
+  const shouldConcatPrompts = useAppSelector((s) => s.regionalPrompts.present.baseLayer.shouldConcatPrompts);
 
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
   const handleShouldConcatPromptChange = useCallback(() => {
-    dispatch(setShouldConcatSDXLStylePrompt(!shouldConcatSDXLStylePrompt));
+    dispatch(shouldConcatPromptsChanged(!shouldConcatPrompts));
-  }, [dispatch, shouldConcatSDXLStylePrompt]);
+  }, [dispatch, shouldConcatPrompts]);
 
   const label = useMemo(
-    () => (shouldConcatSDXLStylePrompt ? t('sdxl.concatPromptStyle') : t('sdxl.freePromptStyle')),
+    () => (shouldConcatPrompts ? t('sdxl.concatPromptStyle') : t('sdxl.freePromptStyle')),
-    [shouldConcatSDXLStylePrompt, t]
+    [shouldConcatPrompts, t]
   );
 
   return (
@@ -25,7 +25,7 @@ export const SDXLConcatButton = memo(() => {
       <IconButton
         aria-label={label}
         onClick={handleShouldConcatPromptChange}
-        icon={shouldConcatSDXLStylePrompt ? <PiLinkSimpleBold size={14} /> : <PiLinkSimpleBreakBold size={14} />}
+        icon={shouldConcatPrompts ? <PiLinkSimpleBold size={14} /> : <PiLinkSimpleBreakBold size={14} />}
         variant="promptOverlay"
         fontSize={12}
         px={0.5}

invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLPrompts.tsx

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

invokeai/frontend/web/src/features/sdxl/store/sdxlSlice.ts

@@ -1,18 +1,10 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
-import type {
+import type { ParameterScheduler, ParameterSDXLRefinerModel } from 'features/parameters/types/parameterSchemas';
-  ParameterNegativeStylePromptSDXL,
-  ParameterPositiveStylePromptSDXL,
-  ParameterScheduler,
-  ParameterSDXLRefinerModel,
-} from 'features/parameters/types/parameterSchemas';
 
 type SDXLState = {
   _version: 2;
-  positiveStylePrompt: ParameterPositiveStylePromptSDXL;
-  negativeStylePrompt: ParameterNegativeStylePromptSDXL;
-  shouldConcatSDXLStylePrompt: boolean;
   refinerModel: ParameterSDXLRefinerModel | null;
   refinerSteps: number;
   refinerCFGScale: number;
@@ -24,9 +16,6 @@ type SDXLState = {
 
 const initialSDXLState: SDXLState = {
   _version: 2,
-  positiveStylePrompt: '',
-  negativeStylePrompt: '',
-  shouldConcatSDXLStylePrompt: true,
   refinerModel: null,
   refinerSteps: 20,
   refinerCFGScale: 7.5,
@@ -40,15 +29,6 @@ export const sdxlSlice = createSlice({
   name: 'sdxl',
   initialState: initialSDXLState,
   reducers: {
-    setPositiveStylePromptSDXL: (state, action: PayloadAction<string>) => {
-      state.positiveStylePrompt = action.payload;
-    },
-    setNegativeStylePromptSDXL: (state, action: PayloadAction<string>) => {
-      state.negativeStylePrompt = action.payload;
-    },
-    setShouldConcatSDXLStylePrompt: (state, action: PayloadAction<boolean>) => {
-      state.shouldConcatSDXLStylePrompt = action.payload;
-    },
     refinerModelChanged: (state, action: PayloadAction<ParameterSDXLRefinerModel | null>) => {
       state.refinerModel = action.payload;
     },
@@ -74,9 +54,6 @@ export const sdxlSlice = createSlice({
 });
 
 export const {
-  setPositiveStylePromptSDXL,
-  setNegativeStylePromptSDXL,
-  setShouldConcatSDXLStylePrompt,
   refinerModelChanged,
   setRefinerSteps,
   setRefinerCFGScale,