feat(ui): expand config options (#3393)

now may disable individual SD features eg Noise, Variation, etc - stuff
which is not ready for consumption in commercial.

invokeai/frontend/web/src/app/types/invokeai.ts

@@ -326,11 +326,11 @@ export type AppFeature =
 /**
  * A disable-able Stable Diffusion feature
  */
-export type StableDiffusionFeature =
+export type SDFeature =
-  | 'noiseConfig'
+  | 'noise'
-  | 'variations'
+  | 'variation'
   | 'symmetry'
-  | 'tiling'
+  | 'seamless'
   | 'hires';
 
 /**
@@ -348,6 +348,7 @@ export type AppConfig = {
   shouldFetchImages: boolean;
   disabledTabs: InvokeTabName[];
   disabledFeatures: AppFeature[];
+  disabledSDFeatures: SDFeature[];
   canRestoreDeletedImagesFromBin: boolean;
   sd: {
     iterations: {

invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx

@@ -152,6 +152,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
   } = useAppSelector(currentImageButtonsSelector);
 
   const isLightboxEnabled = useFeatureStatus('lightbox').isFeatureEnabled;
+  const isCanvasEnabled = useFeatureStatus('unifiedCanvas').isFeatureEnabled;
   const isUpscalingEnabled = useFeatureStatus('upscaling').isFeatureEnabled;
   const isFaceRestoreEnabled = useFeatureStatus('faceRestore').isFeatureEnabled;
 
@@ -429,13 +430,15 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
               >
                 {t('parameters.sendToImg2Img')}
               </IAIButton>
-              <IAIButton
+              {isCanvasEnabled && (
-                size="sm"
+                <IAIButton
-                onClick={handleSendToCanvas}
+                  size="sm"
-                leftIcon={<FaShare />}
+                  onClick={handleSendToCanvas}
-              >
+                  leftIcon={<FaShare />}
-                {t('parameters.sendToUnifiedCanvas')}
+                >
-              </IAIButton>
+                  {t('parameters.sendToUnifiedCanvas')}
+                </IAIButton>
+              )}
 
               {/* <IAIButton
                 size="sm"

invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx

@@ -104,7 +104,10 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   const toast = useToast();
 
   const { t } = useTranslation();
-  const { isFeatureEnabled: isLightboxEnabled } = useFeatureStatus('lightbox');
+
+  const isLightboxEnabled = useFeatureStatus('lightbox').isFeatureEnabled;
+  const isCanvasEnabled = useFeatureStatus('unifiedCanvas').isFeatureEnabled;
+
   const { recallSeed, recallPrompt, recallInitialImage, recallAllParameters } =
     useParameters();
 
@@ -250,9 +253,11 @@ const HoverableImage = memo((props: HoverableImageProps) => {
             >
               {t('parameters.sendToImg2Img')}
             </MenuItem>
-            <MenuItem icon={<FaShare />} onClickCapture={handleSendToCanvas}>
+            {isCanvasEnabled && (
-              {t('parameters.sendToUnifiedCanvas')}
+              <MenuItem icon={<FaShare />} onClickCapture={handleSendToCanvas}>
-            </MenuItem>
+                {t('parameters.sendToUnifiedCanvas')}
+              </MenuItem>
+            )}
             <MenuItem icon={<FaTrash />} onClickCapture={onDeleteDialogOpen}>
               {t('gallery.deleteImage')}
             </MenuItem>

invokeai/frontend/web/src/features/parameters/components/Parameters/Hires/ParamHiresCollapse.tsx

@@ -6,6 +6,7 @@ import IAICollapse from 'common/components/IAICollapse';
 import { memo } from 'react';
 import { ParamHiresStrength } from './ParamHiresStrength';
 import { setHiresFix } from 'features/parameters/store/postprocessingSlice';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 
 const ParamHiresCollapse = () => {
   const { t } = useTranslation();
@@ -13,10 +14,16 @@ const ParamHiresCollapse = () => {
     (state: RootState) => state.postprocessing.hiresFix
   );
 
+  const isHiresEnabled = useFeatureStatus('hires').isFeatureEnabled;
+
   const dispatch = useAppDispatch();
 
   const handleToggle = () => dispatch(setHiresFix(!hiresFix));
 
+  if (!isHiresEnabled) {
+    return null;
+  }
+
   return (
     <IAICollapse
       label={t('parameters.hiresOptim')}

invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseCollapse.tsx

@@ -7,9 +7,13 @@ import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setShouldUseNoiseSettings } from 'features/parameters/store/generationSlice';
 import { memo } from 'react';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 
 const ParamNoiseCollapse = () => {
   const { t } = useTranslation();
+
+  const isNoiseEnabled = useFeatureStatus('noise').isFeatureEnabled;
+
   const shouldUseNoiseSettings = useAppSelector(
     (state: RootState) => state.generation.shouldUseNoiseSettings
   );
@@ -19,6 +23,10 @@ const ParamNoiseCollapse = () => {
   const handleToggle = () =>
     dispatch(setShouldUseNoiseSettings(!shouldUseNoiseSettings));
 
+  if (!isNoiseEnabled) {
+    return null;
+  }
+
   return (
     <IAICollapse
       label={t('parameters.noiseSettings')}

invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx

@@ -9,6 +9,7 @@ import { generationSelector } from 'features/parameters/store/generationSelector
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import ParamSeamlessXAxis from './ParamSeamlessXAxis';
 import ParamSeamlessYAxis from './ParamSeamlessYAxis';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 
 const selector = createSelector(
   generationSelector,
@@ -24,10 +25,16 @@ const ParamSeamlessCollapse = () => {
   const { t } = useTranslation();
   const { shouldUseSeamless } = useAppSelector(selector);
 
+  const isSeamlessEnabled = useFeatureStatus('seamless').isFeatureEnabled;
+
   const dispatch = useAppDispatch();
 
   const handleToggle = () => dispatch(setSeamless(!shouldUseSeamless));
 
+  if (!isSeamlessEnabled) {
+    return null;
+  }
+
   return (
     <IAICollapse
       label={t('parameters.seamlessTiling')}

invokeai/frontend/web/src/features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse.tsx

@@ -8,6 +8,7 @@ import IAICollapse from 'common/components/IAICollapse';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setShouldUseSymmetry } from 'features/parameters/store/generationSlice';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 
 const ParamSymmetryCollapse = () => {
   const { t } = useTranslation();
@@ -15,10 +16,16 @@ const ParamSymmetryCollapse = () => {
     (state: RootState) => state.generation.shouldUseSymmetry
   );
 
+  const isSymmetryEnabled = useFeatureStatus('symmetry').isFeatureEnabled;
+
   const dispatch = useAppDispatch();
 
   const handleToggle = () => dispatch(setShouldUseSymmetry(!shouldUseSymmetry));
 
+  if (!isSymmetryEnabled) {
+    return null;
+  }
+
   return (
     <IAICollapse
       label={t('parameters.symmetry')}

invokeai/frontend/web/src/features/parameters/components/Parameters/Variations/ParamVariationCollapse.tsx

@@ -7,6 +7,7 @@ import { setShouldGenerateVariations } from 'features/parameters/store/generatio
 import { Flex } from '@chakra-ui/react';
 import IAICollapse from 'common/components/IAICollapse';
 import { memo } from 'react';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 
 const ParamVariationCollapse = () => {
   const { t } = useTranslation();
@@ -14,11 +15,17 @@ const ParamVariationCollapse = () => {
     (state: RootState) => state.generation.shouldGenerateVariations
   );
 
+  const isVariationEnabled = useFeatureStatus('variation').isFeatureEnabled;
+
   const dispatch = useAppDispatch();
 
   const handleToggle = () =>
     dispatch(setShouldGenerateVariations(!shouldGenerateVariations));
 
+  if (!isVariationEnabled) {
+    return null;
+  }
+
   return (
     <IAICollapse
       label={t('parameters.variations')}

invokeai/frontend/web/src/features/system/hooks/useFeatureStatus.ts

@@ -1,21 +1,40 @@
-import { AppFeature } from 'app/types/invokeai';
+import { AppFeature, SDFeature } from 'app/types/invokeai';
 import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useMemo } from 'react';
+import { InvokeTabName } from 'features/ui/store/tabMap';
+
+export const useFeatureStatus = (
+  feature: AppFeature | SDFeature | InvokeTabName
+) => {
+  const disabledTabs = useAppSelector(
+    (state: RootState) => state.config.disabledTabs
+  );
 
-export const useFeatureStatus = (feature: AppFeature) => {
   const disabledFeatures = useAppSelector(
     (state: RootState) => state.config.disabledFeatures
   );
 
+  const disabledSDFeatures = useAppSelector(
+    (state: RootState) => state.config.disabledSDFeatures
+  );
+
   const isFeatureDisabled = useMemo(
-    () => disabledFeatures.includes(feature),
+    () =>
-    [disabledFeatures, feature]
+      disabledFeatures.includes(feature as AppFeature) ||
+      disabledSDFeatures.includes(feature as SDFeature) ||
+      disabledTabs.includes(feature as InvokeTabName),
+    [disabledFeatures, disabledSDFeatures, disabledTabs, feature]
   );
 
   const isFeatureEnabled = useMemo(
-    () => !disabledFeatures.includes(feature),
+    () =>
-    [disabledFeatures, feature]
+      !(
+        disabledFeatures.includes(feature as AppFeature) ||
+        disabledSDFeatures.includes(feature as SDFeature) ||
+        disabledTabs.includes(feature as InvokeTabName)
+      ),
+    [disabledFeatures, disabledSDFeatures, disabledTabs, feature]
   );
 
   return { isFeatureDisabled, isFeatureEnabled };

invokeai/frontend/web/src/features/system/store/configSlice.ts

@@ -8,6 +8,7 @@ export const initialConfigState: AppConfig = {
   shouldFetchImages: false,
   disabledTabs: [],
   disabledFeatures: [],
+  disabledSDFeatures: [],
   canRestoreDeletedImagesFromBin: true,
   sd: {
     iterations: {