mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
feat(ui): add useStarterModelsToast
This displays a toast linking to the MM tab when there are no main models installed. It is a no-op when the `starterModels` feature is disabled.
This commit is contained in:
parent
e40b715f39
commit
484488dee4
invokeai/frontend/web
@ -667,6 +667,8 @@
|
|||||||
"modelUpdated": "Model Updated",
|
"modelUpdated": "Model Updated",
|
||||||
"modelUpdateFailed": "Model Update Failed",
|
"modelUpdateFailed": "Model Update Failed",
|
||||||
"name": "Name",
|
"name": "Name",
|
||||||
|
"noModelsInstalled": "No Models Installed",
|
||||||
|
"noModelsInstalledDesc1": "Install models with the",
|
||||||
"noModelSelected": "No Model Selected",
|
"noModelSelected": "No Model Selected",
|
||||||
"none": "none",
|
"none": "none",
|
||||||
"path": "Path",
|
"path": "Path",
|
||||||
|
@ -11,6 +11,7 @@ import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
|
|||||||
import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal';
|
import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal';
|
||||||
import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageModal';
|
import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageModal';
|
||||||
import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal';
|
import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal';
|
||||||
|
import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast';
|
||||||
import { configChanged } from 'features/system/store/configSlice';
|
import { configChanged } from 'features/system/store/configSlice';
|
||||||
import { languageSelector } from 'features/system/store/systemSelectors';
|
import { languageSelector } from 'features/system/store/systemSelectors';
|
||||||
import InvokeTabs from 'features/ui/components/InvokeTabs';
|
import InvokeTabs from 'features/ui/components/InvokeTabs';
|
||||||
@ -68,6 +69,9 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
|
|||||||
dispatch(appStarted());
|
dispatch(appStarted());
|
||||||
}, [dispatch]);
|
}, [dispatch]);
|
||||||
|
|
||||||
|
|
||||||
|
useStarterModelsToast()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
|
<ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
|
||||||
<Box
|
<Box
|
||||||
|
@ -0,0 +1,54 @@
|
|||||||
|
import { Button, Text, useToast } from '@invoke-ai/ui-library';
|
||||||
|
import { useAppDispatch } from 'app/store/storeHooks';
|
||||||
|
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
|
||||||
|
import { setActiveTab } from 'features/ui/store/uiSlice';
|
||||||
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useMainModels } from 'services/api/hooks/modelsByType';
|
||||||
|
|
||||||
|
const TOAST_ID = 'starterModels';
|
||||||
|
|
||||||
|
export const useStarterModelsToast = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const isEnabled = useFeatureStatus('starterModels').isFeatureEnabled;
|
||||||
|
const [didToast, setDidToast] = useState(false);
|
||||||
|
const [mainModels, { data }] = useMainModels();
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (toast.isActive(TOAST_ID)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (data && mainModels.length === 0 && !didToast && isEnabled) {
|
||||||
|
toast({
|
||||||
|
id: TOAST_ID,
|
||||||
|
title: t('modelManager.noModelsInstalled'),
|
||||||
|
description: <ToastDescription />,
|
||||||
|
status: 'info',
|
||||||
|
isClosable: true,
|
||||||
|
duration: null,
|
||||||
|
onCloseComplete: () => setDidToast(true),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [data, didToast, isEnabled, mainModels.length, t, toast]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ToastDescription = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const toast = useToast();
|
||||||
|
|
||||||
|
const onClick = useCallback(() => {
|
||||||
|
dispatch(setActiveTab('modelManager'));
|
||||||
|
toast.close(TOAST_ID);
|
||||||
|
}, [dispatch, toast]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Text fontSize="md">
|
||||||
|
{t('modelManager.noModelsInstalledDesc1')}{' '}
|
||||||
|
<Button onClick={onClick} variant="link" color="base.50" flexGrow={0}>
|
||||||
|
{t('modelManager.modelManager')}.
|
||||||
|
</Button>
|
||||||
|
</Text>
|
||||||
|
);
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user