Removes Advanced checkbox, cleans up options panel for unified canvas

frontend/src/app/features.ts

@@ -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',
+  },
 };

frontend/src/common/components/GuideIcon.tsx

@@ -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>
   )

frontend/src/common/components/IAISelect.scss

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

frontend/src/features/options/components/AdvancedOptions/Inpainting/BoundingBoxSettings/BoundingBoxSettings.tsx

@@ -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">
+    <Flex direction="column" gap="1rem">
-      <div className="inpainting-bounding-box-header">
+      <IAISlider
-        <p>Canvas Bounding Box</p>
+        label={'Width'}
-      </div>
+        min={64}
-      <div className="inpainting-bounding-box-settings-items">
+        max={1024}
-        <IAISlider
+        step={64}
-          label={'Width'}
+        value={boundingBoxDimensions.width}
-          min={64}
+        onChange={handleChangeWidth}
-          max={1024}
+        handleReset={handleResetWidth}
-          step={64}
+        sliderNumberInputProps={{ max: 4096 }}
-          value={boundingBoxDimensions.width}
+        withSliderMarks
-          onChange={handleChangeWidth}
+        withInput
-          handleReset={handleResetWidth}
+        withReset
-          sliderNumberInputProps={{ max: 4096 }}
+      />
-          withSliderMarks
+      <IAISlider
-          withInput
+        label={'Height'}
-          withReset
+        min={64}
-        />
+        max={1024}
-        <IAISlider
+        step={64}
-          label={'Height'}
+        value={boundingBoxDimensions.height}
-          min={64}
+        onChange={handleChangeHeight}
-          max={1024}
+        handleReset={handleResetHeight}
-          step={64}
+        sliderNumberInputProps={{ max: 4096 }}
-          value={boundingBoxDimensions.height}
+        withSliderMarks
-          onChange={handleChangeHeight}
+        withInput
-          handleReset={handleResetHeight}
+        withReset
-          sliderNumberInputProps={{ max: 4096 }}
+      />
-          withSliderMarks
+    </Flex>
-          withInput
-          withReset
-        />
-      </div>
-    </div>
   );
 };
 
 export default BoundingBoxSettings;
+
+export const BoundingBoxSettingsHeader = () => {
+  return (
+    <Box flex="1" textAlign="left">
+      Bounding Box
+    </Box>
+  );
+};

frontend/src/features/options/components/AdvancedOptions/Inpainting/InpaintingSettings.tsx

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

frontend/src/features/options/components/AdvancedOptions/Inpainting/OutpaintingOptions.tsx

@@ -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>
+  );
+};

frontend/src/features/options/components/AdvancedOptions/Inpainting/OutpaintingOptionsHeader.tsx

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

frontend/src/features/tabs/components/ImageToImage/ImageToImagePanel.tsx

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

frontend/src/features/tabs/components/TextToImage/TextToImagePanel.tsx

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

frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasPanel.tsx

@@ -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 BoundingBoxSettings, {
-import OutpaintingOptions from 'features/options/components/AdvancedOptions/Inpainting/OutpaintingOptions';
+  BoundingBoxSettingsHeader,
-import OutpaintingHeader from 'features/options/components/AdvancedOptions/Inpainting/OutpaintingOptionsHeader';
+} 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 />
+      <OptionsAccordion accordionInfo={imageToImageAccordions} />
-      <MainAdvancedOptionsCheckbox />
-      {showAdvancedOptions && (
-        <OptionsAccordion accordionInfo={imageToImageAccordions} />
-      )}
     </InvokeOptionsPanel>
   );
 }