Update model select to use new active model selector

Hopefully this also fixes the white screen error that some users face.

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(
-      model_list,
-      (acc, model, key) => {
-        if (model.status === 'active') {
-          acc = key;
-        }
-
-        return acc;
-      },
-      ''
-    );
-    const activeDesc = model_list[activeModel].description;
-
-    return { models, activeModel, isProcessing, activeDesc };
+    return { models, isProcessing };
   },
   {
     memoizeOptions: {
@@ -36,8 +23,8 @@ const selector = createSelector(
 
 const ModelSelect = () => {
   const dispatch = useAppDispatch();
-  const { models, activeModel, isProcessing, activeDesc } =
-    useAppSelector(selector);
+  const { models, isProcessing } = 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}
       />