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

Removes Advanced checkbox, cleans up options panel for unified canvas

Browse Source
This commit is contained in:
psychedelicious 2022-11-22 14:28:12 +11:00 committed by blessedcoolant
parent f3b7316683
commit 7e4e51b224
10 changed files with 71 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/features.ts
View File

@ -14,6 +14,7 @@ export enum Feature {
FACE_CORRECTION,
IMAGE_TO_IMAGE,
OUTPAINTING,
BOUNDING_BOX,
}
/** For each tooltip in the UI, the below feature definitions & props will pull relevant information into the tooltip.
*
@ -61,7 +62,12 @@ export const FEATURES: Record<Feature, FeatureHelpInfo> = {
guideImage: 'asset/path.gif',
},
[Feature.OUTPAINTING]: {
text: 'Outpainting settings control the process used to cleanly manage seams between existing compositions and new invocations, using larger areas of the image for seam guidance, or applying various configurations on the generation process.',
text: 'Outpainting settings control the process used to cleanly manage seams between existing compositions and new invocations, using larger areas of the image for seam guidance, or applying various configurations on the generation process.',
href: 'link/to/docs/feature3.html',
guideImage: 'asset/path.gif',
},
[Feature.BOUNDING_BOX]: {
text: 'The Bounding Box is analogous to the Width and Height settings for Text to Image or Image to Image. Only the area in the box will be processed.',
href: 'link/to/docs/feature3.html',
guideImage: 'asset/path.gif',
},

2
frontend/src/common/components/GuideIcon.tsx
View File

@ -13,7 +13,7 @@ const GuideIcon = forwardRef(
({ feature, icon = MdHelp }: GuideIconProps, ref) => (
<GuidePopover feature={feature}>
<Box ref={ref}>
<Icon as={icon} />
<Icon marginBottom={'-.15rem'} as={icon} />
</Box>
</GuidePopover>
)

1
frontend/src/common/components/IAISelect.scss
View File

@ -4,7 +4,6 @@
display: flex;
column-gap: 1rem;
align-items: center;
width: max-content;
.invokeai__select-label {
color: var(--text-color-secondary);

70
frontend/src/features/options/components/AdvancedOptions/Inpainting/BoundingBoxSettings/BoundingBoxSettings.tsx
View File

@ -1,3 +1,4 @@
import { Box, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store';
import IAISlider from 'common/components/IAISlider';
@ -61,40 +62,43 @@ const BoundingBoxSettings = () => {
};
return (
<div className="inpainting-bounding-box-settings">
<div className="inpainting-bounding-box-header">
<p>Canvas Bounding Box</p>
</div>
<div className="inpainting-bounding-box-settings-items">
<IAISlider
label={'Width'}
min={64}
max={1024}
step={64}
value={boundingBoxDimensions.width}
onChange={handleChangeWidth}
handleReset={handleResetWidth}
sliderNumberInputProps={{ max: 4096 }}
withSliderMarks
withInput
withReset
/>
<IAISlider
label={'Height'}
min={64}
max={1024}
step={64}
value={boundingBoxDimensions.height}
onChange={handleChangeHeight}
handleReset={handleResetHeight}
sliderNumberInputProps={{ max: 4096 }}
withSliderMarks
withInput
withReset
/>
</div>
</div>
<Flex direction="column" gap="1rem">
<IAISlider
label={'Width'}
min={64}
max={1024}
step={64}
value={boundingBoxDimensions.width}
onChange={handleChangeWidth}
handleReset={handleResetWidth}
sliderNumberInputProps={{ max: 4096 }}
withSliderMarks
withInput
withReset
/>
<IAISlider
label={'Height'}
min={64}
max={1024}
step={64}
value={boundingBoxDimensions.height}
onChange={handleChangeHeight}
handleReset={handleResetHeight}
sliderNumberInputProps={{ max: 4096 }}
withSliderMarks
withInput
withReset
/>
</Flex>
);
};
export default BoundingBoxSettings;
export const BoundingBoxSettingsHeader = () => {
return (
<Box flex="1" textAlign="left">
Bounding Box
</Box>
);
};

11
frontend/src/features/options/components/AdvancedOptions/Inpainting/InpaintingSettings.tsx
View File

@ -1,11 +0,0 @@
import BoundingBoxSettings from './BoundingBoxSettings/BoundingBoxSettings';
import InpaintReplace from './InpaintReplace';
export default function InpaintingSettings() {
return (
<>
<InpaintReplace />
<BoundingBoxSettings />
</>
);
}

13
frontend/src/features/options/components/AdvancedOptions/Inpainting/OutpaintingOptions.tsx
View File

@ -1,4 +1,4 @@
import { Flex } from '@chakra-ui/react';
import { Box, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store';
import IAISlider from 'common/components/IAISlider';
@ -12,6 +12,7 @@ import {
setTileSize,
setShouldForceOutpaint,
} from 'features/options/store/optionsSlice';
import InpaintReplace from './InpaintReplace';
const selector = createSelector([optionsSelector], (options) => {
const {
@ -46,6 +47,8 @@ const OutpaintingOptions = () => {
return (
<Flex direction="column" gap="1rem">
<InpaintReplace />
<IAISlider
sliderMarkRightOffset={-6}
label={'Seam Size'}
@ -141,3 +144,11 @@ const OutpaintingOptions = () => {
};
export default OutpaintingOptions;
export const OutpaintingHeader = () => {
return (
<Box flex="1" textAlign="left">
Outpainting Composition
</Box>
);
};

11
frontend/src/features/options/components/AdvancedOptions/Inpainting/OutpaintingOptionsHeader.tsx
View File

@ -1,11 +0,0 @@
import { Box } from '@chakra-ui/react';
const OutpaintingHeader = () => {
return (
<Box flex="1" textAlign="left">
Outpainting
</Box>
);
};
export default OutpaintingHeader;

5
frontend/src/features/tabs/components/ImageToImage/ImageToImagePanel.tsx
View File

@ -62,10 +62,7 @@ export default function ImageToImagePanel() {
styleClass="main-option-block image-to-image-strength-main-option"
/>
<ImageFit />
<MainAdvancedOptionsCheckbox />
{showAdvancedOptions ? (
<OptionsAccordion accordionInfo={imageToImageAccordions} />
) : null}
<OptionsAccordion accordionInfo={imageToImageAccordions} />
</InvokeOptionsPanel>
);
}

5
frontend/src/features/tabs/components/TextToImage/TextToImagePanel.tsx
View File

@ -55,10 +55,7 @@ export default function TextToImagePanel() {
<PromptInput />
<ProcessButtons />
<MainOptions />
<MainAdvancedOptionsCheckbox />
{showAdvancedOptions ? (
<OptionsAccordion accordionInfo={textToImageAccordions} />
) : null}
<OptionsAccordion accordionInfo={textToImageAccordions} />
</InvokeOptionsPanel>
);
}

34
frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasPanel.tsx
View File

@ -1,16 +1,15 @@
// import { Feature } from 'app/features';
import { Feature } from 'app/features';
import { RootState, useAppSelector } from 'app/store';
import FaceRestoreHeader from 'features/options/components/AdvancedOptions/FaceRestore/FaceRestoreHeader';
import FaceRestoreOptions from 'features/options/components/AdvancedOptions/FaceRestore/FaceRestoreOptions';
import ImageToImageStrength from 'features/options/components/AdvancedOptions/ImageToImage/ImageToImageStrength';
import InpaintingSettings from 'features/options/components/AdvancedOptions/Inpainting/InpaintingSettings';
import OutpaintingOptions from 'features/options/components/AdvancedOptions/Inpainting/OutpaintingOptions';
import OutpaintingHeader from 'features/options/components/AdvancedOptions/Inpainting/OutpaintingOptionsHeader';
import BoundingBoxSettings, {
BoundingBoxSettingsHeader,
} from 'features/options/components/AdvancedOptions/Inpainting/BoundingBoxSettings/BoundingBoxSettings';
import OutpaintingOptions, {
OutpaintingHeader,
} from 'features/options/components/AdvancedOptions/Inpainting/OutpaintingOptions';
import SeedHeader from 'features/options/components/AdvancedOptions/Seed/SeedHeader';
import SeedOptions from 'features/options/components/AdvancedOptions/Seed/SeedOptions';
import UpscaleHeader from 'features/options/components/AdvancedOptions/Upscale/UpscaleHeader';
import UpscaleOptions from 'features/options/components/AdvancedOptions/Upscale/UpscaleOptions';
import VariationsHeader from 'features/options/components/AdvancedOptions/Variations/VariationsHeader';
import VariationsOptions from 'features/options/components/AdvancedOptions/Variations/VariationsOptions';
import MainAdvancedOptionsCheckbox from 'features/options/components/MainOptions/MainAdvancedOptionsCheckbox';
@ -26,6 +25,11 @@ export default function UnifiedCanvasPanel() {
);
const imageToImageAccordions = {
boundingBox: {
header: <BoundingBoxSettingsHeader />,
feature: Feature.BOUNDING_BOX,
options: <BoundingBoxSettings />,
},
outpainting: {
header: <OutpaintingHeader />,
feature: Feature.OUTPAINTING,
@ -41,16 +45,6 @@ export default function UnifiedCanvasPanel() {
feature: Feature.VARIATIONS,
options: <VariationsOptions />,
},
face_restore: {
header: <FaceRestoreHeader />,
feature: Feature.FACE_CORRECTION,
options: <FaceRestoreOptions />,
},
upscale: {
header: <UpscaleHeader />,
feature: Feature.UPSCALE,
options: <UpscaleOptions />,
},
};
return (
@ -62,11 +56,7 @@ export default function UnifiedCanvasPanel() {
label="Image To Image Strength"
styleClass="main-option-block image-to-image-strength-main-option"
/>
<InpaintingSettings />
<MainAdvancedOptionsCheckbox />
{showAdvancedOptions && (
<OptionsAccordion accordionInfo={imageToImageAccordions} />
)}
<OptionsAccordion accordionInfo={imageToImageAccordions} />
</InvokeOptionsPanel>
);
}