diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 264f9f3a804..e5e713dfc21 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -711,6 +711,7 @@ "installAll": "Install All", "installRepo": "Install Repo", "ipAdapters": "IP Adapters", + "learnMoreAboutSupportedModels": "Learn more about the models we support", "load": "Load", "localOnly": "local only", "manual": "Manual", diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx index 90f3a578da7..754dab8c782 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx @@ -1,9 +1,10 @@ -import { Box, Flex, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library'; +import { Box, Button, Flex, Heading, Tab, TabList, TabPanel, TabPanels, Tabs, Text } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { StarterModelsForm } from 'features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsForm'; import { atom } from 'nanostores'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; +import { PiInfoBold } from 'react-icons/pi'; import { HuggingFaceForm } from './AddModelPanel/HuggingFaceFolder/HuggingFaceForm'; import { InstallModelForm } from './AddModelPanel/InstallModelForm'; @@ -19,9 +20,19 @@ export const InstallModels = memo(() => { $installModelsTab.set(index); }, []); + const onClickLearnMore = useCallback(() => { + window.open('https://support.invoke.ai/support/solutions/articles/151000170961-supported-models'); + }, []); + return ( - {t('modelManager.addModel')} + + {t('modelManager.addModel')} + + + {t('modelManager.urlOrLocalPath')}