feat: Add setting to hide / display schedulers

invokeai/frontend/web/public/locales/en.json

@@ -540,7 +540,10 @@
         "consoleLogLevel": "Log Level",
         "shouldLogToConsole": "Console Logging",
         "developer": "Developer",
-        "general": "General"
+        "general": "General",
+        "generation": "Generation",
+        "ui": "User Interface",
+        "availableSchedulers": "Available Schedulers"
     },
     "toast": {
         "serverError": "Server Error",

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

@@ -1,30 +1,24 @@
 // TODO: use Enums?
 
-export const DIFFUSERS_SCHEDULERS: Array<string> = [
+export const SCHEDULERS: Array<string> = [
   'ddim',
-  'ddpm',
-  'deis',
   'lms',
-  'pndm',
-  'heun',
-  'heun_k',
   'euler',
   'euler_k',
   'euler_a',
-  'kdpm_2',
-  'kdpm_2_a',
   'dpmpp_2s',
   'dpmpp_2m',
   'dpmpp_2m_k',
+  'kdpm_2',
+  'kdpm_2_a',
+  'deis',
+  'ddpm',
+  'pndm',
+  'heun',
+  'heun_k',
   'unipc',
 ];
 
-export const IMG2IMG_DIFFUSERS_SCHEDULERS = DIFFUSERS_SCHEDULERS.filter(
-  (scheduler) => {
-    return scheduler !== 'dpmpp_2s';
-  }
-);
-
 // Valid image widths
 export const WIDTHS: Array<number> = Array.from(Array(64)).map(
   (_x, i) => (i + 1) * 64

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

@@ -1,7 +1,3 @@
-import {
-  DIFFUSERS_SCHEDULERS,
-  IMG2IMG_DIFFUSERS_SCHEDULERS,
-} from 'app/constants';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAISelect from 'common/components/IAISelect';
@@ -17,6 +13,12 @@ const ParamSampler = () => {
 
   const activeTabName = useAppSelector(activeTabNameSelector);
 
+  const schedulers = useAppSelector((state: RootState) => state.ui.schedulers);
+
+  const img2imgSchedulers = schedulers.filter((scheduler) => {
+    return !['dpmpp_2s'].includes(scheduler);
+  });
+
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
@@ -31,9 +33,9 @@ const ParamSampler = () => {
       value={sampler}
       onChange={handleChange}
       validValues={
-        activeTabName === 'img2img' || activeTabName == 'unifiedCanvas'
-          ? IMG2IMG_DIFFUSERS_SCHEDULERS
-          : DIFFUSERS_SCHEDULERS
+        ['img2img', 'unifiedCanvas'].includes(activeTabName)
+          ? img2imgSchedulers
+          : schedulers
       }
       minWidth={36}
     />

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -40,6 +40,7 @@ import { useTranslation } from 'react-i18next';
 import { VALID_LOG_LEVELS } from 'app/logging/useLogger';
 import { LogLevelName } from 'roarr';
 import { LOCALSTORAGE_KEYS, LOCALSTORAGE_PREFIX } from 'app/store/constants';
+import SettingsSchedulers from './SettingsSchedulers';
 
 const selector = createSelector(
   [systemSelector, uiSelector],
@@ -171,7 +172,6 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
             <Flex sx={{ gap: 4, flexDirection: 'column' }}>
               <Flex sx={modalSectionStyles}>
                 <Heading size="sm">{t('settings.general')}</Heading>
-
                 <IAISwitch
                   label={t('settings.confirmOnDelete')}
                   isChecked={shouldConfirmOnDelete}
@@ -179,6 +179,15 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
                     dispatch(setShouldConfirmOnDelete(e.target.checked))
                   }
                 />
+              </Flex>
+
+              <Flex sx={modalSectionStyles}>
+                <Heading size="sm">{t('settings.generation')}</Heading>
+                <SettingsSchedulers />
+              </Flex>
+
+              <Flex sx={modalSectionStyles}>
+                <Heading size="sm">{t('settings.ui')}</Heading>
                 <IAISwitch
                   label={t('settings.displayHelpIcons')}
                   isChecked={shouldDisplayGuides}

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsSchedulers.tsx

@@ -0,0 +1,59 @@
+import {
+  Menu,
+  MenuButton,
+  MenuItemOption,
+  MenuList,
+  MenuOptionGroup,
+} from '@chakra-ui/react';
+import { SCHEDULERS } from 'app/constants';
+
+import { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIButton from 'common/components/IAIButton';
+import { setSchedulers } from 'features/ui/store/uiSlice';
+import { isArray } from 'lodash-es';
+
+import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function SettingsSchedulers() {
+  const schedulers = useAppSelector((state: RootState) => state.ui.schedulers);
+
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+
+  const schedulerSettingsHandler = (v: string | string[]) => {
+    if (isArray(v)) dispatch(setSchedulers(v.sort()));
+  };
+
+  const renderSchedulerMenuItems = () => {
+    const schedulerMenuItemsToRender: ReactNode[] = [];
+
+    SCHEDULERS.forEach((scheduler) => {
+      schedulerMenuItemsToRender.push(
+        <MenuItemOption key={scheduler} value={scheduler}>
+          {scheduler}
+        </MenuItemOption>
+      );
+    });
+
+    return schedulerMenuItemsToRender;
+  };
+
+  return (
+    <Menu closeOnSelect={false}>
+      <MenuButton as={IAIButton}>
+        {t('settings.availableSchedulers')}
+      </MenuButton>
+      <MenuList minWidth="480px" maxHeight="39vh" overflowY="scroll">
+        <MenuOptionGroup
+          value={schedulers}
+          type="checkbox"
+          onChange={schedulerSettingsHandler}
+        >
+          {renderSchedulerMenuItems()}
+        </MenuOptionGroup>
+      </MenuList>
+    </Menu>
+  );
+}

invokeai/frontend/web/src/features/ui/store/uiSlice.ts

@@ -5,6 +5,7 @@ import { InvokeTabName, tabMap } from './tabMap';
 import { AddNewModelType, Coordinates, Rect, UIState } from './uiTypes';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { initialImageChanged } from 'features/parameters/store/generationSlice';
+import { SCHEDULERS } from 'app/constants';
 
 export const initialUIState: UIState = {
   activeTab: 0,
@@ -27,6 +28,7 @@ export const initialUIState: UIState = {
   shouldShowProgressImages: false,
   shouldShowProgressInViewer: false,
   shouldShowImageParameters: false,
+  schedulers: SCHEDULERS,
 };
 
 export const uiSlice = createSlice({
@@ -146,6 +148,10 @@ export const uiSlice = createSlice({
     ) => {
       state.shouldShowImageParameters = action.payload;
     },
+    setSchedulers: (state, action: PayloadAction<string[]>) => {
+      state.schedulers = [];
+      state.schedulers = action.payload;
+    },
   },
   extraReducers(builder) {
     builder.addCase(initialImageChanged, (state) => {
@@ -179,6 +185,7 @@ export const {
   setShouldShowProgressImages,
   setShouldShowProgressInViewer,
   shouldShowImageParametersChanged,
+  setSchedulers,
 } = uiSlice.actions;
 
 export default uiSlice.reducer;

invokeai/frontend/web/src/features/ui/store/uiTypes.ts

@@ -33,4 +33,5 @@ export interface UIState {
   shouldShowProgressImages: boolean;
   shouldShowProgressInViewer: boolean;
   shouldShowImageParameters: boolean;
+  schedulers: string[];
 }