Adds initial model switching UI

frontend/src/app/invokeai.d.ts

@@ -142,8 +142,16 @@ export declare type SystemConfig = {
   model_hash: string;
   app_id: string;
   app_version: string;
+  available_models?: ModelList;
 };
 
+export declare type Model = {
+  status: 'active' | 'cached' | 'not loaded';
+  description: string;
+};
+
+export declare type ModelList = Record<string, Model>;
+
 /**
  * These types type data received from the server via socketio.
  */

frontend/src/app/socketio/actions.ts

@@ -30,3 +30,5 @@ export const uploadMaskImage = createAction<File>('socketio/uploadMaskImage');
 export const requestSystemConfig = createAction<undefined>(
   'socketio/requestSystemConfig'
 );
+
+export const setModel = createAction<string>('socketio/setModel');

frontend/src/app/socketio/emitters.ts

@@ -177,6 +177,9 @@ const makeSocketIOEmitters = (
     emitRequestSystemConfig: () => {
       socketio.emit('requestSystemConfig');
     },
+    emitSetModel: (modelName: string) => {
+      socketio.emit('setModel', modelName);
+    },
   };
 };
 

frontend/src/app/socketio/middleware.ts

@@ -59,6 +59,7 @@ export const socketioMiddleware = () => {
       emitUploadInitialImage,
       emitUploadMaskImage,
       emitRequestSystemConfig,
+      emitSetModel,
     } = makeSocketIOEmitters(store, socketio);
 
     /**
@@ -169,6 +170,11 @@ export const socketioMiddleware = () => {
         emitRequestSystemConfig();
         break;
       }
+
+      case 'socketio/setModel': {
+        emitSetModel(action.payload);
+        break;
+      }
     }
 
     next(action);

frontend/src/features/system/SettingsModal/SettingsModal.tsx

@@ -13,9 +13,11 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { isEqual } from 'lodash';
-import { cloneElement, ReactElement } from 'react';
-import { RootState, useAppSelector } from '../../../app/store';
+import _, { isEqual } from 'lodash';
+import { ChangeEvent, cloneElement, ReactElement } from 'react';
+import { setModel } from '../../../app/socketio/actions';
+import { RootState, useAppDispatch, useAppSelector } from '../../../app/store';
+import IAISelect from '../../../common/components/IAISelect';
 import { persistor } from '../../../main';
 import {
   setShouldConfirmOnDelete,
@@ -32,11 +34,15 @@ const systemSelector = createSelector(
       shouldDisplayInProgress,
       shouldConfirmOnDelete,
       shouldDisplayGuides,
+      available_models,
     } = system;
     return {
       shouldDisplayInProgress,
       shouldConfirmOnDelete,
       shouldDisplayGuides,
+      models: available_models
+        ? _.map(available_models, (model, key) => key)
+        : [],
     };
   },
   {
@@ -56,6 +62,7 @@ type SettingsModalProps = {
  * Secondary post-reset modal is included here.
  */
 const SettingsModal = ({ children }: SettingsModalProps) => {
+  const dispatch = useAppDispatch();
   const {
     isOpen: isSettingsModalOpen,
     onOpen: onSettingsModalOpen,
@@ -72,6 +79,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
     shouldDisplayInProgress,
     shouldConfirmOnDelete,
     shouldDisplayGuides,
+    models,
   } = useAppSelector(systemSelector);
 
   /**
@@ -85,6 +93,10 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
     });
   };
 
+  const handleChangeModel = (e: ChangeEvent<HTMLSelectElement>) => {
+    dispatch(setModel(e.target.value));
+  };
+
   return (
     <>
       {cloneElement(children, {
@@ -97,6 +109,11 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
           <ModalHeader className="settings-modal-header">Settings</ModalHeader>
           <ModalCloseButton />
           <ModalBody className="settings-modal-content">
+            <IAISelect
+              label="Model"
+              validValues={models}
+              onChange={handleChangeModel}
+            />
             <div className="settings-modal-items">
               <SettingsModalItem
                 settingTitle="Display In-Progress Images (slower)"

frontend/src/features/system/systemSlice.ts

@@ -35,6 +35,7 @@ export interface SystemState
   currentStatusHasSteps: boolean;
   shouldDisplayGuides: boolean;
   wasErrorSeen: boolean;
+  available_models?: InvokeAI.ModelList;
 }
 
 const initialSystemState = {
@@ -140,7 +141,10 @@ export const systemSlice = createSlice({
       state.openAccordions = action.payload;
     },
     setSystemConfig: (state, action: PayloadAction<InvokeAI.SystemConfig>) => {
-      return { ...state, ...action.payload };
+      return {
+        ...state,
+        ...action.payload,
+      };
     },
     setShouldDisplayGuides: (state, action: PayloadAction<boolean>) => {
       state.shouldDisplayGuides = action.payload;