diff --git a/invokeai/frontend/web/src/app/types/invokeai.ts b/invokeai/frontend/web/src/app/types/invokeai.ts index a89ba01130..bea87e238e 100644 --- a/invokeai/frontend/web/src/app/types/invokeai.ts +++ b/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' + | 'tiEmbedding' + | 'vae'; /** * Configuration options for the InvokeAI UI. diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx index 0e41fad994..36d8795615 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx +++ b/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 ( diff --git a/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx b/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx index b5e96b6c92..774c67c09f 100644 --- a/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx +++ b/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx @@ -16,15 +16,17 @@ import { forEach } from 'lodash-es'; import { PropsWithChildren, useCallback, useMemo, useRef } from 'react'; import { useGetTextualInversionModelsQuery } from 'services/api/endpoints/models'; import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; +import { useFeatureStatus } from '../../system/hooks/useFeatureStatus'; type Props = PropsWithChildren & { onSelect: (v: string) => void; isOpen: boolean; onClose: () => void; + enabled?: boolean; }; const ParamEmbeddingPopover = (props: Props) => { - const { onSelect, isOpen, onClose, children } = props; + const { onSelect, isOpen, onClose, children, enabled } = props; const { data: embeddingQueryData } = useGetTextualInversionModelsQuery(); const inputRef = useRef(null); diff --git a/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx b/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx index 6e69f036df..436c32f46b 100644 --- a/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx +++ b/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 ( diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamModelandVAE.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamModelandVAE.tsx deleted file mode 100644 index 1c704a86ef..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamModelandVAE.tsx +++ /dev/null @@ -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 ( - - - - - - - - - ); -}; - -export default memo(ParamModelandVAE); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamModelandVAEandScheduler.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamModelandVAEandScheduler.tsx new file mode 100644 index 0000000000..a7ae38adc7 --- /dev/null +++ b/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 ( + + + + + + + {isVaeEnabled && ( + + + + )} + + + + + + ); +}; + +export default memo(ParamModelandVAEandScheduler); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamNegativeConditioning.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamNegativeConditioning.tsx index 3e5320ad47..1c849a7f2d 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamNegativeConditioning.tsx +++ b/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 isTiEmbeddingEnabled = useFeatureStatus('tiEmbedding').isFeatureEnabled; + return ( { value={negativePrompt} placeholder={t('parameters.negativePromptPlaceholder')} onChange={handleChangePrompt} - onKeyDown={handleKeyDown} resize="vertical" fontSize="sm" minH={16} + {...(isTiEmbeddingEnabled && { onKeyDown: handleKeyDown })} /> - {!isOpen && ( + {!isOpen && isTiEmbeddingEnabled && ( state.generation, activeTabNameSelector], @@ -114,6 +115,8 @@ const ParamPositiveConditioning = () => { [isReady, dispatch, activeTabName, onOpen] ); + const isTiEmbeddingEnabled = useFeatureStatus('tiEmbedding').isFeatureEnabled; + // const handleSelect = (e: MouseEvent) => { // const target = e.target as HTMLTextAreaElement; // setCaret({ start: target.selectionStart, end: target.selectionEnd }); @@ -134,13 +137,13 @@ const ParamPositiveConditioning = () => { value={prompt} placeholder={t('parameters.positivePromptPlaceholder')} onChange={handleChangePrompt} - onKeyDown={handleKeyDown} resize="vertical" minH={32} + {...(isTiEmbeddingEnabled && { onKeyDown: handleKeyDown })} /> - {!isOpen && ( + {!isOpen && isTiEmbeddingEnabled && ( { > {shouldUseSliders ? ( <> - + @@ -65,8 +64,7 @@ const ImageToImageTabCoreParameters = () => { - - + diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx index 9211e095ba..b007497db2 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx +++ b/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 ParamScheduler from 'features/parameters/components/Parameters/Core/ParamScheduler'; +import ParamModelandVAEandScheduler from 'features/parameters/components/Parameters/Core/ParamModelandVAEandScheduler'; 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 ? ( <> - + @@ -61,8 +60,7 @@ const TextToImageTabCoreParameters = () => { - - + diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx index 330cd8b31e..ecce61c218 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx +++ b/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 ParamScheduler from 'features/parameters/components/Parameters/Core/ParamScheduler'; +import ParamModelandVAEandScheduler from 'features/parameters/components/Parameters/Core/ParamModelandVAEandScheduler'; 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 ? ( <> - + @@ -62,8 +61,7 @@ const UnifiedCanvasCoreParameters = () => { - - +