File size: 3,016 Bytes
8a37e0a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | import {
Button,
ConfirmationAlertDialog,
Divider,
Flex,
ListItem,
Text,
UnorderedList,
useDisclosure,
} from '@invoke-ai/ui-library';
import { toast } from 'features/toast/toast';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useConvertModelMutation } from 'services/api/endpoints/models';
import type { CheckpointModelConfig } from 'services/api/types';
interface ModelConvertProps {
modelConfig: CheckpointModelConfig;
}
export const ModelConvertButton = memo(({ modelConfig }: ModelConvertProps) => {
const { t } = useTranslation();
const [convertModel, { isLoading }] = useConvertModelMutation();
const { isOpen, onOpen, onClose } = useDisclosure();
const modelConvertHandler = useCallback(() => {
if (!modelConfig || isLoading) {
return;
}
const toastId = `CONVERTING_MODEL_${modelConfig.key}`;
toast({
id: toastId,
title: `${t('modelManager.convertingModelBegin')}: ${modelConfig.name}`,
status: 'info',
});
convertModel(modelConfig.key)
.unwrap()
.then(() => {
toast({ id: toastId, title: `${t('modelManager.modelConverted')}: ${modelConfig.name}`, status: 'success' });
})
.catch(() => {
toast({
id: toastId,
title: `${t('modelManager.modelConversionFailed')}: ${modelConfig.name}`,
status: 'error',
});
});
}, [modelConfig, isLoading, t, convertModel]);
return (
<>
<Button
onClick={onOpen}
size="sm"
aria-label={t('modelManager.convertToDiffusers')}
className=" modal-close-btn"
isLoading={isLoading}
flexShrink={0}
>
🧨 {t('modelManager.convert')}
</Button>
<ConfirmationAlertDialog
title={`${t('modelManager.convert')} ${modelConfig.name}`}
acceptCallback={modelConvertHandler}
acceptButtonText={`${t('modelManager.convert')}`}
isOpen={isOpen}
onClose={onClose}
useInert={false}
>
<Flex flexDirection="column" rowGap={4}>
<Text fontSize="md">{t('modelManager.convertToDiffusersHelpText1')}</Text>
<UnorderedList>
<ListItem>
<Text fontSize="md">{t('modelManager.convertToDiffusersHelpText2')}</Text>
</ListItem>
<ListItem>
<Text fontSize="md">{t('modelManager.convertToDiffusersHelpText3')}</Text>
</ListItem>
<ListItem>
<Text fontSize="md">{t('modelManager.convertToDiffusersHelpText4')}</Text>
</ListItem>
<ListItem>
<Text fontSize="md">{t('modelManager.convertToDiffusersHelpText5')}</Text>
</ListItem>
</UnorderedList>
<Divider />
<Text fontSize="md">{t('modelManager.convertToDiffusersHelpText6')}</Text>
</Flex>
</ConfirmationAlertDialog>
</>
);
});
ModelConvertButton.displayName = 'ModelConvertButton';
|