Model Convert Component

invokeai/frontend/public/locales/modelmanager/en.json

@@ -63,5 +63,16 @@
   "formMessageDiffusersModelLocation": "Diffusers Model Location",
   "formMessageDiffusersModelLocationDesc": "Please enter at least one.",
   "formMessageDiffusersVAELocation": "VAE Location",
-  "formMessageDiffusersVAELocationDesc": "If not provided, InvokeAI will look for the VAE file inside the model location given above."
+  "formMessageDiffusersVAELocationDesc": "If not provided, InvokeAI will look for the VAE file inside the model location given above.",
+  "convert": "Convert",
+  "convertToDiffusers": "Convert To Diffusers",
+  "convertToDiffusersHelpText1": "This model will be converted to the 🧨 Diffusers format.",
+  "convertToDiffusersHelpText2": "This process will replace your Model Manager entry with the Diffusers version of the same model.",
+  "convertToDiffusersHelpText3": "Your checkpoint file on the disk will NOT be deleted or modified in anyway. You can add your checkpoint to the Model Manager again if you want to.",
+  "convertToDiffusersHelpText4": "This is a one time process only. It might take around 30s-60s depending on the specifications of your computer.",
+  "convertToDiffusersHelpText5": "This process will create a Diffusers version of this model in the same directory as your checkpoint. Please make sure you have enough disk space.",
+  "convertToDiffusersHelpText6": "Do you wish to convert this model?",
+  "inpaintingModel": "Inpainting Model",
+  "customConfig": "Custom Config",
+  "pathToCustomConfig": "Path To Custom Config"
 }

invokeai/frontend/src/app/invokeai.d.ts

@@ -219,6 +219,11 @@ export declare type InvokeDiffusersModelConfigProps = {
   };
 };
 
+export declare type InvokeModelConversionProps = {
+  name: string;
+  is_inpainting: boolean;
+};
+
 /**
  * These types type data received from the server via socketio.
  */

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

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

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

@@ -27,6 +27,7 @@ import type { InvokeModelConfigProps } from 'app/invokeai';
 import type { RootState } from 'app/store';
 import type { FieldInputProps, FormikProps } from 'formik';
 import { isEqual, pickBy } from 'lodash';
+import ModelConvert from './ModelConvert';
 
 const selector = createSelector(
   [systemSelector],
@@ -101,10 +102,11 @@ export default function CheckpointModelEdit() {
 
   return openModel ? (
     <Flex flexDirection="column" rowGap="1rem" width="100%">
-      <Flex alignItems="center">
+      <Flex alignItems="center" gap={4} justifyContent="space-between">
         <Text fontSize="lg" fontWeight="bold">
           {openModel}
         </Text>
+        <ModelConvert model={openModel} />
       </Flex>
       <Flex
         flexDirection="column"

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

@@ -0,0 +1,115 @@
+import { Flex, ListItem, Text, UnorderedList } from '@chakra-ui/react';
+import { convertToDiffusers } from 'app/socketio/actions';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
+import IAIAlertDialog from 'common/components/IAIAlertDialog';
+import IAIButton from 'common/components/IAIButton';
+import IAICheckbox from 'common/components/IAICheckbox';
+import IAIInput from 'common/components/IAIInput';
+import { setIsProcessing } from 'features/system/store/systemSlice';
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface ModelConvertProps {
+  model: string;
+}
+
+export default function ModelConvert(props: ModelConvertProps) {
+  const { model } = props;
+
+  const model_list = useAppSelector(
+    (state: RootState) => state.system.model_list
+  );
+
+  const retrievedModel = model_list[model];
+
+  const [isInpainting, setIsInpainting] = useState<boolean>(false);
+  const [customConfig, setIsCustomConfig] = useState<boolean>(false);
+
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+
+  const isProcessing = useAppSelector(
+    (state: RootState) => state.system.isProcessing
+  );
+
+  const isConnected = useAppSelector(
+    (state: RootState) => state.system.isConnected
+  );
+
+  useEffect(() => {
+    setIsInpainting(false);
+    setIsCustomConfig(false);
+  }, [model]);
+
+  const modelConvertHandler = () => {
+    dispatch(setIsProcessing(true));
+    dispatch(convertToDiffusers({ name: model, is_inpainting: isInpainting }));
+  };
+
+  return (
+    <IAIAlertDialog
+      title={`${t('modelmanager:convert')} ${model}`}
+      acceptCallback={modelConvertHandler}
+      acceptButtonText={`${t('modelmanager:convert')}`}
+      triggerComponent={
+        <IAIButton
+          size={'sm'}
+          aria-label={t('modelmanager:convertToDiffusers')}
+          isDisabled={
+            retrievedModel.status === 'active' || isProcessing || !isConnected
+          }
+          className=" modal-close-btn"
+          marginRight="2rem"
+        >
+          🧨 {t('modelmanager:convertToDiffusers')}
+        </IAIButton>
+      }
+    >
+      <Flex flexDirection="column" rowGap={4}>
+        <Text>{t('modelmanager:convertToDiffusersHelpText1')}</Text>
+        <UnorderedList>
+          <ListItem>{t('modelmanager:convertToDiffusersHelpText2')}</ListItem>
+          <ListItem>{t('modelmanager:convertToDiffusersHelpText3')}</ListItem>
+          <ListItem>{t('modelmanager:convertToDiffusersHelpText4')}</ListItem>
+          <ListItem>{t('modelmanager:convertToDiffusersHelpText5')}</ListItem>
+        </UnorderedList>
+        <Text>{t('modelmanager:convertToDiffusersHelpText6')}</Text>
+        <Flex flexDir="column" gap={4}>
+          <Flex gap={4}>
+            <IAICheckbox
+              checked={isInpainting}
+              onChange={() => {
+                setIsInpainting(!isInpainting);
+                setIsCustomConfig(false);
+              }}
+              label={t('modelmanager:inpaintingModel')}
+              isDisabled={customConfig}
+            />
+            <IAICheckbox
+              checked={customConfig}
+              onChange={() => {
+                setIsCustomConfig(!customConfig);
+                setIsInpainting(false);
+              }}
+              label={t('modelmanager:customConfig')}
+              isDisabled={isInpainting}
+            />
+          </Flex>
+          {customConfig && (
+            <Flex flexDirection="column" rowGap={2}>
+              <Text
+                fontWeight="bold"
+                fontSize="sm"
+                color="var(--text-color-secondary)"
+              >
+                {t('modelmanager:pathToCustomConfig')}
+              </Text>
+              <IAIInput width="25rem" />
+            </Flex>
+          )}
+        </Flex>
+      </Flex>
+    </IAIAlertDialog>
+  );
+}

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

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

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

@@ -1,27 +1,18 @@
 import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
 import { Box, Button, Flex, Spacer, Text, Tooltip } from '@chakra-ui/react';
 import { ModelStatus } from 'app/invokeai';
-import {
+import { deleteModel, requestModelChange } from 'app/socketio/actions';
-  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 {
+import { setOpenModel } from 'features/system/store/systemSlice';
-  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) {
@@ -37,7 +28,7 @@ export default function ModelListItem(props: ModelListItemProps) {
 
   const dispatch = useAppDispatch();
 
-  const { name, status, description, format } = props;
+  const { name, status, description } = props;
 
   const handleChangeModel = () => {
     dispatch(requestModelChange(name));
@@ -47,11 +38,6 @@ 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));
@@ -106,16 +92,6 @@ 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}