Diffusers Samplers (#2565)

- Diffusers Sampler list is independent from CKPT Sampler list. And the
app will load the correct list based on what model you have loaded.
- Isolated the activeModelSelector coz this is used in multiple places.
- Possible fix to the white screen bug that some users face. This was
happening because of a possible null in the active model list
description tag. Which should hopefully now be fixed with the new
activeModelSelector.

I'll keep tabs on the last thing. Good to go.

invokeai/frontend/dist/index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>InvokeAI - A Stable Diffusion Toolkit</title>
     <link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
-    <script type="module" crossorigin src="./assets/index.b7daf15c.js"></script>
+    <script type="module" crossorigin src="./assets/index.f3fa9388.js"></script>
     <link rel="stylesheet" href="./assets/index.1536494e.css">
     <script type="module">try{import.meta.url;import("_").catch(()=>1);}catch(e){}window.__vite_is_modern_browser=true;</script>
     <script type="module">!function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy build because dynamic import or import.meta.url is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script>
@@ -18,6 +18,6 @@
     
     <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
     <script nomodule crossorigin id="vite-legacy-polyfill" src="./assets/polyfills-legacy-dde3a68a.js"></script>
-    <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/index-legacy-7649c4ae.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+    <script nomodule crossorigin id="vite-legacy-entry" data-src="./assets/index-legacy-4add591a.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
   </body>
 </html>

invokeai/frontend/src/app/constants.ts

@@ -16,6 +16,20 @@ export const SAMPLERS: Array<string> = [
   'k_heun',
 ];
 
+// Valid Diffusers Samplers
+export const DIFFUSERS_SAMPLERS: Array<string> = [
+  'ddim',
+  'plms',
+  'k_lms',
+  'dpmpp_2',
+  'k_dpm_2',
+  'k_dpm_2_a',
+  'k_dpmpp_2',
+  'k_euler',
+  'k_euler_a',
+  'k_heun',
+];
+
 // Valid image widths
 export const WIDTHS: Array<number> = [
   64, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960,

invokeai/frontend/src/features/options/components/MainOptions/MainSampler.tsx

@@ -1,13 +1,16 @@
 import React, { ChangeEvent } from 'react';
-import { SAMPLERS } from 'app/constants';
+import { DIFFUSERS_SAMPLERS, SAMPLERS } from 'app/constants';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISelect from 'common/components/IAISelect';
 import { setSampler } from 'features/options/store/optionsSlice';
 import { useTranslation } from 'react-i18next';
+import _ from 'lodash';
+import { activeModelSelector } from 'features/system/store/systemSelectors';
 
 export default function MainSampler() {
   const sampler = useAppSelector((state: RootState) => state.options.sampler);
+  const activeModel = useAppSelector(activeModelSelector);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
@@ -19,7 +22,9 @@ export default function MainSampler() {
       label={t('options:sampler')}
       value={sampler}
       onChange={handleChangeSampler}
-      validValues={SAMPLERS}
+      validValues={
+        activeModel.format === 'diffusers' ? DIFFUSERS_SAMPLERS : SAMPLERS
+      }
       styleClass="main-option-block"
     />
   );

invokeai/frontend/src/features/system/components/ModelSelect.tsx

@@ -5,27 +5,14 @@ import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAISelect from 'common/components/IAISelect';
 import _ from 'lodash';
 import { ChangeEvent } from 'react';
-import { systemSelector } from '../store/systemSelectors';
+import { activeModelSelector, systemSelector } from '../store/systemSelectors';
 
 const selector = createSelector(
   [systemSelector],
   (system) => {
     const { isProcessing, model_list } = system;
     const models = _.map(model_list, (model, key) => key);
-    const activeModel = _.reduce(
+    return { models, isProcessing };
-      model_list,
-      (acc, model, key) => {
-        if (model.status === 'active') {
-          acc = key;
-        }
-
-        return acc;
-      },
-      ''
-    );
-    const activeDesc = model_list[activeModel].description;
-
-    return { models, activeModel, isProcessing, activeDesc };
   },
   {
     memoizeOptions: {
@@ -36,8 +23,8 @@ const selector = createSelector(
 
 const ModelSelect = () => {
   const dispatch = useAppDispatch();
-  const { models, activeModel, isProcessing, activeDesc } =
+  const { models, isProcessing } = useAppSelector(selector);
-    useAppSelector(selector);
+  const activeModel = useAppSelector(activeModelSelector);
   const handleChangeModel = (e: ChangeEvent<HTMLSelectElement>) => {
     dispatch(requestModelChange(e.target.value));
   };
@@ -50,9 +37,9 @@ const ModelSelect = () => {
     >
       <IAISelect
         style={{ fontSize: '0.8rem' }}
-        tooltip={activeDesc}
+        tooltip={activeModel.description}
         isDisabled={isProcessing}
-        value={activeModel}
+        value={activeModel.name}
         validValues={models}
         onChange={handleChangeModel}
       />

invokeai/frontend/src/features/system/store/systemSelectors.ts

@@ -1,6 +1,31 @@
+import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store';
 import { SystemState } from './systemSlice';
+import _ from 'lodash';
 
 export const systemSelector = (state: RootState): SystemState => state.system;
 
 export const toastQueueSelector = (state: RootState) => state.system.toastQueue;
+
+export const activeModelSelector = createSelector(
+  systemSelector,
+  (system) => {
+    const { model_list } = system;
+    const activeModel = _.reduce(
+      model_list,
+      (acc, model, key) => {
+        if (model.status === 'active') {
+          acc = key;
+        }
+        return acc;
+      },
+      ''
+    );
+    return { ...model_list[activeModel], name: activeModel };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
+  }
+);