diff --git a/invokeai/frontend/src/app/socketio/actions.ts b/invokeai/frontend/src/app/socketio/actions.ts index 35c9955def..7f0dbcfb8d 100644 --- a/invokeai/frontend/src/app/socketio/actions.ts +++ b/invokeai/frontend/src/app/socketio/actions.ts @@ -38,6 +38,10 @@ export const addNewModel = createAction< export const deleteModel = createAction('socketio/deleteModel'); +export const convertToDiffusers = createAction( + 'socketio/convertToDiffusers' +); + export const requestModelChange = createAction( 'socketio/requestModelChange' ); diff --git a/invokeai/frontend/src/app/socketio/emitters.ts b/invokeai/frontend/src/app/socketio/emitters.ts index bc90f9c58b..501450deb2 100644 --- a/invokeai/frontend/src/app/socketio/emitters.ts +++ b/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); diff --git a/invokeai/frontend/src/app/socketio/middleware.ts b/invokeai/frontend/src/app/socketio/middleware.ts index c8dd0d4c29..4d3549da4e 100644 --- a/invokeai/frontend/src/app/socketio/middleware.ts +++ b/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; diff --git a/invokeai/frontend/src/features/system/components/ModelManager/ModelList.tsx b/invokeai/frontend/src/features/system/components/ModelManager/ModelList.tsx index fc2adae357..5f7e45197a 100644 --- a/invokeai/frontend/src/features/system/components/ModelManager/ModelList.tsx +++ b/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} /> ); } diff --git a/invokeai/frontend/src/features/system/components/ModelManager/ModelListItem.tsx b/invokeai/frontend/src/features/system/components/ModelManager/ModelListItem.tsx index 398b61c634..671465ed31 100644 --- a/invokeai/frontend/src/features/system/components/ModelManager/ModelListItem.tsx +++ b/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')} + } size={'sm'} @@ -91,6 +106,16 @@ export default function ModelListItem(props: ModelListItemProps) { isDisabled={status === 'active' || isProcessing || !isConnected} className=" modal-close-btn" /> + {format !== 'diffusers' && ( + } + size={'sm'} + onClick={convertModelHandler} + aria-label="Convert Model" + isDisabled={status === 'active' || isProcessing || !isConnected} + className=" modal-close-btn" + /> + )}