github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-12 15:24:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): make launchpad button its own component

Browse Source
This commit is contained in:
psychedelicious
2025-06-27 13:50:13 +10:00
parent 9862ba9210
commit f51014e108
2 changed files with 43 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/LaunchpadForm/LaunchpadButton.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { Button, Flex, Heading, Icon, Text } from '@invoke-ai/ui-library';
import { memo } from 'react';
import type { IconType } from 'react-icons';
export const LaunchpadButton = memo(
(props: { onClick: () => void; icon: IconType; title: string; description: string }) => {
const { onClick, icon, title, description } = props;
return (
<Button onClick={onClick} variant="outline" p={4} textAlign="left" flexDir="column" gap={2} h="unset">
<Flex alignItems="center" gap={4} w="full">
<Icon as={icon} boxSize={8} color="base.300" />
<Heading size="sm" color="base.100">
{title}
</Heading>
</Flex>
<Text lineHeight="1.4" flex="1" whiteSpace="normal" wordBreak="break-word">
{description}
</Text>
</Button>
);
}
);
LaunchpadButton.displayName = 'LaunchpadButton';

87
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/LaunchpadForm/LaunchpadForm.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Flex, Grid, Heading, Icon, Text } from '@invoke-ai/ui-library';
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';
@@ -10,6 +10,8 @@ import { PiFolderOpenBold, PiLinkBold, PiStarBold } from 'react-icons/pi';
import { SiHuggingface } from 'react-icons/si';
import { useGetStarterModelsQuery } from 'services/api/endpoints/models';
import { LaunchpadButton } from './LaunchpadButton';
export const LaunchpadForm = memo(() => {
const { t } = useTranslation();
const { data: starterModelsData } = useGetStarterModelsQuery();
@@ -43,77 +45,24 @@ export const LaunchpadForm = memo(() => {
<Flex flexDir="column" gap={2} alignItems="flex-start">
<Heading size="sm">{t('modelManager.launchpad.manualInstall')}</Heading>
<Grid templateColumns="repeat(auto-fit, minmax(280px, 1fr))" gap={3} w="full">
<Button
<LaunchpadButton
onClick={navigateToUrlTab}
variant="outline"
p={4}
textAlign="left"
flexDir="column"
gap={2}
h="unset"
>
<Flex alignItems="center" gap={4} w="full">
<Icon as={PiLinkBold} boxSize={8} color="base.300" />
<Heading size="sm" color="base.100">
{t('modelManager.urlOrLocalPath')}
</Heading>
</Flex>
<Text lineHeight="1.4" flex="1" whiteSpace="normal" wordBreak="break-word">
{t('modelManager.launchpad.urlDescription')}
</Text>
</Button>
<Button
icon={PiLinkBold}
title={t('modelManager.urlOrLocalPath')}
description={t('modelManager.launchpad.urlDescription')}
/>
<LaunchpadButton
onClick={navigateToHuggingFaceTab}
variant="outline"
p={4}
textAlign="left"
flexDir="column"
gap={2}
h="unset"
>
<Flex alignItems="center" gap={4} w="full">
<Icon as={SiHuggingface} boxSize={8} color="base.300" />
<Heading size="sm" color="base.100">
{t('modelManager.huggingFace')}
</Heading>
</Flex>
<Text
fontSize="sm"
color="base.400"
lineHeight="1.4"
flex="1"
whiteSpace="normal"
wordBreak="break-word"
>
{t('modelManager.launchpad.huggingFaceDescription')}
</Text>
</Button>
<Button
icon={SiHuggingface}
title={t('modelManager.huggingFace')}
description={t('modelManager.launchpad.huggingFaceDescription')}
/>
<LaunchpadButton
onClick={navigateToScanFolderTab}
variant="outline"
p={4}
textAlign="left"
flexDir="column"
gap={2}
h="unset"
>
<Flex alignItems="center" gap={4} w="full">
<Icon as={PiFolderOpenBold} boxSize={8} color="base.300" />
<Heading size="sm" color="base.100">
{t('modelManager.scanFolder')}
</Heading>
</Flex>
<Text
fontSize="sm"
color="base.400"
lineHeight="1.4"
flex="1"
whiteSpace="normal"
wordBreak="break-word"
>
{t('modelManager.launchpad.scanFolderDescription')}
</Text>
</Button>
icon={PiFolderOpenBold}
title={t('modelManager.scanFolder')}
description={t('modelManager.launchpad.scanFolderDescription')}
/>
</Grid>
</Flex>
{/* Recommended Section */}