Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): remove w/h from canvas params, add bbox w/h

Browse Source
This commit is contained in:
psychedelicious 2023-05-30 16:55:10 +10:00 committed by Kent Keirsey
parent 1a3fd05b81
commit cffcf80977
5 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/public/locales/en.json
View File

@ -454,6 +454,8 @@
"height": "Height", "height": "Height",
"scheduler": "Scheduler", "scheduler": "Scheduler",
"seed": "Seed", "seed": "Seed",
"boundingBoxWidth": "Bounding Box Width",
"boundingBoxHeight": "Bounding Box Height",
"imageToImage": "Image to Image", "imageToImage": "Image to Image",
"randomizeSeed": "Randomize Seed", "randomizeSeed": "Randomize Seed",
"shuffle": "Shuffle Seed", "shuffle": "Shuffle Seed",

15
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
View File

@ -2,18 +2,22 @@ import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISlider from 'common/components/IAISlider'; import IAISlider from 'common/components/IAISlider';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice'; import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
import { memo } from 'react'; import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const selector = createSelector( const selector = createSelector(
canvasSelector, [canvasSelector, isStagingSelector],
(canvas) => { (canvas, isStaging) => {
const { boundingBoxDimensions } = canvas; const { boundingBoxDimensions } = canvas;
return { return {
boundingBoxDimensions, boundingBoxDimensions,
isStaging,
}; };
}, },
defaultSelectorOptions defaultSelectorOptions
@ -21,7 +25,7 @@ const selector = createSelector(
const ParamBoundingBoxWidth = () => { const ParamBoundingBoxWidth = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { boundingBoxDimensions } = useAppSelector(selector); const { boundingBoxDimensions, isStaging } = useAppSelector(selector);
const { t } = useTranslation(); const { t } = useTranslation();
@ -45,12 +49,13 @@ const ParamBoundingBoxWidth = () => {
return ( return (
<IAISlider <IAISlider
label={t('parameters.height')} label={t('parameters.boundingBoxHeight')}
min={64} min={64}
max={1024} max={1024}
step={64} step={64}
value={boundingBoxDimensions.height} value={boundingBoxDimensions.height}
onChange={handleChangeHeight} onChange={handleChangeHeight}
isDisabled={isStaging}
sliderNumberInputProps={{ max: 4096 }} sliderNumberInputProps={{ max: 4096 }}
withSliderMarks withSliderMarks
withInput withInput

15
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
View File

@ -2,18 +2,22 @@ import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISlider from 'common/components/IAISlider'; import IAISlider from 'common/components/IAISlider';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice'; import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
import { memo } from 'react'; import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const selector = createSelector( const selector = createSelector(
canvasSelector, [canvasSelector, isStagingSelector],
(canvas) => { (canvas, isStaging) => {
const { boundingBoxDimensions } = canvas; const { boundingBoxDimensions } = canvas;
return { return {
boundingBoxDimensions, boundingBoxDimensions,
isStaging,
}; };
}, },
defaultSelectorOptions defaultSelectorOptions
@ -21,7 +25,7 @@ const selector = createSelector(
const ParamBoundingBoxWidth = () => { const ParamBoundingBoxWidth = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { boundingBoxDimensions } = useAppSelector(selector); const { boundingBoxDimensions, isStaging } = useAppSelector(selector);
const { t } = useTranslation(); const { t } = useTranslation();
@ -45,12 +49,13 @@ const ParamBoundingBoxWidth = () => {
return ( return (
<IAISlider <IAISlider
label={t('parameters.width')} label={t('parameters.boundingBoxWidth')}
min={64} min={64}
max={1024} max={1024}
step={64} step={64}
value={boundingBoxDimensions.width} value={boundingBoxDimensions.width}
onChange={handleChangeWidth} onChange={handleChangeWidth}
isDisabled={isStaging}
sliderNumberInputProps={{ max: 4096 }} sliderNumberInputProps={{ max: 4096 }}
withSliderMarks withSliderMarks
withInput withInput

12
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
View File

@ -7,11 +7,11 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations'; import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps'; import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale'; import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth';
import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight';
import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength'; import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength';
import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit'; import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel'; import ParamSchedulerAndModel from 'features/parameters/components/Parameters/Core/ParamSchedulerAndModel';
import ParamBoundingBoxWidth from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth';
import ParamBoundingBoxHeight from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight';
const selector = createSelector( const selector = createSelector(
uiSelector, uiSelector,
@ -41,8 +41,8 @@ const UnifiedCanvasCoreParameters = () => {
<ParamIterations /> <ParamIterations />
<ParamSteps /> <ParamSteps />
<ParamCFGScale /> <ParamCFGScale />
<ParamWidth /> <ParamBoundingBoxWidth />
<ParamHeight /> <ParamBoundingBoxHeight />
<ImageToImageStrength /> <ImageToImageStrength />
<ImageToImageFit /> <ImageToImageFit />
<ParamSchedulerAndModel /> <ParamSchedulerAndModel />
@ -55,8 +55,8 @@ const UnifiedCanvasCoreParameters = () => {
<ParamCFGScale /> <ParamCFGScale />
</Flex> </Flex>
<ParamSchedulerAndModel /> <ParamSchedulerAndModel />
<ParamWidth /> <ParamBoundingBoxWidth />
<ParamHeight /> <ParamBoundingBoxHeight />
<ImageToImageStrength /> <ImageToImageStrength />
</Flex> </Flex>
)} )}

2
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
View File

@ -2,7 +2,6 @@ import ProcessButtons from 'features/parameters/components/ProcessButtons/Proces
import ParamSeedCollapse from 'features/parameters/components/Parameters/Seed/ParamSeedCollapse'; import ParamSeedCollapse from 'features/parameters/components/Parameters/Seed/ParamSeedCollapse';
import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse'; import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse'; import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
import ParamBoundingBoxCollapse from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxCollapse';
import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse'; import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
import ParamSeamCorrectionCollapse from 'features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamCorrectionCollapse'; import ParamSeamCorrectionCollapse from 'features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamCorrectionCollapse';
import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters'; import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
@ -20,7 +19,6 @@ const UnifiedCanvasParameters = () => {
<ParamSeedCollapse /> <ParamSeedCollapse />
<ParamVariationCollapse /> <ParamVariationCollapse />
<ParamSymmetryCollapse /> <ParamSymmetryCollapse />
<ParamBoundingBoxCollapse />
<ParamSeamCorrectionCollapse /> <ParamSeamCorrectionCollapse />
<ParamInfillAndScalingCollapse /> <ParamInfillAndScalingCollapse />
</> </>