ui: intial mosaic infill ui

Need to change color picking.

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

@@ -887,6 +887,10 @@
         "imageFit": "Fit Initial Image To Output Size",
         "images": "Images",
         "infillMethod": "Infill Method",
+        "infillMosaicTileWidth": "Tile Width",
+        "infillMosaicTileHeight": "Tile Height",
+        "infillMosaicMinColor": "Min Color",
+        "infillMosaicMaxColor": "Max Color",
         "info": "Info",
         "invoke": {
             "addingImagesTo": "Adding images to",

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

@@ -65,6 +65,10 @@ export const buildCanvasOutpaintGraph = async (
     infillTileSize,
     infillPatchmatchDownscaleSize,
     infillMethod,
+    infillMosaicTileWidth,
+    infillMosaicTileHeight,
+    infillMosaicMinColor,
+    infillMosaicMaxColor,
     clipSkip,
     seamlessXAxis,
     seamlessYAxis,
@@ -361,6 +365,10 @@ export const buildCanvasOutpaintGraph = async (
       type: 'infill_mosaic',
       id: INPAINT_INFILL,
       is_intermediate,
+      tile_width: infillMosaicTileWidth,
+      tile_height: infillMosaicTileHeight,
+      min_color: infillMosaicMinColor,
+      max_color: infillMosaicMaxColor,
     };
   }
 

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

@@ -66,6 +66,10 @@ export const buildCanvasSDXLOutpaintGraph = async (
     infillTileSize,
     infillPatchmatchDownscaleSize,
     infillMethod,
+    infillMosaicTileWidth,
+    infillMosaicTileHeight,
+    infillMosaicMinColor,
+    infillMosaicMaxColor,
     seamlessXAxis,
     seamlessYAxis,
     canvasCoherenceMode,
@@ -370,6 +374,10 @@ export const buildCanvasSDXLOutpaintGraph = async (
       type: 'infill_mosaic',
       id: INPAINT_INFILL,
       is_intermediate,
+      tile_width: infillMosaicTileWidth,
+      tile_height: infillMosaicTileHeight,
+      min_color: infillMosaicMinColor,
+      max_color: infillMosaicMaxColor,
     };
   }
 

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

@@ -3,6 +3,7 @@ import { memo } from 'react';
 
 import ParamInfillPatchmatchDownscaleSize from './ParamInfillPatchmatchDownscaleSize';
 import ParamInfillTilesize from './ParamInfillTilesize';
+import ParamMosaicInfillOptions from './ParamMosaicInfillOptions';
 
 const ParamInfillOptions = () => {
   const infillMethod = useAppSelector((s) => s.generation.infillMethod);
@@ -14,6 +15,10 @@ const ParamInfillOptions = () => {
     return <ParamInfillPatchmatchDownscaleSize />;
   }
 
+  if (infillMethod === 'mosaic') {
+    return <ParamMosaicInfillOptions />;
+  }
+
   return null;
 };
 

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

@@ -0,0 +1,127 @@
+import { Box, CompositeNumberInput, CompositeSlider, 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,
+  setInfillMosaicMaxColor,
+  setInfillMosaicMinColor,
+  setInfillMosaicTileHeight,
+  setInfillMosaicTileWidth,
+} from 'features/parameters/store/generationSlice';
+import { memo, useCallback, useMemo } from 'react';
+import type { RgbaColor } from 'react-colorful';
+import { useTranslation } from 'react-i18next';
+
+const ParamMosaicInfillTileSize = () => {
+  const dispatch = useAppDispatch();
+
+  const selector = useMemo(
+    () =>
+      createSelector(selectGenerationSlice, (generation) => ({
+        infillMosaicTileWidth: generation.infillMosaicTileWidth,
+        infillMosaicTileHeight: generation.infillMosaicTileHeight,
+        infillMosaicMinColor: generation.infillMosaicMinColor,
+        infillMosaicMaxColor: generation.infillMosaicMaxColor,
+      })),
+    []
+  );
+
+  const { infillMosaicTileWidth, infillMosaicTileHeight, infillMosaicMinColor, infillMosaicMaxColor } =
+    useAppSelector(selector);
+
+  const infillMethod = useAppSelector((s) => s.generation.infillMethod);
+
+  const { t } = useTranslation();
+
+  const handleInfillMosaicTileWidthChange = useCallback(
+    (v: number) => {
+      dispatch(setInfillMosaicTileWidth(v));
+    },
+    [dispatch]
+  );
+
+  const handleInfillMosaicTileHeightChange = useCallback(
+    (v: number) => {
+      dispatch(setInfillMosaicTileHeight(v));
+    },
+    [dispatch]
+  );
+
+  const handleInfillMosaicMinColor = useCallback(
+    (v: RgbaColor) => {
+      dispatch(setInfillMosaicMinColor(v));
+    },
+    [dispatch]
+  );
+
+  const handleInfillMosaicMaxColor = useCallback(
+    (v: RgbaColor) => {
+      dispatch(setInfillMosaicMaxColor(v));
+    },
+    [dispatch]
+  );
+
+  return (
+    <Flex flexDir="column" gap={4}>
+      <FormControl isDisabled={infillMethod !== 'mosaic'}>
+        <FormLabel>{t('parameters.infillMosaicTileWidth')}</FormLabel>
+        <CompositeSlider
+          min={8}
+          max={256}
+          value={infillMosaicTileWidth}
+          defaultValue={64}
+          onChange={handleInfillMosaicTileWidthChange}
+          step={8}
+          fineStep={8}
+          marks
+        />
+        <CompositeNumberInput
+          min={8}
+          max={1024}
+          value={infillMosaicTileWidth}
+          defaultValue={64}
+          onChange={handleInfillMosaicTileWidthChange}
+          step={8}
+          fineStep={8}
+        />
+      </FormControl>
+      <FormControl isDisabled={infillMethod !== 'mosaic'}>
+        <FormLabel>{t('parameters.infillMosaicTileHeight')}</FormLabel>
+        <CompositeSlider
+          min={8}
+          max={256}
+          value={infillMosaicTileHeight}
+          defaultValue={64}
+          onChange={handleInfillMosaicTileHeightChange}
+          step={8}
+          fineStep={8}
+          marks
+        />
+        <CompositeNumberInput
+          min={8}
+          max={1024}
+          value={infillMosaicTileHeight}
+          defaultValue={64}
+          onChange={handleInfillMosaicTileHeightChange}
+          step={8}
+          fineStep={8}
+        />
+      </FormControl>
+      <FormControl isDisabled={infillMethod !== 'mosaic'}>
+        <FormLabel>{t('parameters.infillMosaicMinColor')}</FormLabel>
+        <Box w="full" pt={2} pb={2}>
+          <IAIColorPicker color={infillMosaicMinColor} onChange={handleInfillMosaicMinColor} />
+        </Box>
+      </FormControl>
+      <FormControl isDisabled={infillMethod !== 'mosaic'}>
+        <FormLabel>{t('parameters.infillMosaicMaxColor')}</FormLabel>
+        <Box w="full" pt={2} pb={2}>
+          <IAIColorPicker color={infillMosaicMaxColor} onChange={handleInfillMosaicMaxColor} />
+        </Box>
+      </FormControl>
+    </Flex>
+  );
+};
+
+export default memo(ParamMosaicInfillTileSize);

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

@@ -19,6 +19,7 @@ import type {
 import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension';
 import { configChanged } from 'features/system/store/configSlice';
 import { clamp } from 'lodash-es';
+import type { RgbaColor } from 'react-colorful';
 import type { ImageDTO } from 'services/api/types';
 
 import type { GenerationState } from './types';
@@ -55,6 +56,10 @@ const initialGenerationState: GenerationState = {
   shouldUseCpuNoise: true,
   shouldShowAdvancedOptions: false,
   aspectRatio: { ...initialAspectRatioState },
+  infillMosaicTileWidth: 64,
+  infillMosaicTileHeight: 64,
+  infillMosaicMinColor: { r: 0, g: 0, b: 0, a: 1 },
+  infillMosaicMaxColor: { r: 255, g: 255, b: 255, a: 1 },
 };
 
 export const generationSlice = createSlice({
@@ -206,6 +211,18 @@ export const generationSlice = createSlice({
     aspectRatioChanged: (state, action: PayloadAction<AspectRatioState>) => {
       state.aspectRatio = action.payload;
     },
+    setInfillMosaicTileWidth: (state, action: PayloadAction<number>) => {
+      state.infillMosaicTileWidth = action.payload;
+    },
+    setInfillMosaicTileHeight: (state, action: PayloadAction<number>) => {
+      state.infillMosaicTileHeight = action.payload;
+    },
+    setInfillMosaicMinColor: (state, action: PayloadAction<RgbaColor>) => {
+      state.infillMosaicMinColor = action.payload;
+    },
+    setInfillMosaicMaxColor: (state, action: PayloadAction<RgbaColor>) => {
+      state.infillMosaicMaxColor = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(configChanged, (state, action) => {
@@ -264,6 +281,10 @@ export const {
   heightChanged,
   widthRecalled,
   heightRecalled,
+  setInfillMosaicTileWidth,
+  setInfillMosaicTileHeight,
+  setInfillMosaicMinColor,
+  setInfillMosaicMaxColor,
 } = generationSlice.actions;
 
 export const { selectOptimalDimension } = generationSlice.selectors;

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

@@ -17,6 +17,7 @@ import type {
   ParameterVAEModel,
   ParameterWidth,
 } from 'features/parameters/types/parameterSchemas';
+import type { RgbaColor } from 'react-colorful';
 
 export interface GenerationState {
   _version: 2;
@@ -51,6 +52,10 @@ export interface GenerationState {
   shouldUseCpuNoise: boolean;
   shouldShowAdvancedOptions: boolean;
   aspectRatio: AspectRatioState;
+  infillMosaicTileWidth: number;
+  infillMosaicTileHeight: number;
+  infillMosaicMinColor: RgbaColor;
+  infillMosaicMaxColor: RgbaColor;
 }
 
 export type PayloadActionWithOptimalDimension<T = void> = PayloadAction<T, string, { optimalDimension: number }>;