Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Model Convert Component

Browse Source
This commit is contained in:
blessedcoolant 2023-02-11 20:41:49 +13:00
parent 94c31f672f
commit 6e52ca3307
7 changed files with 142 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/public/locales/modelmanager/en.json
View File

@ -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"
}

5
invokeai/frontend/src/app/invokeai.d.ts vendored
View File

@ -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.
*/

7
invokeai/frontend/src/app/socketio/actions.ts
View File

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

4
invokeai/frontend/src/features/system/components/ModelManager/CheckpointModelEdit.tsx
View File

@ -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"

115
invokeai/frontend/src/features/system/components/ModelManager/ModelConvert.tsx Normal file
View File

@ -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>
);
}

4
invokeai/frontend/src/features/system/components/ModelManager/ModelList.tsx
View File

@ -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}
/>
);
}

30
invokeai/frontend/src/features/system/components/ModelManager/ModelListItem.tsx
View File

@ -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 {
convertToDiffusers,
deleteModel,
requestModelChange,
} from 'app/socketio/actions';
import { 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 {
setIsProcessing,
setOpenModel,
} from 'features/system/store/systemSlice';
import { 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}