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

6
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.
*
@ -65,4 +66,9 @@ export const FEATURES: Record<Feature, FeatureHelpInfo> = {
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);

18
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,11 +62,7 @@ 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">
<Flex direction="column" gap="1rem">
<IAISlider
label={'Width'}
min={64}
@ -92,9 +89,16 @@ const BoundingBoxSettings = () => {
withInput
withReset
/>
</div>
</div>
</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;

3
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}
</InvokeOptionsPanel>
);
}

3
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}
</InvokeOptionsPanel>
);
}

32
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} />
)}
</InvokeOptionsPanel>
);
}