From d6196e863dd235bcc2dffe7492d73b009ab35a34 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Tue, 21 Feb 2023 07:25:24 +1300 Subject: [PATCH] Move symmetry settings to their own accordion --- invokeai/frontend/public/locales/en.json | 1 + .../src/common/util/parameterTranslation.ts | 34 +++++++++++-------- .../Output/ImageToImageOutputSettings.tsx | 2 -- .../Output/OutputSettings.tsx | 2 -- .../Output/SymmetryToggle.tsx | 19 +++++++++++ .../AdvancedParameters/Seed/Threshold.tsx | 2 +- .../parameters/store/generationSlice.ts | 6 ++++ .../ImageToImage/ImageToImagePanel.tsx | 7 ++++ .../TextToImage/TextToImagePanel.tsx | 7 ++++ .../UnifiedCanvasOtherSettings.tsx | 5 --- .../UnifiedCanvas/UnifiedCanvasPanel.tsx | 10 +++--- 11 files changed, 67 insertions(+), 28 deletions(-) create mode 100644 invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SymmetryToggle.tsx delete mode 100644 invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasOtherSettings.tsx diff --git a/invokeai/frontend/public/locales/en.json b/invokeai/frontend/public/locales/en.json index 9ba4f5ba83..c9a3f48c47 100644 --- a/invokeai/frontend/public/locales/en.json +++ b/invokeai/frontend/public/locales/en.json @@ -441,6 +441,7 @@ "infillScalingHeader": "Infill and Scaling", "img2imgStrength": "Image To Image Strength", "toggleLoopback": "Toggle Loopback", + "symmetry": "Symmetry", "hSymmetryStep": "H Symmetry Step", "vSymmetryStep": "V Symmetry Step", "invoke": "Invoke", diff --git a/invokeai/frontend/src/common/util/parameterTranslation.ts b/invokeai/frontend/src/common/util/parameterTranslation.ts index 95be5a8717..f703a96f4a 100644 --- a/invokeai/frontend/src/common/util/parameterTranslation.ts +++ b/invokeai/frontend/src/common/util/parameterTranslation.ts @@ -65,8 +65,8 @@ export type BackendGenerationParameters = { with_variations?: Array>; variation_amount?: number; enable_image_debugging?: boolean; - h_symmetry_time_pct: number; - v_symmetry_time_pct: number; + h_symmetry_time_pct?: number; + v_symmetry_time_pct?: number; }; export type BackendEsrGanParameters = { @@ -143,6 +143,7 @@ export const frontendToBackendParameters = ( tileSize, variationAmount, width, + shouldUseSymmetry, horizontalSymmetryTimePercentage, verticalSymmetryTimePercentage, } = generationState; @@ -169,23 +170,11 @@ export const frontendToBackendParameters = ( save_intermediates: saveIntermediatesInterval, generation_mode: generationMode, init_mask: '', - h_symmetry_time_pct: horizontalSymmetryTimePercentage, - v_symmetry_time_pct: verticalSymmetryTimePercentage, }; let esrganParameters: false | BackendEsrGanParameters = false; let facetoolParameters: false | BackendFacetoolParameters = false; - generationParameters.h_symmetry_time_pct = Math.max( - 0, - Math.min(1, horizontalSymmetryTimePercentage / steps) - ); - - generationParameters.v_symmetry_time_pct = Math.max( - 0, - Math.min(1, verticalSymmetryTimePercentage / steps) - ); - if (negativePrompt !== '') { generationParameters.prompt = `${prompt} [${negativePrompt}]`; } @@ -194,6 +183,23 @@ export const frontendToBackendParameters = ( ? randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX) : seed; + // Symmetry Settings + if (shouldUseSymmetry) { + if (horizontalSymmetryTimePercentage > 0) { + generationParameters.h_symmetry_time_pct = Math.max( + 0, + Math.min(1, horizontalSymmetryTimePercentage / steps) + ); + } + + if (horizontalSymmetryTimePercentage > 0) { + generationParameters.v_symmetry_time_pct = Math.max( + 0, + Math.min(1, verticalSymmetryTimePercentage / steps) + ); + } + } + // txt2img exclusive parameters if (generationMode === 'txt2img') { generationParameters.hires_fix = hiresFix; diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx index 1d9e935a8d..f037e79523 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx @@ -1,12 +1,10 @@ import { Flex } from '@chakra-ui/react'; import SeamlessSettings from './SeamlessSettings'; -import SymmetrySettings from './SymmetrySettings'; const ImageToImageOutputSettings = () => { return ( - ); }; diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx index e2a60c2f37..1eaba1eaae 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx @@ -1,14 +1,12 @@ import { Flex } from '@chakra-ui/react'; import HiresSettings from './HiresSettings'; import SeamlessSettings from './SeamlessSettings'; -import SymmetrySettings from './SymmetrySettings'; const OutputSettings = () => { return ( - ); }; diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SymmetryToggle.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SymmetryToggle.tsx new file mode 100644 index 0000000000..9446271a0e --- /dev/null +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SymmetryToggle.tsx @@ -0,0 +1,19 @@ +import { RootState } from 'app/store'; +import { useAppDispatch, useAppSelector } from 'app/storeHooks'; +import IAISwitch from 'common/components/IAISwitch'; +import { setShouldUseSymmetry } from 'features/parameters/store/generationSlice'; + +export default function SymmetryToggle() { + const shouldUseSymmetry = useAppSelector( + (state: RootState) => state.generation.shouldUseSymmetry + ); + + const dispatch = useAppDispatch(); + + return ( + dispatch(setShouldUseSymmetry(e.target.checked))} + /> + ); +} diff --git a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/Threshold.tsx b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/Threshold.tsx index fa7fc6ea88..ea1721fc61 100644 --- a/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/Threshold.tsx +++ b/invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/Threshold.tsx @@ -23,7 +23,7 @@ export default function Threshold() { withInput withReset withSliderMarks - inputWidth="6rem" + sliderMarkRightOffset={-4} /> ); } diff --git a/invokeai/frontend/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/src/features/parameters/store/generationSlice.ts index f057f56ba3..e05c49f3f7 100644 --- a/invokeai/frontend/src/features/parameters/store/generationSlice.ts +++ b/invokeai/frontend/src/features/parameters/store/generationSlice.ts @@ -32,6 +32,7 @@ export interface GenerationState { tileSize: number; variationAmount: number; width: number; + shouldUseSymmetry: boolean; horizontalSymmetryTimePercentage: number; verticalSymmetryTimePercentage: number; } @@ -62,6 +63,7 @@ const initialGenerationState: GenerationState = { tileSize: 32, variationAmount: 0.1, width: 512, + shouldUseSymmetry: false, horizontalSymmetryTimePercentage: 0, verticalSymmetryTimePercentage: 0, }; @@ -329,6 +331,9 @@ export const generationSlice = createSlice({ setInfillMethod: (state, action: PayloadAction) => { state.infillMethod = action.payload; }, + setShouldUseSymmetry: (state, action: PayloadAction) => { + state.shouldUseSymmetry = action.payload; + }, setHorizontalSymmetryTimePercentage: ( state, action: PayloadAction @@ -378,6 +383,7 @@ export const { setTileSize, setVariationAmount, setWidth, + setShouldUseSymmetry, setHorizontalSymmetryTimePercentage, setVerticalSymmetryTimePercentage, } = generationSlice.actions; diff --git a/invokeai/frontend/src/features/ui/components/ImageToImage/ImageToImagePanel.tsx b/invokeai/frontend/src/features/ui/components/ImageToImage/ImageToImagePanel.tsx index c2f5fc349b..531e95f161 100644 --- a/invokeai/frontend/src/features/ui/components/ImageToImage/ImageToImagePanel.tsx +++ b/invokeai/frontend/src/features/ui/components/ImageToImage/ImageToImagePanel.tsx @@ -3,6 +3,8 @@ import { Feature } from 'app/features'; import FaceRestoreSettings from 'features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings'; import FaceRestoreToggle from 'features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreToggle'; import ImageToImageOutputSettings from 'features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings'; +import SymmetrySettings from 'features/parameters/components/AdvancedParameters/Output/SymmetrySettings'; +import SymmetryToggle from 'features/parameters/components/AdvancedParameters/Output/SymmetryToggle'; import SeedSettings from 'features/parameters/components/AdvancedParameters/Seed/SeedSettings'; import UpscaleSettings from 'features/parameters/components/AdvancedParameters/Upscale/UpscaleSettings'; import UpscaleToggle from 'features/parameters/components/AdvancedParameters/Upscale/UpscaleToggle'; @@ -44,6 +46,11 @@ export default function ImageToImagePanel() { content: , additionalHeaderComponents: , }, + symmetry: { + header: `${t('parameters.symmetry')}`, + content: , + additionalHeaderComponents: , + }, other: { header: `${t('parameters.otherOptions')}`, feature: Feature.OTHER, diff --git a/invokeai/frontend/src/features/ui/components/TextToImage/TextToImagePanel.tsx b/invokeai/frontend/src/features/ui/components/TextToImage/TextToImagePanel.tsx index 4bdadb0a02..ee9f7ace3f 100644 --- a/invokeai/frontend/src/features/ui/components/TextToImage/TextToImagePanel.tsx +++ b/invokeai/frontend/src/features/ui/components/TextToImage/TextToImagePanel.tsx @@ -3,6 +3,8 @@ import { Feature } from 'app/features'; import FaceRestoreSettings from 'features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings'; import FaceRestoreToggle from 'features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreToggle'; import OutputSettings from 'features/parameters/components/AdvancedParameters/Output/OutputSettings'; +import SymmetrySettings from 'features/parameters/components/AdvancedParameters/Output/SymmetrySettings'; +import SymmetryToggle from 'features/parameters/components/AdvancedParameters/Output/SymmetryToggle'; import SeedSettings from 'features/parameters/components/AdvancedParameters/Seed/SeedSettings'; import UpscaleSettings from 'features/parameters/components/AdvancedParameters/Upscale/UpscaleSettings'; import UpscaleToggle from 'features/parameters/components/AdvancedParameters/Upscale/UpscaleToggle'; @@ -43,6 +45,11 @@ export default function TextToImagePanel() { content: , additionalHeaderComponents: , }, + symmetry: { + header: `${t('parameters.symmetry')}`, + content: , + additionalHeaderComponents: , + }, other: { header: `${t('parameters.otherOptions')}`, feature: Feature.OTHER, diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasOtherSettings.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasOtherSettings.tsx deleted file mode 100644 index 3c1698ecd8..0000000000 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasOtherSettings.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import SymmetrySettings from 'features/parameters/components/AdvancedParameters/Output/SymmetrySettings'; - -export default function UnifiedCanvasOtherSettings() { - return ; -} diff --git a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasPanel.tsx b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasPanel.tsx index 680faf9357..392648075e 100644 --- a/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasPanel.tsx +++ b/invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasPanel.tsx @@ -5,6 +5,8 @@ import BoundingBoxSettings from 'features/parameters/components/AdvancedParamete import InfillAndScalingSettings from 'features/parameters/components/AdvancedParameters/Canvas/InfillAndScalingSettings'; import SeamCorrectionSettings from 'features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/SeamCorrectionSettings'; import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength'; +import SymmetrySettings from 'features/parameters/components/AdvancedParameters/Output/SymmetrySettings'; +import SymmetryToggle from 'features/parameters/components/AdvancedParameters/Output/SymmetryToggle'; import SeedSettings from 'features/parameters/components/AdvancedParameters/Seed/SeedSettings'; import GenerateVariationsToggle from 'features/parameters/components/AdvancedParameters/Variations/GenerateVariations'; import VariationsSettings from 'features/parameters/components/AdvancedParameters/Variations/VariationsSettings'; @@ -15,7 +17,6 @@ import NegativePromptInput from 'features/parameters/components/PromptInput/Nega import PromptInput from 'features/parameters/components/PromptInput/PromptInput'; import InvokeOptionsPanel from 'features/ui/components/InvokeParametersPanel'; import { useTranslation } from 'react-i18next'; -import UnifiedCanvasOtherSettings from './UnifiedCanvasOtherSettings'; export default function UnifiedCanvasPanel() { const { t } = useTranslation(); @@ -47,9 +48,10 @@ export default function UnifiedCanvasPanel() { content: , additionalHeaderComponents: , }, - output: { - header: `${t('parameters.otherOptions')}`, - content: , + symmetry: { + header: `${t('parameters.symmetry')}`, + content: , + additionalHeaderComponents: , }, };