Initial Implementation - Model Conversion Frontend

invokeai/frontend/src/app/socketio/actions.ts

@@ -38,6 +38,10 @@ export const addNewModel = createAction<
 
 export const deleteModel = createAction<string>('socketio/deleteModel');
 
+export const convertToDiffusers = createAction<string>(
+  'socketio/convertToDiffusers'
+);
+
 export const requestModelChange = createAction<string>(
   'socketio/requestModelChange'
 );

invokeai/frontend/src/app/socketio/emitters.ts

@@ -178,6 +178,9 @@ const makeSocketIOEmitters = (
     emitDeleteModel: (modelName: string) => {
       socketio.emit('deleteModel', modelName);
     },
+    emitConvertToDiffusers: (modelName: string) => {
+      socketio.emit('convertToDiffusers', modelName);
+    },
     emitRequestModelChange: (modelName: string) => {
       dispatch(modelChangeRequested());
       socketio.emit('requestModelChange', modelName);

invokeai/frontend/src/app/socketio/middleware.ts

@@ -64,6 +64,7 @@ export const socketioMiddleware = () => {
       emitSearchForModels,
       emitAddNewModel,
       emitDeleteModel,
+      emitConvertToDiffusers,
       emitRequestModelChange,
       emitSaveStagingAreaImageToGallery,
       emitRequestEmptyTempFolder,
@@ -199,6 +200,11 @@ export const socketioMiddleware = () => {
         break;
       }
 
+      case 'socketio/convertToDiffusers': {
+        emitConvertToDiffusers(action.payload);
+        break;
+      }
+
       case 'socketio/requestModelChange': {
         emitRequestModelChange(action.payload);
         break;

invokeai/frontend/src/features/system/components/ModelManager/ModelList.tsx

@@ -85,6 +85,7 @@ const ModelList = () => {
             name={model.name}
             status={model.status}
             description={model.description}
+            format={model.format}
           />
         );
         if (model.format === isSelectedFilter) {
@@ -94,6 +95,7 @@ const ModelList = () => {
               name={model.name}
               status={model.status}
               description={model.description}
+              format={model.format}
             />
           );
         }
@@ -105,6 +107,7 @@ const ModelList = () => {
             name={model.name}
             status={model.status}
             description={model.description}
+            format={model.format}
           />
         );
       } else {
@@ -114,6 +117,7 @@ const ModelList = () => {
             name={model.name}
             status={model.status}
             description={model.description}
+            format={model.format}
           />
         );
       }

invokeai/frontend/src/features/system/components/ModelManager/ModelListItem.tsx

@@ -1,18 +1,27 @@
 import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
 import { Box, Button, Flex, Spacer, Text, Tooltip } from '@chakra-ui/react';
 import { ModelStatus } from 'app/invokeai';
-import { deleteModel, requestModelChange } from 'app/socketio/actions';
+import {
+  convertToDiffusers,
+  deleteModel,
+  requestModelChange,
+} from 'app/socketio/actions';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIAlertDialog from 'common/components/IAIAlertDialog';
 import IAIIconButton from 'common/components/IAIIconButton';
-import { setOpenModel } from 'features/system/store/systemSlice';
+import {
+  setIsProcessing,
+  setOpenModel,
+} from 'features/system/store/systemSlice';
 import { useTranslation } from 'react-i18next';
+import { MdSwitchLeft } from 'react-icons/md';
 
 type ModelListItemProps = {
   name: string;
   status: ModelStatus;
   description: string;
+  format: string | undefined;
 };
 
 export default function ModelListItem(props: ModelListItemProps) {
@@ -28,7 +37,7 @@ export default function ModelListItem(props: ModelListItemProps) {
 
   const dispatch = useAppDispatch();
 
-  const { name, status, description } = props;
+  const { name, status, description, format } = props;
 
   const handleChangeModel = () => {
     dispatch(requestModelChange(name));
@@ -38,6 +47,11 @@ export default function ModelListItem(props: ModelListItemProps) {
     dispatch(setOpenModel(name));
   };
 
+  const convertModelHandler = () => {
+    dispatch(setIsProcessing(true));
+    dispatch(convertToDiffusers(name));
+  };
+
   const handleModelDelete = () => {
     dispatch(deleteModel(name));
     dispatch(setOpenModel(null));
@@ -83,6 +97,7 @@ export default function ModelListItem(props: ModelListItemProps) {
         >
           {t('modelmanager:load')}
         </Button>
+
         <IAIIconButton
           icon={<EditIcon />}
           size={'sm'}
@@ -91,6 +106,16 @@ export default function ModelListItem(props: ModelListItemProps) {
           isDisabled={status === 'active' || isProcessing || !isConnected}
           className=" modal-close-btn"
         />
+        {format !== 'diffusers' && (
+          <IAIIconButton
+            icon={<MdSwitchLeft />}
+            size={'sm'}
+            onClick={convertModelHandler}
+            aria-label="Convert Model"
+            isDisabled={status === 'active' || isProcessing || !isConnected}
+            className=" modal-close-btn"
+          />
+        )}
         <IAIAlertDialog
           title={t('modelmanager:deleteModel')}
           acceptCallback={handleModelDelete}