From e98d7a52d49deca19bc852dcdfc14d34f72bb062 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 16 Aug 2023 17:25:55 +1200 Subject: [PATCH] feat: Add Seam Painting Options --- invokeai/frontend/web/public/locales/en.json | 6 +- .../Canvas/SeamPainting/ParamSeamBlur.tsx | 36 ++++++ .../ParamSeamPaintingCollapse.tsx | 27 ++++ .../Canvas/SeamPainting/ParamSeamSize.tsx | 36 ++++++ .../Canvas/SeamPainting/ParamSeamSteps.tsx | 36 ++++++ .../Canvas/SeamPainting/ParamSeamStrength.tsx | 36 ++++++ .../SeamPainting/ParamSeamThreshold.tsx | 121 ++++++++++++++++++ .../parameters/store/generationSlice.ts | 36 ++++++ .../SDXLUnifiedCanvasTabParameters.tsx | 2 + .../UnifiedCanvas/UnifiedCanvasParameters.tsx | 2 + 10 files changed, 337 insertions(+), 1 deletion(-) create mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamBlur.tsx create mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse.tsx create mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamSize.tsx create mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamSteps.tsx create mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamStrength.tsx create mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamThreshold.tsx diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index fbae5b4a30..f41da82e07 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -506,10 +506,14 @@ "maskAdjustmentsHeader": "Mask Adjustments", "maskBlur": "Mask Blur", "maskBlurMethod": "Mask Blur Method", + "seamPaintingHeader": "Seam Painting", "seamSize": "Seam Size", "seamBlur": "Seam Blur", - "seamStrength": "Seam Strength", "seamSteps": "Seam Steps", + "seamStrength": "Seam Strength", + "seamThreshold": "Seam Threshold", + "seamLowThreshold": "Low", + "seamHighThreshold": "High", "scaleBeforeProcessing": "Scale Before Processing", "scaledWidth": "Scaled W", "scaledHeight": "Scaled H", diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamBlur.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamBlur.tsx new file mode 100644 index 0000000000..2ab048ce72 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamBlur.tsx @@ -0,0 +1,36 @@ +import type { RootState } from 'app/store/store'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import IAISlider from 'common/components/IAISlider'; +import { setSeamBlur } from 'features/parameters/store/generationSlice'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +const ParamSeamBlur = () => { + const dispatch = useAppDispatch(); + const seamBlur = useAppSelector( + (state: RootState) => state.generation.seamBlur + ); + const { t } = useTranslation(); + + return ( + { + dispatch(setSeamBlur(v)); + }} + withInput + withSliderMarks + withReset + handleReset={() => { + dispatch(setSeamBlur(8)); + }} + /> + ); +}; + +export default memo(ParamSeamBlur); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse.tsx new file mode 100644 index 0000000000..23e06797e5 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse.tsx @@ -0,0 +1,27 @@ +import { Flex } from '@chakra-ui/react'; +import IAICollapse from 'common/components/IAICollapse'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; +import ParamSeamBlur from './ParamSeamBlur'; +import ParamSeamSize from './ParamSeamSize'; +import ParamSeamSteps from './ParamSeamSteps'; +import ParamSeamStrength from './ParamSeamStrength'; +import ParamSeamThreshold from './ParamSeamThreshold'; + +const ParamSeamPaintingCollapse = () => { + const { t } = useTranslation(); + + return ( + + + + + + + + + + ); +}; + +export default memo(ParamSeamPaintingCollapse); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamSize.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamSize.tsx new file mode 100644 index 0000000000..841e9555fd --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamSize.tsx @@ -0,0 +1,36 @@ +import type { RootState } from 'app/store/store'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import IAISlider from 'common/components/IAISlider'; +import { setSeamSize } from 'features/parameters/store/generationSlice'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +const ParamSeamSize = () => { + const dispatch = useAppDispatch(); + const seamSize = useAppSelector( + (state: RootState) => state.generation.seamSize + ); + const { t } = useTranslation(); + + return ( + { + dispatch(setSeamSize(v)); + }} + withInput + withSliderMarks + withReset + handleReset={() => { + dispatch(setSeamSize(16)); + }} + /> + ); +}; + +export default memo(ParamSeamSize); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamSteps.tsx new file mode 100644 index 0000000000..e69339dbfe --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamSteps.tsx @@ -0,0 +1,36 @@ +import type { RootState } from 'app/store/store'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import IAISlider from 'common/components/IAISlider'; +import { setSeamSteps } from 'features/parameters/store/generationSlice'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +const ParamSeamSteps = () => { + const dispatch = useAppDispatch(); + const seamSteps = useAppSelector( + (state: RootState) => state.generation.seamSteps + ); + const { t } = useTranslation(); + + return ( + { + dispatch(setSeamSteps(v)); + }} + withInput + withSliderMarks + withReset + handleReset={() => { + dispatch(setSeamSteps(20)); + }} + /> + ); +}; + +export default memo(ParamSeamSteps); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamStrength.tsx new file mode 100644 index 0000000000..3f0fa01fcb --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamStrength.tsx @@ -0,0 +1,36 @@ +import type { RootState } from 'app/store/store'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import IAISlider from 'common/components/IAISlider'; +import { setSeamStrength } from 'features/parameters/store/generationSlice'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +const ParamSeamStrength = () => { + const dispatch = useAppDispatch(); + const seamStrength = useAppSelector( + (state: RootState) => state.generation.seamStrength + ); + const { t } = useTranslation(); + + return ( + { + dispatch(setSeamStrength(v)); + }} + withInput + withSliderMarks + withReset + handleReset={() => { + dispatch(setSeamStrength(0.7)); + }} + /> + ); +}; + +export default memo(ParamSeamStrength); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamThreshold.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamThreshold.tsx new file mode 100644 index 0000000000..f40491db98 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamThreshold.tsx @@ -0,0 +1,121 @@ +import { + FormControl, + FormLabel, + HStack, + RangeSlider, + RangeSliderFilledTrack, + RangeSliderMark, + RangeSliderThumb, + RangeSliderTrack, + Tooltip, +} from '@chakra-ui/react'; +import type { RootState } from 'app/store/store'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import IAIIconButton from 'common/components/IAIIconButton'; +import { + setSeamHighThreshold, + setSeamLowThreshold, +} from 'features/parameters/store/generationSlice'; +import { memo, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { BiReset } from 'react-icons/bi'; + +const ParamSeamThreshold = () => { + const dispatch = useAppDispatch(); + const seamLowThreshold = useAppSelector( + (state: RootState) => state.generation.seamLowThreshold + ); + + const seamHighThreshold = useAppSelector( + (state: RootState) => state.generation.seamHighThreshold + ); + const { t } = useTranslation(); + + const handleSeamThresholdChange = useCallback( + (v: number[]) => { + dispatch(setSeamLowThreshold(v[0] as number)); + dispatch(setSeamHighThreshold(v[1] as number)); + }, + [dispatch] + ); + + const handleSeamThresholdReset = () => { + dispatch(setSeamLowThreshold(100)); + dispatch(setSeamHighThreshold(200)); + }; + + return ( + + {t('parameters.seamThreshold')} + + + + + + + + + + + + + 0 + + + 100 + + + 200 + + + 255 + + + } + onClick={handleSeamThresholdReset} + /> + + + ); +}; + +export default memo(ParamSeamThreshold); diff --git a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts index 0173391833..d8495c5751 100644 --- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts +++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts @@ -37,6 +37,12 @@ export interface GenerationState { scheduler: SchedulerParam; maskBlur: number; maskBlurMethod: MaskBlurMethodParam; + seamSize: number; + seamBlur: number; + seamSteps: number; + seamStrength: StrengthParam; + seamLowThreshold: number; + seamHighThreshold: number; seed: SeedParam; seedWeights: string; shouldFitToWidthHeight: boolean; @@ -74,6 +80,12 @@ export const initialGenerationState: GenerationState = { scheduler: 'euler', maskBlur: 16, maskBlurMethod: 'box', + seamSize: 16, + seamBlur: 8, + seamSteps: 20, + seamStrength: 0.7, + seamLowThreshold: 100, + seamHighThreshold: 200, seed: 0, seedWeights: '', shouldFitToWidthHeight: true, @@ -200,6 +212,24 @@ export const generationSlice = createSlice({ setMaskBlurMethod: (state, action: PayloadAction) => { state.maskBlurMethod = action.payload; }, + setSeamSize: (state, action: PayloadAction) => { + state.seamSize = action.payload; + }, + setSeamBlur: (state, action: PayloadAction) => { + state.seamBlur = action.payload; + }, + setSeamSteps: (state, action: PayloadAction) => { + state.seamSteps = action.payload; + }, + setSeamStrength: (state, action: PayloadAction) => { + state.seamStrength = action.payload; + }, + setSeamLowThreshold: (state, action: PayloadAction) => { + state.seamLowThreshold = action.payload; + }, + setSeamHighThreshold: (state, action: PayloadAction) => { + state.seamHighThreshold = action.payload; + }, setTileSize: (state, action: PayloadAction) => { state.tileSize = action.payload; }, @@ -306,6 +336,12 @@ export const { setScheduler, setMaskBlur, setMaskBlurMethod, + setSeamSize, + setSeamBlur, + setSeamSteps, + setSeamStrength, + setSeamLowThreshold, + setSeamHighThreshold, setSeed, setSeedWeights, setShouldFitToWidthHeight, diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx index c6af754ad9..74833ebd70 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx @@ -2,6 +2,7 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse'; import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse'; import ParamMaskAdjustmentCollapse from 'features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse'; +import ParamSeamPaintingCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse'; import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse'; import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse'; import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; @@ -22,6 +23,7 @@ export default function SDXLUnifiedCanvasTabParameters() { + ); } diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx index fcfffee48b..9e6dc8fef8 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx @@ -6,6 +6,7 @@ import ParamControlNetCollapse from 'features/parameters/components/Parameters/C import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse'; // import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse'; import ParamMaskAdjustmentCollapse from 'features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse'; +import ParamSeamPaintingCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse'; import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea'; import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters'; @@ -23,6 +24,7 @@ const UnifiedCanvasParameters = () => { + );