Adds initial model switching UI

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;