From 7e4e51b224a14a3238d95cc9b701565905dc149a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 22 Nov 2022 14:28:12 +1100
Subject: [PATCH] Removes Advanced checkbox, cleans up options panel for
 unified canvas

---
 frontend/src/app/features.ts                  |  8 ++-
 frontend/src/common/components/GuideIcon.tsx  |  2 +-
 frontend/src/common/components/IAISelect.scss |  1 -
 .../BoundingBoxSettings.tsx                   | 70 ++++++++++---------
 .../Inpainting/InpaintingSettings.tsx         | 11 ---
 .../Inpainting/OutpaintingOptions.tsx         | 13 +++-
 .../Inpainting/OutpaintingOptionsHeader.tsx   | 11 ---
 .../ImageToImage/ImageToImagePanel.tsx        |  5 +-
 .../TextToImage/TextToImagePanel.tsx          |  5 +-
 .../UnifiedCanvas/UnifiedCanvasPanel.tsx      | 34 ++++-----
 10 files changed, 71 insertions(+), 89 deletions(-)
 delete mode 100644 frontend/src/features/options/components/AdvancedOptions/Inpainting/InpaintingSettings.tsx
 delete mode 100644 frontend/src/features/options/components/AdvancedOptions/Inpainting/OutpaintingOptionsHeader.tsx

diff --git a/frontend/src/app/features.ts b/frontend/src/app/features.ts
index 57bde3efee..f31b0dad98 100644
--- a/frontend/src/app/features.ts
+++ b/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',
   },
diff --git a/frontend/src/common/components/GuideIcon.tsx b/frontend/src/common/components/GuideIcon.tsx
index e3e32ea32e..c446024452 100644
--- a/frontend/src/common/components/GuideIcon.tsx
+++ b/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>
   )
diff --git a/frontend/src/common/components/IAISelect.scss b/frontend/src/common/components/IAISelect.scss
index 83df2d41bf..d4db363062 100644
--- a/frontend/src/common/components/IAISelect.scss
+++ b/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);
diff --git a/frontend/src/features/options/components/AdvancedOptions/Inpainting/BoundingBoxSettings/BoundingBoxSettings.tsx b/frontend/src/features/options/components/AdvancedOptions/Inpainting/BoundingBoxSettings/BoundingBoxSettings.tsx
index 1bc0bb3260..b43b7c1223 100644
--- a/frontend/src/features/options/components/AdvancedOptions/Inpainting/BoundingBoxSettings/BoundingBoxSettings.tsx
+++ b/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">
-      <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>
+  );
+};
diff --git a/frontend/src/features/options/components/AdvancedOptions/Inpainting/InpaintingSettings.tsx b/frontend/src/features/options/components/AdvancedOptions/Inpainting/InpaintingSettings.tsx
deleted file mode 100644
index 33f97c1edd..0000000000
--- a/frontend/src/features/options/components/AdvancedOptions/Inpainting/InpaintingSettings.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import BoundingBoxSettings from './BoundingBoxSettings/BoundingBoxSettings';
-import InpaintReplace from './InpaintReplace';
-
-export default function InpaintingSettings() {
-  return (
-    <>
-      <InpaintReplace />
-      <BoundingBoxSettings />
-    </>
-  );
-}
diff --git a/frontend/src/features/options/components/AdvancedOptions/Inpainting/OutpaintingOptions.tsx b/frontend/src/features/options/components/AdvancedOptions/Inpainting/OutpaintingOptions.tsx
index 88c0e1117d..2c0263399a 100644
--- a/frontend/src/features/options/components/AdvancedOptions/Inpainting/OutpaintingOptions.tsx
+++ b/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>
+  );
+};
diff --git a/frontend/src/features/options/components/AdvancedOptions/Inpainting/OutpaintingOptionsHeader.tsx b/frontend/src/features/options/components/AdvancedOptions/Inpainting/OutpaintingOptionsHeader.tsx
deleted file mode 100644
index b2df8b13fb..0000000000
--- a/frontend/src/features/options/components/AdvancedOptions/Inpainting/OutpaintingOptionsHeader.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Box } from '@chakra-ui/react';
-
-const OutpaintingHeader = () => {
-  return (
-    <Box flex="1" textAlign="left">
-      Outpainting
-    </Box>
-  );
-};
-
-export default OutpaintingHeader;
diff --git a/frontend/src/features/tabs/components/ImageToImage/ImageToImagePanel.tsx b/frontend/src/features/tabs/components/ImageToImage/ImageToImagePanel.tsx
index ac9726acc8..64cc3d0893 100644
--- a/frontend/src/features/tabs/components/ImageToImage/ImageToImagePanel.tsx
+++ b/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 />
-      {showAdvancedOptions ? (
-        <OptionsAccordion accordionInfo={imageToImageAccordions} />
-      ) : null}
+      <OptionsAccordion accordionInfo={imageToImageAccordions} />
     </InvokeOptionsPanel>
   );
 }
diff --git a/frontend/src/features/tabs/components/TextToImage/TextToImagePanel.tsx b/frontend/src/features/tabs/components/TextToImage/TextToImagePanel.tsx
index 3451760b88..8e2fcb37d9 100644
--- a/frontend/src/features/tabs/components/TextToImage/TextToImagePanel.tsx
+++ b/frontend/src/features/tabs/components/TextToImage/TextToImagePanel.tsx
@@ -55,10 +55,7 @@ export default function TextToImagePanel() {
       <PromptInput />
       <ProcessButtons />
       <MainOptions />
-      <MainAdvancedOptionsCheckbox />
-      {showAdvancedOptions ? (
-        <OptionsAccordion accordionInfo={textToImageAccordions} />
-      ) : null}
+      <OptionsAccordion accordionInfo={textToImageAccordions} />
     </InvokeOptionsPanel>
   );
 }
diff --git a/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasPanel.tsx b/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasPanel.tsx
index 7ab57687a0..6561898092 100644
--- a/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasPanel.tsx
+++ b/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 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>
   );
 }