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): updated upscale tab warnings

Browse Source
This commit is contained in:
psychedelicious 2024-07-23 14:22:35 +10:00
parent 4352341a00
commit 8f934747f3
3 changed files with 39 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/web/public/locales/en.json
View File

@ -1644,14 +1644,15 @@
"upscaling": { "upscaling": {
"creativity": "Creativity", "creativity": "Creativity",
"structure": "Structure", "structure": "Structure",
"toInstall": "to install",
"upscaleModel": "Upscale Model", "upscaleModel": "Upscale Model",
"scale": "Scale", "scale": "Scale",
"visit": "Visit", "missingModelsWarning": "Visit the <LinkComponent>Model Manager</LinkComponent> to install the required models:",
"warningNoMainModel": "a model", "mainModelDesc": "Main model (SD1.5 or SDXL architecture)",
"warningNoTile": "a {{base_model}} tile controlnet required by this feature", "tileControlNetModelDesc": "Tile ControlNet model for the chosen main model architecture",
"warningNoTileOrUpscaleModel": "an upscaler model and {{base_model}} tile controlnet required by this feature", "upscaleModelDesc": "Upscale (image to image) model",
"warningNoUpscaleModel": "an upscaler model required by this feature" "missingUpscaleInitialImage": "Missing initial image for upscaling",
"missingUpscaleModel": "Missing upscale model",
"missingTileControlNetModel": "No valid tile ControlNet models installed"
}, },
"ui": { "ui": {
"tabs": { "tabs": {

7
invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
View File

@ -208,14 +208,13 @@ const createSelector = (templates: Templates) =>
}); });
} else if (activeTabName === 'upscaling') { } else if (activeTabName === 'upscaling') {
if (!upscale.upscaleInitialImage) { if (!upscale.upscaleInitialImage) {
reasons.push({ content: 'No Initial image' }); reasons.push({ content: i18n.t('upscaling.missingUpscaleInitialImage') });
} }
if (!upscale.upscaleModel) { if (!upscale.upscaleModel) {
reasons.push({ content: 'No upscale model selected' }); reasons.push({ content: i18n.t('upscaling.missingUpscaleModel') });
} }
if (!upscale.tileControlnetModel) { if (!upscale.tileControlnetModel) {
reasons.push({ content: 'No valid tile controlnet available' }); reasons.push({ content: i18n.t('upscaling.missingTileControlNetModel') });
} }
} else { } else {
// Handling for all other tabs // Handling for all other tabs

50
invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/MultidiffusionWarning.tsx
View File

@ -1,10 +1,10 @@
import { Flex, Link, Text } from '@invoke-ai/ui-library'; import { Button, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { $installModelsTab } from 'features/modelManagerV2/subpanels/InstallModels';
import { tileControlnetModelChanged } from 'features/parameters/store/upscaleSlice'; import { tileControlnetModelChanged } from 'features/parameters/store/upscaleSlice';
import { MODEL_TYPE_SHORT_MAP } from 'features/parameters/types/constants';
import { setActiveTab } from 'features/ui/store/uiSlice'; import { setActiveTab } from 'features/ui/store/uiSlice';
import { useCallback, useEffect, useMemo } from 'react'; import { useCallback, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { Trans, useTranslation } from 'react-i18next';
import { useControlNetModels } from 'services/api/hooks/modelsByType'; import { useControlNetModels } from 'services/api/hooks/modelsByType';
export const MultidiffusionWarning = () => { export const MultidiffusionWarning = () => {
@ -23,38 +23,46 @@ export const MultidiffusionWarning = () => {
dispatch(tileControlnetModelChanged(validModel || null)); dispatch(tileControlnetModelChanged(validModel || null));
}, [model?.base, modelConfigs, dispatch]); }, [model?.base, modelConfigs, dispatch]);
const warningText = useMemo(() => { const warnings = useMemo(() => {
const _warnings: string[] = [];
if (!model) { if (!model) {
return t('upscaling.warningNoMainModel'); _warnings.push(t('upscaling.mainModelDesc'));
}
if (!upscaleModel && !tileControlnetModel) {
return t('upscaling.warningNoTileOrUpscaleModel', { base_model: MODEL_TYPE_SHORT_MAP[model.base] });
}
if (!upscaleModel) {
return t('upscaling.warningNoUpscaleModel');
} }
if (!tileControlnetModel) { if (!tileControlnetModel) {
return t('upscaling.warningNoTile', { base_model: MODEL_TYPE_SHORT_MAP[model.base] }); _warnings.push(t('upscaling.tileControlNetModelDesc'));
} }
if (!upscaleModel) {
_warnings.push(t('upscaling.upscaleModelDesc'));
}
return _warnings;
}, [model, upscaleModel, tileControlnetModel, t]); }, [model, upscaleModel, tileControlnetModel, t]);
const handleGoToModelManager = useCallback(() => { const handleGoToModelManager = useCallback(() => {
dispatch(setActiveTab('models')); dispatch(setActiveTab('models'));
$installModelsTab.set(3);
}, [dispatch]); }, [dispatch]);
if (!warningText || isLoading || !shouldShowButton) { if (!warnings.length || isLoading || !shouldShowButton) {
return <></>; return null;
} }
return ( return (
<Flex bg="error.500" borderRadius="base" padding="2" direction="column"> <Flex bg="error.500" borderRadius="base" padding={4} direction="column" fontSize="sm" gap={2}>
<Text fontSize="xs" textAlign="center" display="inline-block"> <Text>
{t('upscaling.visit')}{' '} <Trans
<Link fontWeight="bold" onClick={handleGoToModelManager}> i18nKey="upscaling.missingModelsWarning"
{t('modelManager.modelManager')} components={{
</Link>{' '} LinkComponent: (
{t('upscaling.toInstall')} {warningText}. <Button size="sm" flexGrow={0} variant="link" color="base.50" onClick={handleGoToModelManager} />
),
}}
/>
</Text> </Text>
<UnorderedList>
{warnings.map((warning) => (
<ListItem key={warning}>{warning}</ListItem>
))}
</UnorderedList>
</Flex> </Flex>
); );
}; };