ui: Color Infill UI

invokeai/frontend/web/public/locales/en.json

@@ -891,6 +891,7 @@
         "infillMosaicTileHeight": "Tile Height",
         "infillMosaicMinColor": "Min Color",
         "infillMosaicMaxColor": "Max Color",
+        "infillColorValue": "Fill Color",
         "info": "Info",
         "invoke": {
             "addingImagesTo": "Adding images to",

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

@@ -69,6 +69,7 @@ export const buildCanvasOutpaintGraph = async (
     infillMosaicTileHeight,
     infillMosaicMinColor,
     infillMosaicMaxColor,
+    infillColorValue,
     clipSkip,
     seamlessXAxis,
     seamlessYAxis,
@@ -376,6 +377,7 @@ export const buildCanvasOutpaintGraph = async (
     graph.nodes[INPAINT_INFILL] = {
       type: 'infill_rgba',
       id: INPAINT_INFILL,
+      color: infillColorValue,
       is_intermediate,
     };
   }

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

@@ -70,6 +70,7 @@ export const buildCanvasSDXLOutpaintGraph = async (
     infillMosaicTileHeight,
     infillMosaicMinColor,
     infillMosaicMaxColor,
+    infillColorValue,
     seamlessXAxis,
     seamlessYAxis,
     canvasCoherenceMode,
@@ -386,6 +387,7 @@ export const buildCanvasSDXLOutpaintGraph = async (
       type: 'infill_rgba',
       id: INPAINT_INFILL,
       is_intermediate,
+      color: infillColorValue,
     };
   }
 

invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillColorOptions.tsx

@@ -0,0 +1,46 @@
+import { Box, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIColorPicker from 'common/components/IAIColorPicker';
+import { selectGenerationSlice, setInfillColorValue } from 'features/parameters/store/generationSlice';
+import { memo, useCallback, useMemo } from 'react';
+import type { RgbaColor } from 'react-colorful';
+import { useTranslation } from 'react-i18next';
+
+const ParamInfillColorOptions = () => {
+  const dispatch = useAppDispatch();
+
+  const selector = useMemo(
+    () =>
+      createSelector(selectGenerationSlice, (generation) => ({
+        infillColor: generation.infillColorValue,
+      })),
+    []
+  );
+
+  const { infillColor } = useAppSelector(selector);
+
+  const infillMethod = useAppSelector((s) => s.generation.infillMethod);
+
+  const { t } = useTranslation();
+
+  const handleInfillColor = useCallback(
+    (v: RgbaColor) => {
+      dispatch(setInfillColorValue(v));
+    },
+    [dispatch]
+  );
+
+  return (
+    <Flex flexDir="column" gap={4}>
+      <FormControl isDisabled={infillMethod !== 'color'}>
+        <FormLabel>{t('parameters.infillColorValue')}</FormLabel>
+        <Box w="full" pt={2} pb={2}>
+          <IAIColorPicker color={infillColor} onChange={handleInfillColor} />
+        </Box>
+      </FormControl>
+    </Flex>
+  );
+};
+
+export default memo(ParamInfillColorOptions);

invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMosaicOptions.tsx

@@ -13,7 +13,7 @@ import { memo, useCallback, useMemo } from 'react';
 import type { RgbaColor } from 'react-colorful';
 import { useTranslation } from 'react-i18next';
 
-const ParamMosaicInfillTileSize = () => {
+const ParamInfillMosaicTileSize = () => {
   const dispatch = useAppDispatch();
 
   const selector = useMemo(
@@ -124,4 +124,4 @@ const ParamMosaicInfillTileSize = () => {
   );
 };
 
-export default memo(ParamMosaicInfillTileSize);
+export default memo(ParamInfillMosaicTileSize);

invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillOptions.tsx

@@ -1,9 +1,10 @@
 import { useAppSelector } from 'app/store/storeHooks';
 import { memo } from 'react';
 
+import ParamInfillColorOptions from './ParamInfillColorOptions';
+import ParamInfillMosaicOptions from './ParamInfillMosaicOptions';
 import ParamInfillPatchmatchDownscaleSize from './ParamInfillPatchmatchDownscaleSize';
 import ParamInfillTilesize from './ParamInfillTilesize';
-import ParamMosaicInfillOptions from './ParamMosaicInfillOptions';
 
 const ParamInfillOptions = () => {
   const infillMethod = useAppSelector((s) => s.generation.infillMethod);
@@ -16,7 +17,11 @@ const ParamInfillOptions = () => {
   }
 
   if (infillMethod === 'mosaic') {
-    return <ParamMosaicInfillOptions />;
+    return <ParamInfillMosaicOptions />;
+  }
+
+  if (infillMethod === 'color') {
+    return <ParamInfillColorOptions />;
   }
 
   return null;

invokeai/frontend/web/src/features/parameters/store/generationSlice.ts

@@ -44,8 +44,6 @@ const initialGenerationState: GenerationState = {
   shouldFitToWidthHeight: true,
   shouldRandomizeSeed: true,
   steps: 50,
-  infillTileSize: 32,
-  infillPatchmatchDownscaleSize: 1,
   width: 512,
   model: null,
   vae: null,
@@ -56,10 +54,13 @@ const initialGenerationState: GenerationState = {
   shouldUseCpuNoise: true,
   shouldShowAdvancedOptions: false,
   aspectRatio: { ...initialAspectRatioState },
+  infillTileSize: 32,
+  infillPatchmatchDownscaleSize: 1,
   infillMosaicTileWidth: 64,
   infillMosaicTileHeight: 64,
   infillMosaicMinColor: { r: 0, g: 0, b: 0, a: 1 },
   infillMosaicMaxColor: { r: 255, g: 255, b: 255, a: 1 },
+  infillColorValue: { r: 0, g: 0, b: 0, a: 1 },
 };
 
 export const generationSlice = createSlice({
@@ -121,15 +122,6 @@ export const generationSlice = createSlice({
     setCanvasCoherenceMinDenoise: (state, action: PayloadAction<number>) => {
       state.canvasCoherenceMinDenoise = action.payload;
     },
-    setInfillMethod: (state, action: PayloadAction<string>) => {
-      state.infillMethod = action.payload;
-    },
-    setInfillTileSize: (state, action: PayloadAction<number>) => {
-      state.infillTileSize = action.payload;
-    },
-    setInfillPatchmatchDownscaleSize: (state, action: PayloadAction<number>) => {
-      state.infillPatchmatchDownscaleSize = action.payload;
-    },
     initialImageChanged: (state, action: PayloadAction<ImageDTO>) => {
       const { image_name, width, height } = action.payload;
       state.initialImage = { imageName: image_name, width, height };
@@ -211,6 +203,15 @@ export const generationSlice = createSlice({
     aspectRatioChanged: (state, action: PayloadAction<AspectRatioState>) => {
       state.aspectRatio = action.payload;
     },
+    setInfillMethod: (state, action: PayloadAction<string>) => {
+      state.infillMethod = action.payload;
+    },
+    setInfillTileSize: (state, action: PayloadAction<number>) => {
+      state.infillTileSize = action.payload;
+    },
+    setInfillPatchmatchDownscaleSize: (state, action: PayloadAction<number>) => {
+      state.infillPatchmatchDownscaleSize = action.payload;
+    },
     setInfillMosaicTileWidth: (state, action: PayloadAction<number>) => {
       state.infillMosaicTileWidth = action.payload;
     },
@@ -223,6 +224,9 @@ export const generationSlice = createSlice({
     setInfillMosaicMaxColor: (state, action: PayloadAction<RgbaColor>) => {
       state.infillMosaicMaxColor = action.payload;
     },
+    setInfillColorValue: (state, action: PayloadAction<RgbaColor>) => {
+      state.infillColorValue = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(configChanged, (state, action) => {
@@ -266,8 +270,6 @@ export const {
   setShouldFitToWidthHeight,
   setShouldRandomizeSeed,
   setSteps,
-  setInfillTileSize,
-  setInfillPatchmatchDownscaleSize,
   initialImageChanged,
   modelChanged,
   vaeSelected,
@@ -281,10 +283,13 @@ export const {
   heightChanged,
   widthRecalled,
   heightRecalled,
+  setInfillTileSize,
+  setInfillPatchmatchDownscaleSize,
   setInfillMosaicTileWidth,
   setInfillMosaicTileHeight,
   setInfillMosaicMinColor,
   setInfillMosaicMaxColor,
+  setInfillColorValue,
 } = generationSlice.actions;
 
 export const { selectOptimalDimension } = generationSlice.selectors;

invokeai/frontend/web/src/features/parameters/store/types.ts

@@ -40,8 +40,6 @@ export interface GenerationState {
   shouldFitToWidthHeight: boolean;
   shouldRandomizeSeed: boolean;
   steps: ParameterSteps;
-  infillTileSize: number;
-  infillPatchmatchDownscaleSize: number;
   width: ParameterWidth;
   model: ParameterModel | null;
   vae: ParameterVAEModel | null;
@@ -52,10 +50,13 @@ export interface GenerationState {
   shouldUseCpuNoise: boolean;
   shouldShowAdvancedOptions: boolean;
   aspectRatio: AspectRatioState;
+  infillTileSize: number;
+  infillPatchmatchDownscaleSize: number;
   infillMosaicTileWidth: number;
   infillMosaicTileHeight: number;
   infillMosaicMinColor: RgbaColor;
   infillMosaicMaxColor: RgbaColor;
+  infillColorValue: RgbaColor;
 }
 
 export type PayloadActionWithOptimalDimension<T = void> = PayloadAction<T, string, { optimalDimension: number }>;