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.
  *
@@ -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',
   },

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