Simplifies Accordion

Prep for adding reset buttons for each section

frontend/src/app/features.ts

@@ -13,8 +13,8 @@ export enum Feature {
   UPSCALE,
   FACE_CORRECTION,
   IMAGE_TO_IMAGE,
-  OUTPAINTING,
   BOUNDING_BOX,
+  CANVAS_COMPOSITION,
 }
 /** For each tooltip in the UI, the below feature definitions & props will pull relevant information into the tooltip.
  *
@@ -61,14 +61,14 @@ export const FEATURES: Record<Feature, FeatureHelpInfo> = {
     href: 'link/to/docs/feature3.html',
     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.',
-    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',
   },
+  [Feature.CANVAS_COMPOSITION]: {
+    text: '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',
+  },
 };

frontend/src/features/options/components/AccordionItems/InvokeAccordionItem.tsx

@@ -3,31 +3,37 @@ import {
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
+  Box,
+  Flex,
 } from '@chakra-ui/react';
-import React, { ReactElement } from 'react';
+import { ReactNode } from 'react';
 import { Feature } from 'app/features';
 import GuideIcon from 'common/components/GuideIcon';
 
 export interface InvokeAccordionItemProps {
-  header: ReactElement;
+  header: string;
-  feature: Feature;
+  content: ReactNode;
-  options: ReactElement;
+  feature?: Feature;
+  additionalHeaderComponents?: ReactNode;
 }
 
 export default function InvokeAccordionItem(props: InvokeAccordionItemProps) {
-  const { header, feature, options } = props;
+  const { header, feature, content, additionalHeaderComponents } = props;
 
   return (
     <AccordionItem className="advanced-settings-item">
-      <h2>
+      <AccordionButton className="advanced-settings-header">
-        <AccordionButton className="advanced-settings-header">
+        <Flex width={'100%'} gap={'0.5rem'} align={'center'}>
-          {header}
+          <Box flexGrow={1} textAlign={'left'}>
-          <GuideIcon feature={feature} />
+            {header}
+          </Box>
+          {additionalHeaderComponents}
+          {feature && <GuideIcon feature={feature} />}
           <AccordionIcon />
-        </AccordionButton>
+        </Flex>
-      </h2>
+      </AccordionButton>
       <AccordionPanel className="advanced-settings-panel">
-        {options}
+        {content}
       </AccordionPanel>
     </AccordionItem>
   );

frontend/src/features/options/components/AdvancedOptions/Canvas/CompositionOptions.tsx

@@ -51,7 +51,7 @@ const selector = createSelector(
   }
 );
 
-const OutpaintingOptions = () => {
+const CompositionOptions = () => {
   const dispatch = useAppDispatch();
   const {
     seamSize,
@@ -171,7 +171,7 @@ const OutpaintingOptions = () => {
   );
 };
 
-export default OutpaintingOptions;
+export default CompositionOptions;
 
 export const OutpaintingHeader = () => {
   return (

frontend/src/features/options/components/AdvancedOptions/FaceRestore/FaceRestoreToggle.tsx

@@ -1,14 +1,9 @@
-import { Flex } from '@chakra-ui/layout';
+import { ChangeEvent } from 'react';
-import React, { ChangeEvent } from 'react';
+import { RootState, useAppDispatch, useAppSelector } from 'app/store';
-import {
-  RootState,
-  useAppDispatch,
-  useAppSelector,
-} from 'app/store';
 import IAISwitch from 'common/components/IAISwitch';
 import { setShouldRunFacetool } from 'features/options/store/optionsSlice';
 
-export default function FaceRestoreHeader() {
+export default function FaceRestoreToggle() {
   const isGFPGANAvailable = useAppSelector(
     (state: RootState) => state.system.isGFPGANAvailable
   );
@@ -23,18 +18,10 @@ export default function FaceRestoreHeader() {
     dispatch(setShouldRunFacetool(e.target.checked));
 
   return (
-    <Flex
+    <IAISwitch
-      justifyContent={'space-between'}
+      isDisabled={!isGFPGANAvailable}
-      alignItems={'center'}
+      isChecked={shouldRunFacetool}
-      width={'100%'}
+      onChange={handleChangeShouldRunFacetool}
-      mr={2}
+    />
-    >
-      <p>Restore Face</p>
-      <IAISwitch
-        isDisabled={!isGFPGANAvailable}
-        isChecked={shouldRunFacetool}
-        onChange={handleChangeShouldRunFacetool}
-      />
-    </Flex>
   );
 }

frontend/src/features/options/components/AdvancedOptions/Output/OutputHeader.tsx

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

frontend/src/features/options/components/AdvancedOptions/Seed/SeedHeader.tsx

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

frontend/src/features/options/components/AdvancedOptions/Upscale/UpscaleToggle.tsx

@@ -1,14 +1,9 @@
-import { Flex } from '@chakra-ui/layout';
+import { ChangeEvent } from 'react';
-import React, { ChangeEvent } from 'react';
+import { RootState, useAppDispatch, useAppSelector } from 'app/store';
-import {
-  RootState,
-  useAppDispatch,
-  useAppSelector,
-} from 'app/store';
 import IAISwitch from 'common/components/IAISwitch';
 import { setShouldRunESRGAN } from 'features/options/store/optionsSlice';
 
-export default function UpscaleHeader() {
+export default function UpscaleToggle() {
   const isESRGANAvailable = useAppSelector(
     (state: RootState) => state.system.isESRGANAvailable
   );
@@ -21,18 +16,10 @@ export default function UpscaleHeader() {
   const handleChangeShouldRunESRGAN = (e: ChangeEvent<HTMLInputElement>) =>
     dispatch(setShouldRunESRGAN(e.target.checked));
   return (
-    <Flex
+    <IAISwitch
-      justifyContent={'space-between'}
+      isDisabled={!isESRGANAvailable}
-      alignItems={'center'}
+      isChecked={shouldRunESRGAN}
-      width={'100%'}
+      onChange={handleChangeShouldRunESRGAN}
-      mr={2}
+    />
-    >
-      <p>Upscale</p>
-      <IAISwitch
-        isDisabled={!isESRGANAvailable}
-        isChecked={shouldRunESRGAN}
-        onChange={handleChangeShouldRunESRGAN}
-      />
-    </Flex>
   );
 }

frontend/src/features/options/components/AdvancedOptions/Variations/GenerateVariations.tsx

@@ -7,7 +7,7 @@ import {
 import IAISwitch from 'common/components/IAISwitch';
 import { setShouldGenerateVariations } from 'features/options/store/optionsSlice';
 
-export default function GenerateVariations() {
+export default function GenerateVariationsToggle() {
   const shouldGenerateVariations = useAppSelector(
     (state: RootState) => state.options.shouldGenerateVariations
   );

frontend/src/features/options/components/AdvancedOptions/Variations/VariationsHeader.tsx

@@ -1,17 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import React from 'react';
-import GenerateVariations from './GenerateVariations';
-
-export default function VariationsHeader() {
-  return (
-    <Flex
-      justifyContent={'space-between'}
-      alignItems={'center'}
-      width={'100%'}
-      mr={2}
-    >
-      <p>Variations</p>
-      <GenerateVariations />
-    </Flex>
-  );
-}

frontend/src/features/options/components/OptionsAccordion.tsx

@@ -36,12 +36,15 @@ const OptionsAccordion = (props: OptionAccordionsType) => {
     const accordionsToRender: ReactElement[] = [];
     if (accordionInfo) {
       Object.keys(accordionInfo).forEach((key) => {
+        const { header, feature, content, additionalHeaderComponents } =
+          accordionInfo[key];
         accordionsToRender.push(
           <InvokeAccordionItem
             key={key}
-            header={accordionInfo[key as keyof typeof accordionInfo].header}
+            header={header}
-            feature={accordionInfo[key as keyof typeof accordionInfo].feature}
+            feature={feature}
-            options={accordionInfo[key as keyof typeof accordionInfo].options}
+            content={content}
+            additionalHeaderComponents={additionalHeaderComponents}
           />
         );
       });

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

@@ -1,15 +1,13 @@
 import { Feature } from 'app/features';
-import FaceRestoreHeader from 'features/options/components/AdvancedOptions/FaceRestore/FaceRestoreHeader';
 import FaceRestoreOptions from 'features/options/components/AdvancedOptions/FaceRestore/FaceRestoreOptions';
+import FaceRestoreToggle from 'features/options/components/AdvancedOptions/FaceRestore/FaceRestoreToggle';
 import ImageFit from 'features/options/components/AdvancedOptions/ImageToImage/ImageFit';
 import ImageToImageStrength from 'features/options/components/AdvancedOptions/ImageToImage/ImageToImageStrength';
-import OutputHeader from 'features/options/components/AdvancedOptions/Output/OutputHeader';
 import OutputOptions from 'features/options/components/AdvancedOptions/Output/OutputOptions';
-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 UpscaleToggle from 'features/options/components/AdvancedOptions/Upscale/UpscaleToggle';
+import GenerateVariationsToggle from 'features/options/components/AdvancedOptions/Variations/GenerateVariations';
 import VariationsOptions from 'features/options/components/AdvancedOptions/Variations/VariationsOptions';
 import MainOptions from 'features/options/components/MainOptions/MainOptions';
 import OptionsAccordion from 'features/options/components/OptionsAccordion';
@@ -20,29 +18,32 @@ import InvokeOptionsPanel from 'features/tabs/components/InvokeOptionsPanel';
 export default function ImageToImagePanel() {
   const imageToImageAccordions = {
     seed: {
-      header: <SeedHeader />,
+      header: 'Seed',
       feature: Feature.SEED,
-      options: <SeedOptions />,
+      content: <SeedOptions />,
     },
     variations: {
-      header: <VariationsHeader />,
+      header: 'Variations',
       feature: Feature.VARIATIONS,
-      options: <VariationsOptions />,
+      content: <VariationsOptions />,
+      additionalHeaderComponents: <GenerateVariationsToggle />,
     },
     face_restore: {
-      header: <FaceRestoreHeader />,
+      header: 'Face Restoration',
       feature: Feature.FACE_CORRECTION,
-      options: <FaceRestoreOptions />,
+      content: <FaceRestoreOptions />,
+      additionalHeaderComponents: <FaceRestoreToggle />,
     },
     upscale: {
-      header: <UpscaleHeader />,
+      header: 'Upscaling',
       feature: Feature.UPSCALE,
-      options: <UpscaleOptions />,
+      content: <UpscaleOptions />,
+      additionalHeaderComponents: <UpscaleToggle />,
     },
     other: {
-      header: <OutputHeader />,
+      header: 'Other Options',
       feature: Feature.OTHER,
-      options: <OutputOptions />,
+      content: <OutputOptions />,
     },
   };
 

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

@@ -1,13 +1,11 @@
 import { Feature } from 'app/features';
-import FaceRestoreHeader from 'features/options/components/AdvancedOptions/FaceRestore/FaceRestoreHeader';
 import FaceRestoreOptions from 'features/options/components/AdvancedOptions/FaceRestore/FaceRestoreOptions';
-import OutputHeader from 'features/options/components/AdvancedOptions/Output/OutputHeader';
+import FaceRestoreToggle from 'features/options/components/AdvancedOptions/FaceRestore/FaceRestoreToggle';
 import OutputOptions from 'features/options/components/AdvancedOptions/Output/OutputOptions';
-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 UpscaleToggle from 'features/options/components/AdvancedOptions/Upscale/UpscaleToggle';
+import GenerateVariationsToggle from 'features/options/components/AdvancedOptions/Variations/GenerateVariations';
 import VariationsOptions from 'features/options/components/AdvancedOptions/Variations/VariationsOptions';
 import MainOptions from 'features/options/components/MainOptions/MainOptions';
 import OptionsAccordion from 'features/options/components/OptionsAccordion';
@@ -18,29 +16,32 @@ import InvokeOptionsPanel from 'features/tabs/components/InvokeOptionsPanel';
 export default function TextToImagePanel() {
   const textToImageAccordions = {
     seed: {
-      header: <SeedHeader />,
+      header: 'Seed',
       feature: Feature.SEED,
-      options: <SeedOptions />,
+      content: <SeedOptions />,
     },
     variations: {
-      header: <VariationsHeader />,
+      header: 'Variations',
       feature: Feature.VARIATIONS,
-      options: <VariationsOptions />,
+      content: <VariationsOptions />,
+      additionalHeaderComponents: <GenerateVariationsToggle />,
     },
     face_restore: {
-      header: <FaceRestoreHeader />,
+      header: 'Face Restoration',
       feature: Feature.FACE_CORRECTION,
-      options: <FaceRestoreOptions />,
+      content: <FaceRestoreOptions />,
+      additionalHeaderComponents: <FaceRestoreToggle />,
     },
     upscale: {
-      header: <UpscaleHeader />,
+      header: 'Upscaling',
       feature: Feature.UPSCALE,
-      options: <UpscaleOptions />,
+      content: <UpscaleOptions />,
+      additionalHeaderComponents: <UpscaleToggle />,
     },
     other: {
-      header: <OutputHeader />,
+      header: 'Other Options',
       feature: Feature.OTHER,
-      options: <OutputOptions />,
+      content: <OutputOptions />,
     },
   };
 

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

@@ -1,15 +1,10 @@
 // import { Feature } from 'app/features';
 import { Feature } from 'app/features';
 import ImageToImageStrength from 'features/options/components/AdvancedOptions/ImageToImage/ImageToImageStrength';
-import BoundingBoxSettings, {
+import BoundingBoxSettings from 'features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings';
-  BoundingBoxSettingsHeader,
+import CompositionOptions from 'features/options/components/AdvancedOptions/Canvas/CompositionOptions';
-} 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 VariationsHeader from 'features/options/components/AdvancedOptions/Variations/VariationsHeader';
+import GenerateVariationsToggle from 'features/options/components/AdvancedOptions/Variations/GenerateVariations';
 import VariationsOptions from 'features/options/components/AdvancedOptions/Variations/VariationsOptions';
 import MainOptions from 'features/options/components/MainOptions/MainOptions';
 import OptionsAccordion from 'features/options/components/OptionsAccordion';
@@ -20,24 +15,25 @@ import InvokeOptionsPanel from 'features/tabs/components/InvokeOptionsPanel';
 export default function UnifiedCanvasPanel() {
   const unifiedCanvasAccordions = {
     boundingBox: {
-      header: <BoundingBoxSettingsHeader />,
+      header: 'Bounding Box',
       feature: Feature.BOUNDING_BOX,
-      options: <BoundingBoxSettings />,
+      content: <BoundingBoxSettings />,
     },
-    outpainting: {
+    composition: {
-      header: <OutpaintingHeader />,
+      header: 'Composition',
-      feature: Feature.OUTPAINTING,
+      feature: Feature.CANVAS_COMPOSITION,
-      options: <OutpaintingOptions />,
+      content: <CompositionOptions />,
     },
     seed: {
-      header: <SeedHeader />,
+      header: 'Seed',
       feature: Feature.SEED,
-      options: <SeedOptions />,
+      content: <SeedOptions />,
     },
     variations: {
-      header: <VariationsHeader />,
+      header: 'Variations',
       feature: Feature.VARIATIONS,
-      options: <VariationsOptions />,
+      content: <VariationsOptions />,
+      additionalHeaderComponents: <GenerateVariationsToggle />,
     },
   };
 

frontend/src/styles/index.scss

@@ -26,7 +26,7 @@
 @use '../features/options/components/MainOptions/MainOptions.scss';
 @use '../features/options/components/AccordionItems/AdvancedSettings.scss';
 @use '../features/options/components/AdvancedOptions/Upscale/UpscaleOptions.scss';
-@use '../features/options/components/AdvancedOptions/Inpainting/BoundingBoxSettings/BoundingBoxSettings.scss';
+@use '../features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings.scss';
 @use '../features/system/components/ProgressBar.scss';
 
 // gallery