add ability to disable lora, ti, dynamic prompts, vae selection (#3677)

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

@@ -93,7 +93,8 @@ export type AppFeature =
   | 'discordLink'
   | 'bugLink'
   | 'localization'
-  | 'consoleLogging';
+  | 'consoleLogging'
+  | 'dynamicPrompting';
 
 /**
  * A disable-able Stable Diffusion feature
@@ -104,7 +105,10 @@ export type SDFeature =
   | 'variation'
   | 'symmetry'
   | 'seamless'
-  | 'hires';
+  | 'hires'
+  | 'lora'
+  | 'embedding'
+  | 'vae';
 
 /**
  * Configuration options for the InvokeAI UI.

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx

@@ -7,6 +7,7 @@ import IAICollapse from 'common/components/IAICollapse';
 import ParamDynamicPromptsCombinatorial from './ParamDynamicPromptsCombinatorial';
 import ParamDynamicPromptsToggle from './ParamDynamicPromptsEnabled';
 import ParamDynamicPromptsMaxPrompts from './ParamDynamicPromptsMaxPrompts';
+import { useFeatureStatus } from '../../system/hooks/useFeatureStatus';
 
 const selector = createSelector(
   stateSelector,
@@ -21,6 +22,13 @@ const selector = createSelector(
 const ParamDynamicPromptsCollapse = () => {
   const { activeLabel } = useAppSelector(selector);
 
+  const isDynamicPromptingEnabled =
+    useFeatureStatus('dynamicPrompting').isFeatureEnabled;
+
+  if (!isDynamicPromptingEnabled) {
+    return null;
+  }
+
   return (
     <IAICollapse label="Dynamic Prompts" activeLabel={activeLabel}>
       <Flex sx={{ gap: 2, flexDir: 'column' }}>

invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx

@@ -8,6 +8,7 @@ import { size } from 'lodash-es';
 import { memo } from 'react';
 import ParamLoraList from './ParamLoraList';
 import ParamLoraSelect from './ParamLoraSelect';
+import { useFeatureStatus } from '../../system/hooks/useFeatureStatus';
 
 const selector = createSelector(
   stateSelector,
@@ -23,6 +24,12 @@ const selector = createSelector(
 const ParamLoraCollapse = () => {
   const { activeLabel } = useAppSelector(selector);
 
+  const isLoraEnabled = useFeatureStatus('lora').isFeatureEnabled;
+
+  if (!isLoraEnabled) {
+    return null;
+  }
+
   return (
     <IAICollapse label={'LoRA'} activeLabel={activeLabel}>
       <Flex sx={{ flexDir: 'column', gap: 2 }}>

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamModelandVAE.tsx

@@ -1,19 +0,0 @@
-import { Box, Flex } from '@chakra-ui/react';
-import ModelSelect from 'features/system/components/ModelSelect';
-import VAESelect from 'features/system/components/VAESelect';
-import { memo } from 'react';
-
-const ParamModelandVAE = () => {
-  return (
-    <Flex gap={3} w="full">
-      <Box w="full">
-        <ModelSelect />
-      </Box>
-      <Box w="full">
-        <VAESelect />
-      </Box>
-    </Flex>
-  );
-};
-
-export default memo(ParamModelandVAE);

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamModelandVAEandScheduler.tsx

@@ -0,0 +1,31 @@
+import { Box, Flex } from '@chakra-ui/react';
+import ModelSelect from 'features/system/components/ModelSelect';
+import VAESelect from 'features/system/components/VAESelect';
+import { memo } from 'react';
+import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
+import ParamScheduler from './ParamScheduler';
+
+const ParamModelandVAEandScheduler = () => {
+  const isVaeEnabled = useFeatureStatus('vae').isFeatureEnabled;
+
+  return (
+    <Flex gap={3} w="full" flexWrap={isVaeEnabled ? 'wrap' : 'nowrap'}>
+      <Flex gap={3} w="full">
+        <Box w="full">
+          <ModelSelect />
+        </Box>
+
+        {isVaeEnabled && (
+          <Box w="full">
+            <VAESelect />
+          </Box>
+        )}
+      </Flex>
+      <Box w="full">
+        <ParamScheduler />
+      </Box>
+    </Flex>
+  );
+};
+
+export default memo(ParamModelandVAEandScheduler);

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamNegativeConditioning.tsx

@@ -8,6 +8,7 @@ import { setNegativePrompt } from 'features/parameters/store/generationSlice';
 import { ChangeEvent, KeyboardEvent, useCallback, useRef } from 'react';
 import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
+import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
 
 const ParamNegativeConditioning = () => {
   const negativePrompt = useAppSelector(
@@ -71,6 +72,8 @@ const ParamNegativeConditioning = () => {
     [dispatch, onClose, negativePrompt]
   );
 
+  const isEmbeddingEnabled = useFeatureStatus('embedding').isFeatureEnabled;
+
   return (
     <FormControl>
       <ParamEmbeddingPopover
@@ -85,13 +88,13 @@ const ParamNegativeConditioning = () => {
           value={negativePrompt}
           placeholder={t('parameters.negativePromptPlaceholder')}
           onChange={handleChangePrompt}
-          onKeyDown={handleKeyDown}
           resize="vertical"
           fontSize="sm"
           minH={16}
+          {...(isEmbeddingEnabled && { onKeyDown: handleKeyDown })}
         />
       </ParamEmbeddingPopover>
-      {!isOpen && (
+      {!isOpen && isEmbeddingEnabled && (
         <Box
           sx={{
             position: 'absolute',

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx

@@ -19,6 +19,7 @@ import { isEqual } from 'lodash-es';
 import { flushSync } from 'react-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
+import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
 
 const promptInputSelector = createSelector(
   [stateSelector, activeTabNameSelector],
@@ -101,6 +102,8 @@ const ParamPositiveConditioning = () => {
     [dispatch, onClose, prompt]
   );
 
+  const isEmbeddingEnabled = useFeatureStatus('embedding').isFeatureEnabled;
+
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLTextAreaElement>) => {
       if (e.key === 'Enter' && e.shiftKey === false && isReady) {
@@ -108,11 +111,11 @@ const ParamPositiveConditioning = () => {
         dispatch(clampSymmetrySteps());
         dispatch(userInvoked(activeTabName));
       }
-      if (e.key === '<') {
+      if (isEmbeddingEnabled && e.key === '<') {
         onOpen();
       }
     },
-    [isReady, dispatch, activeTabName, onOpen]
+    [isReady, dispatch, activeTabName, onOpen, isEmbeddingEnabled]
   );
 
   // const handleSelect = (e: MouseEvent<HTMLTextAreaElement>) => {
@@ -141,7 +144,7 @@ const ParamPositiveConditioning = () => {
           />
         </ParamEmbeddingPopover>
       </FormControl>
-      {!isOpen && (
+      {!isOpen && isEmbeddingEnabled && (
         <Box
           sx={{
             position: 'absolute',

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx

@@ -6,8 +6,7 @@ import IAICollapse from 'common/components/IAICollapse';
 import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
 import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight';
 import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
-import ParamModelandVAE from 'features/parameters/components/Parameters/Core/ParamModelandVAE';
+import ParamModelandVAEandScheduler from 'features/parameters/components/Parameters/Core/ParamModelandVAEandScheduler';
-import ParamScheduler from 'features/parameters/components/Parameters/Core/ParamScheduler';
 import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
 import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth';
 import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
@@ -48,7 +47,7 @@ const ImageToImageTabCoreParameters = () => {
       >
         {shouldUseSliders ? (
           <>
-            <ParamModelandVAE />
+            <ParamModelandVAEandScheduler />
             <Box pt={2}>
               <ParamSeedFull />
             </Box>
@@ -65,8 +64,7 @@ const ImageToImageTabCoreParameters = () => {
               <ParamSteps />
               <ParamCFGScale />
             </Flex>
-            <ParamModelandVAE />
+            <ParamModelandVAEandScheduler />
-            <ParamScheduler />
             <Box pt={2}>
               <ParamSeedFull />
             </Box>

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx

@@ -7,8 +7,7 @@ import IAICollapse from 'common/components/IAICollapse';
 import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
 import ParamHeight from 'features/parameters/components/Parameters/Core/ParamHeight';
 import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
-import ParamModelandVAE from 'features/parameters/components/Parameters/Core/ParamModelandVAE';
+import ParamModelandVAEandScheduler from 'features/parameters/components/Parameters/Core/ParamModelandVAEandScheduler';
-import ParamScheduler from 'features/parameters/components/Parameters/Core/ParamScheduler';
 import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
 import ParamWidth from 'features/parameters/components/Parameters/Core/ParamWidth';
 import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
@@ -44,7 +43,7 @@ const TextToImageTabCoreParameters = () => {
       >
         {shouldUseSliders ? (
           <>
-            <ParamModelandVAE />
+            <ParamModelandVAEandScheduler />
             <Box pt={2}>
               <ParamSeedFull />
             </Box>
@@ -61,8 +60,7 @@ const TextToImageTabCoreParameters = () => {
               <ParamSteps />
               <ParamCFGScale />
             </Flex>
-            <ParamModelandVAE />
+            <ParamModelandVAEandScheduler />
-            <ParamScheduler />
             <Box pt={2}>
               <ParamSeedFull />
             </Box>

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx

@@ -8,8 +8,7 @@ import ParamBoundingBoxHeight from 'features/parameters/components/Parameters/Ca
 import ParamBoundingBoxWidth from 'features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth';
 import ParamCFGScale from 'features/parameters/components/Parameters/Core/ParamCFGScale';
 import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
-import ParamModelandVAE from 'features/parameters/components/Parameters/Core/ParamModelandVAE';
+import ParamModelandVAEandScheduler from 'features/parameters/components/Parameters/Core/ParamModelandVAEandScheduler';
-import ParamScheduler from 'features/parameters/components/Parameters/Core/ParamScheduler';
 import ParamSteps from 'features/parameters/components/Parameters/Core/ParamSteps';
 import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength';
 import ParamSeedFull from 'features/parameters/components/Parameters/Seed/ParamSeedFull';
@@ -45,7 +44,7 @@ const UnifiedCanvasCoreParameters = () => {
       >
         {shouldUseSliders ? (
           <>
-            <ParamModelandVAE />
+            <ParamModelandVAEandScheduler />
             <Box pt={2}>
               <ParamSeedFull />
             </Box>
@@ -62,8 +61,7 @@ const UnifiedCanvasCoreParameters = () => {
               <ParamSteps />
               <ParamCFGScale />
             </Flex>
-            <ParamModelandVAE />
+            <ParamModelandVAEandScheduler />
-            <ParamScheduler />
             <Box pt={2}>
               <ParamSeedFull />
             </Box>