From 349cc66b5956f5d6ede287101050c3dfbfee7228 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Thu, 24 Oct 2024 13:43:41 -0400 Subject: [PATCH] (ui): add setting for showing model descriptions in dropdown defaulted to true --- invokeai/frontend/web/public/locales/en.json | 3 +++ .../src/common/hooks/useGroupedModelCombobox.ts | 17 +++++------------ .../web/src/common/hooks/useModelCombobox.ts | 7 ++++++- .../components/SettingsModal/SettingsModal.tsx | 16 ++++++++++++++++ .../src/features/system/store/systemSlice.ts | 8 ++++++++ .../web/src/features/system/store/types.ts | 1 + 6 files changed, 39 insertions(+), 13 deletions(-) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index c2d5501dfed..b442cf23225 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1109,6 +1109,9 @@ "enableInformationalPopovers": "Enable Informational Popovers", "informationalPopoversDisabled": "Informational Popovers Disabled", "informationalPopoversDisabledDesc": "Informational popovers have been disabled. Enable them in Settings.", + "enableModelDescriptions": "Enable Model Descriptions in Dropdowns", + "modelDescriptionsDisabled": "Model Descriptions in Dropdowns Disabled", + "modelDescriptionsDisabledDesc": "Model descriptions in dropdowns have been disabled. Enable them in Settings.", "enableInvisibleWatermark": "Enable Invisible Watermark", "enableNSFWChecker": "Enable NSFW Checker", "general": "General", diff --git a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts index 88e84c3e221..5751c823a16 100644 --- a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts +++ b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts @@ -4,6 +4,7 @@ import { useAppSelector } from 'app/store/storeHooks'; import type { GroupBase } from 'chakra-react-select'; import { selectParamsSlice } from 'features/controlLayers/store/paramsSlice'; import type { ModelIdentifierField } from 'features/nodes/types/common'; +import { selectSystemShouldEnableModelDescriptions } from 'features/system/store/systemSlice'; import { groupBy, reduce } from 'lodash-es'; import { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -16,7 +17,6 @@ type UseGroupedModelComboboxArg = { getIsDisabled?: (model: T) => boolean; isLoading?: boolean; groupByType?: boolean; - showDescriptions?: boolean; }; type UseGroupedModelComboboxReturn = { @@ -38,15 +38,8 @@ export const useGroupedModelCombobox = ( ): UseGroupedModelComboboxReturn => { const { t } = useTranslation(); const base = useAppSelector(selectBaseWithSDXLFallback); - const { - modelConfigs, - selectedModel, - getIsDisabled, - onChange, - isLoading, - groupByType = false, - showDescriptions = false, - } = arg; + const shouldShowModelDescriptions = useAppSelector(selectSystemShouldEnableModelDescriptions); + const { modelConfigs, selectedModel, getIsDisabled, onChange, isLoading, groupByType = false } = arg; const options = useMemo[]>(() => { if (!modelConfigs) { return []; @@ -60,7 +53,7 @@ export const useGroupedModelCombobox = ( options: val.map((model) => ({ label: model.name, value: model.key, - description: (showDescriptions && model.description) || undefined, + description: (shouldShowModelDescriptions && model.description) || undefined, isDisabled: getIsDisabled ? getIsDisabled(model) : false, })), }); @@ -70,7 +63,7 @@ export const useGroupedModelCombobox = ( ); _options.sort((a) => (a.label?.split('/')[0]?.toLowerCase().includes(base) ? -1 : 1)); return _options; - }, [modelConfigs, groupByType, getIsDisabled, base, showDescriptions]); + }, [modelConfigs, groupByType, getIsDisabled, base, shouldShowModelDescriptions]); const value = useMemo( () => diff --git a/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts b/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts index d57ef483373..29ff7dfd5e5 100644 --- a/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts +++ b/invokeai/frontend/web/src/common/hooks/useModelCombobox.ts @@ -1,5 +1,7 @@ import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library'; +import { useAppSelector } from 'app/store/storeHooks'; import type { ModelIdentifierField } from 'features/nodes/types/common'; +import { selectSystemShouldEnableModelDescriptions } from 'features/system/store/systemSlice'; import { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import type { AnyModelConfig } from 'services/api/types'; @@ -24,13 +26,16 @@ type UseModelComboboxReturn = { export const useModelCombobox = (arg: UseModelComboboxArg): UseModelComboboxReturn => { const { t } = useTranslation(); const { modelConfigs, selectedModel, getIsDisabled, onChange, isLoading, optionsFilter = () => true } = arg; + const shouldShowModelDescriptions = useAppSelector(selectSystemShouldEnableModelDescriptions); + const options = useMemo(() => { return modelConfigs.filter(optionsFilter).map((model) => ({ label: model.name, value: model.key, + description: (shouldShowModelDescriptions && model.description) || undefined, isDisabled: getIsDisabled ? getIsDisabled(model) : false, })); - }, [optionsFilter, getIsDisabled, modelConfigs]); + }, [optionsFilter, getIsDisabled, modelConfigs, shouldShowModelDescriptions]); const value = useMemo( () => options.find((m) => (selectedModel ? m.value === selectedModel.key : false)), diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx index 903819f7e16..00e28630065 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx @@ -31,10 +31,12 @@ import { selectSystemShouldConfirmOnDelete, selectSystemShouldConfirmOnNewSession, selectSystemShouldEnableInformationalPopovers, + selectSystemShouldEnableModelDescriptions, selectSystemShouldUseNSFWChecker, selectSystemShouldUseWatermarker, setShouldConfirmOnDelete, setShouldEnableInformationalPopovers, + setShouldEnableModelDescriptions, shouldAntialiasProgressImageChanged, shouldConfirmOnNewSessionToggled, shouldUseNSFWCheckerChanged, @@ -99,6 +101,7 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps) const shouldUseNSFWChecker = useAppSelector(selectSystemShouldUseNSFWChecker); const shouldUseWatermarker = useAppSelector(selectSystemShouldUseWatermarker); const shouldEnableInformationalPopovers = useAppSelector(selectSystemShouldEnableInformationalPopovers); + const shouldEnableModelDescriptions = useAppSelector(selectSystemShouldEnableModelDescriptions); const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession); const onToggleConfirmOnNewSession = useCallback(() => { dispatch(shouldConfirmOnNewSessionToggled()); @@ -154,6 +157,12 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps) }, [dispatch] ); + const handleChangeShouldEnableModelDescriptions = useCallback( + (e: ChangeEvent) => { + dispatch(setShouldEnableModelDescriptions(e.target.checked)); + }, + [dispatch] + ); const handleChangeShouldUseCpuNoise = useCallback( (e: ChangeEvent) => { dispatch(shouldUseCpuNoiseChanged(e.target.checked)); @@ -226,6 +235,13 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps) onChange={handleChangeShouldEnableInformationalPopovers} /> + + {t('settings.enableModelDescriptions')} + + {Boolean(config?.shouldShowDeveloperSettings) && ( diff --git a/invokeai/frontend/web/src/features/system/store/systemSlice.ts b/invokeai/frontend/web/src/features/system/store/systemSlice.ts index 1ae49f592be..e45308bcdaf 100644 --- a/invokeai/frontend/web/src/features/system/store/systemSlice.ts +++ b/invokeai/frontend/web/src/features/system/store/systemSlice.ts @@ -17,6 +17,7 @@ const initialSystemState: SystemState = { shouldUseNSFWChecker: false, shouldUseWatermarker: false, shouldEnableInformationalPopovers: true, + shouldEnableModelDescriptions: true, logIsEnabled: true, logLevel: 'debug', logNamespaces: [...zLogNamespace.options], @@ -57,6 +58,9 @@ export const systemSlice = createSlice({ setShouldEnableInformationalPopovers(state, action: PayloadAction) { state.shouldEnableInformationalPopovers = action.payload; }, + setShouldEnableModelDescriptions(state, action: PayloadAction) { + state.shouldEnableModelDescriptions = action.payload; + }, shouldConfirmOnNewSessionToggled(state) { state.shouldConfirmOnNewSession = !state.shouldConfirmOnNewSession; }, @@ -73,6 +77,7 @@ export const { shouldUseNSFWCheckerChanged, shouldUseWatermarkerChanged, setShouldEnableInformationalPopovers, + setShouldEnableModelDescriptions, shouldConfirmOnNewSessionToggled, } = systemSlice.actions; @@ -108,4 +113,7 @@ export const selectSystemShouldAntialiasProgressImage = createSystemSelector( export const selectSystemShouldEnableInformationalPopovers = createSystemSelector( (system) => system.shouldEnableInformationalPopovers ); +export const selectSystemShouldEnableModelDescriptions = createSystemSelector( + (system) => system.shouldEnableModelDescriptions +); export const selectSystemShouldConfirmOnNewSession = createSystemSelector((system) => system.shouldConfirmOnNewSession); diff --git a/invokeai/frontend/web/src/features/system/store/types.ts b/invokeai/frontend/web/src/features/system/store/types.ts index 4045e22bb51..1bbe7095367 100644 --- a/invokeai/frontend/web/src/features/system/store/types.ts +++ b/invokeai/frontend/web/src/features/system/store/types.ts @@ -37,6 +37,7 @@ export interface SystemState { shouldUseNSFWChecker: boolean; shouldUseWatermarker: boolean; shouldEnableInformationalPopovers: boolean; + shouldEnableModelDescriptions: boolean; logIsEnabled: boolean; logLevel: LogLevel; logNamespaces: LogNamespace[];