mirror of
https://github.com/invoke-ai/InvokeAI.git
synced 2026-04-23 03:00:31 -04:00
confirmation before downloading starter bundle
This commit is contained in:
committed by
psychedelicious
parent
f3554b4e1b
commit
bb4a50bab2
@@ -873,6 +873,9 @@
|
||||
"install": "Install",
|
||||
"installAll": "Install All",
|
||||
"installRepo": "Install Repo",
|
||||
"installBundle": "Install Bundle",
|
||||
"installBundleMsg1": "Are you sure you want to install the {{bundleName}} bundle?",
|
||||
"installBundleMsg2": "This bundle will install the following {{count}} models:",
|
||||
"ipAdapters": "IP Adapters",
|
||||
"learnMoreAboutSupportedModels": "Learn more about the models we support",
|
||||
"load": "Load",
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
|
||||
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
|
||||
import { map } from 'es-toolkit/compat';
|
||||
import { setInstallModelsTabByName } from 'features/modelManagerV2/store/installModelsStore';
|
||||
import { StarterBundleButton } from 'features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterBundle';
|
||||
import { StarterBundleButton } from 'features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterBundleButton';
|
||||
import { StarterBundleTooltipContentCompact } from 'features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterBundleTooltipContentCompact';
|
||||
import { memo, useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
import type { ButtonProps } from '@invoke-ai/ui-library';
|
||||
import { Button } from '@invoke-ai/ui-library';
|
||||
import { useStarterBundleInstall } from 'features/modelManagerV2/hooks/useStarterBundleInstall';
|
||||
import { useStarterBundleInstallStatus } from 'features/modelManagerV2/hooks/useStarterBundleInstallStatus';
|
||||
import { useCallback } from 'react';
|
||||
import type { S } from 'services/api/types';
|
||||
|
||||
export const StarterBundleButton = ({ bundle, ...rest }: { bundle: S['StarterModelBundle'] } & ButtonProps) => {
|
||||
const { installBundle } = useStarterBundleInstall();
|
||||
const { install } = useStarterBundleInstallStatus(bundle);
|
||||
|
||||
const handleClickBundle = useCallback(() => {
|
||||
installBundle(bundle);
|
||||
}, [installBundle, bundle]);
|
||||
|
||||
return (
|
||||
<Button onClick={handleClickBundle} isDisabled={install.length === 0} {...rest}>
|
||||
{bundle.name}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,53 @@
|
||||
import type { ButtonProps } from '@invoke-ai/ui-library';
|
||||
import { Button, ConfirmationAlertDialog, Flex, ListItem, Text, UnorderedList, useDisclosure } from '@invoke-ai/ui-library';
|
||||
import { useStarterBundleInstall } from 'features/modelManagerV2/hooks/useStarterBundleInstall';
|
||||
import { useStarterBundleInstallStatus } from 'features/modelManagerV2/hooks/useStarterBundleInstallStatus';
|
||||
import { t } from 'i18next';
|
||||
import type { MouseEvent } from 'react';
|
||||
import { useCallback } from 'react';
|
||||
import type { S } from 'services/api/types';
|
||||
|
||||
export const StarterBundleButton = ({ bundle, ...rest }: { bundle: S['StarterModelBundle'] } & ButtonProps) => {
|
||||
const { installBundle } = useStarterBundleInstall();
|
||||
const { install } = useStarterBundleInstallStatus(bundle);
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
const onClickBundle = useCallback(
|
||||
(e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
onOpen();
|
||||
},
|
||||
[onOpen]
|
||||
);
|
||||
const handleInstallBundle = useCallback(() => {
|
||||
installBundle(bundle);
|
||||
}, [installBundle, bundle]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={onClickBundle} isDisabled={install.length === 0} {...rest}>
|
||||
{bundle.name}
|
||||
</Button>
|
||||
<ConfirmationAlertDialog
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={t('modelManager.installBundle')}
|
||||
acceptCallback={handleInstallBundle}
|
||||
acceptButtonText={t('modelManager.install')}
|
||||
useInert={false}
|
||||
>
|
||||
<Flex rowGap={4} flexDirection="column">
|
||||
<Text fontWeight="bold">{t('modelManager.installBundleMsg1', { bundleName: bundle.name })}</Text>
|
||||
<Text>{t('modelManager.installBundleMsg2', { count: install.length })}</Text>
|
||||
<UnorderedList>
|
||||
{install.map((model, index) => (
|
||||
<ListItem key={index} wordBreak="break-all">
|
||||
<Text>{model.config.name}</Text>
|
||||
</ListItem>
|
||||
))}
|
||||
</UnorderedList>
|
||||
</Flex>
|
||||
</ConfirmationAlertDialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
|
||||
import { PiInfoBold, PiXBold } from 'react-icons/pi';
|
||||
import type { GetStarterModelsResponse } from 'services/api/endpoints/models';
|
||||
|
||||
import { StarterBundleButton } from './StarterBundle';
|
||||
import { StarterBundleButton } from './StarterBundleButton';
|
||||
import { StarterBundleTooltipContent } from './StarterBundleTooltipContent';
|
||||
import { StarterModelsResultItem } from './StarterModelsResultItem';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user