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

feat(ui): make model install tab controlled

Browse Source 
This lets us navigate directly to eg the Starter Models tab
This commit is contained in:
psychedelicious 2024-07-23 14:15:39 +10:00
parent 1072b74c0e
commit d7e0ec52ff
2 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/modelManagerV2/hooks/useStarterModelsToast.tsx
View File

@ -1,5 +1,6 @@
import { Button, Text, useToast } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { $installModelsTab } from 'features/modelManagerV2/subpanels/InstallModels';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { setActiveTab } from 'features/ui/store/uiSlice';
import { useCallback, useEffect, useState } from 'react';
@ -44,6 +45,7 @@ const ToastDescription = () => {
const onClick = useCallback(() => {
dispatch(setActiveTab('models'));
$installModelsTab.set(3)
toast.close(TOAST_ID);
}, [dispatch, toast]);

20
invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx
View File

@ -1,28 +1,28 @@
import { Box, Flex, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { StarterModelsForm } from 'features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsForm';
import { useMemo } from 'react';
import { atom } from 'nanostores';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useMainModels } from 'services/api/hooks/modelsByType';
import { HuggingFaceForm } from './AddModelPanel/HuggingFaceFolder/HuggingFaceForm';
import { InstallModelForm } from './AddModelPanel/InstallModelForm';
import { ModelInstallQueue } from './AddModelPanel/ModelInstallQueue/ModelInstallQueue';
import { ScanModelsForm } from './AddModelPanel/ScanFolder/ScanFolderForm';
export const $installModelsTab = atom(0);
export const InstallModels = () => {
const { t } = useTranslation();
const [mainModels, { data }] = useMainModels();
const defaultIndex = useMemo(() => {
if (data && mainModels.length) {
return 0;
}
return 3;
}, [data, mainModels.length]);
const index = useStore($installModelsTab);
const onChange = useCallback((index: number) => {
$installModelsTab.set(index);
}, []);
return (
<Flex layerStyle="first" borderRadius="base" w="full" h="full" flexDir="column" gap={4}>
<Heading fontSize="xl">{t('modelManager.addModel')}</Heading>
<Tabs variant="collapse" height="50%" display="flex" flexDir="column" defaultIndex={defaultIndex}>
<Tabs variant="collapse" height="50%" display="flex" flexDir="column" index={index} onChange={onChange}>
<TabList>
<Tab>{t('modelManager.urlOrLocalPath')}</Tab>
<Tab>{t('modelManager.huggingFace')}</Tab>