feat(ui): add setting for showing model descriptions in dropdown

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",

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<T extends AnyModelConfig> = {
   getIsDisabled?: (model: T) => boolean;
   isLoading?: boolean;
   groupByType?: boolean;
-  showDescriptions?: boolean;
 };
 
 type UseGroupedModelComboboxReturn = {
@@ -38,15 +38,8 @@ export const useGroupedModelCombobox = <T extends AnyModelConfig>(
 ): 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<GroupBase<ComboboxOption>[]>(() => {
     if (!modelConfigs) {
       return [];
@@ -60,7 +53,7 @@ export const useGroupedModelCombobox = <T extends AnyModelConfig>(
           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 = <T extends AnyModelConfig>(
     );
     _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(
     () =>

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 = <T extends AnyModelConfig>(arg: UseModelComboboxArg<T>): UseModelComboboxReturn => {
   const { t } = useTranslation();
   const { modelConfigs, selectedModel, getIsDisabled, onChange, isLoading, optionsFilter = () => true } = arg;
+  const shouldShowModelDescriptions = useAppSelector(selectSystemShouldEnableModelDescriptions);
+
   const options = useMemo<ComboboxOption[]>(() => {
     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)),

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<HTMLInputElement>) => {
+      dispatch(setShouldEnableModelDescriptions(e.target.checked));
+    },
+    [dispatch]
+  );
   const handleChangeShouldUseCpuNoise = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       dispatch(shouldUseCpuNoiseChanged(e.target.checked));
@@ -226,6 +235,13 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps)
                         onChange={handleChangeShouldEnableInformationalPopovers}
                       />
                     </FormControl>
+                    <FormControl>
+                      <FormLabel>{t('settings.enableModelDescriptions')}</FormLabel>
+                      <Switch
+                        isChecked={shouldEnableModelDescriptions}
+                        onChange={handleChangeShouldEnableModelDescriptions}
+                      />
+                    </FormControl>
                   </StickyScrollable>
 
                   {Boolean(config?.shouldShowDeveloperSettings) && (

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<boolean>) {
       state.shouldEnableInformationalPopovers = action.payload;
     },
+    setShouldEnableModelDescriptions(state, action: PayloadAction<boolean>) {
+      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);

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[];