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): revised simple upscale warning UI

Browse Source
This commit is contained in:
psychedelicious 2024-07-24 07:15:34 +10:00
parent aeb53563ff
commit 7f7ce291b5
5 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1646,6 +1646,7 @@
"structure": "Structure",
"upscaleModel": "Upscale Model",
"scale": "Scale",
"simpleUpscaleMissingModelWarning": "Visit the <LinkComponent>Model Manager</LinkComponent> to install an upscale (image to image) model.",
"missingModelsWarning": "Visit the <LinkComponent>Model Manager</LinkComponent> to install the required models:",
"mainModelDesc": "Main model (SD1.5 or SDXL architecture)",
"tileControlNetModelDesc": "Tile ControlNet model for the chosen main model architecture",

1
invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx
View File

@ -54,6 +54,7 @@ const ParamSpandrelModel = ({ isMultidiffusion }: Props) => {
options={options}
onChange={onChange}
noOptionsMessage={noOptionsMessage}
isDisabled={options.length === 0}
/>
</Box>
</Tooltip>

32
invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
View File

@ -6,14 +6,16 @@ import {
PopoverBody,
PopoverContent,
PopoverTrigger,
Text,
useDisclosure,
} from '@invoke-ai/ui-library';
import { upscaleRequested } from 'app/store/middleware/listenerMiddleware/listeners/upscaleRequested';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { $installModelsTab } from 'features/modelManagerV2/subpanels/InstallModels';
import { useIsQueueMutationInProgress } from 'features/queue/hooks/useIsQueueMutationInProgress';
import { UpscaleWarning } from 'features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning';
import { setActiveTab } from 'features/ui/store/uiSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Trans, useTranslation } from 'react-i18next';
import { PiFrameCornersBold } from 'react-icons/pi';
import type { ImageDTO } from 'services/api/types';
@ -51,7 +53,7 @@ const ParamUpscalePopover = (props: Props) => {
<PopoverBody w={96}>
<Flex flexDirection="column" gap={4}>
<ParamSpandrelModel isMultidiffusion={false} />
<UpscaleWarning usesTile={false} />
{!simpleUpscaleModel && <MissingModelWarning />}
<Button size="sm" isDisabled={!imageDTO || inProgress || !simpleUpscaleModel} onClick={handleClickUpscale}>
{t('parameters.upscaleImage')}
</Button>
@ -63,3 +65,27 @@ const ParamUpscalePopover = (props: Props) => {
};
export default memo(ParamUpscalePopover);
const MissingModelWarning = () => {
const dispatch = useAppDispatch();
const handleGoToModelManager = useCallback(() => {
dispatch(setActiveTab('models'));
$installModelsTab.set(3);
}, [dispatch]);
return (
<Flex bg="error.500" borderRadius="base" padding={4} direction="column" fontSize="sm" gap={2}>
<Text>
<Trans
i18nKey="upscaling.simpleUpscaleMissingModelWarning"
components={{
LinkComponent: (
<Button size="sm" flexGrow={0} variant="link" color="base.50" onClick={handleGoToModelManager} />
),
}}
/>
</Text>
</Flex>
);
};

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

@ -58,7 +58,7 @@ export const UpscaleSettingsAccordion = memo(() => {
<UpscaleScaleSlider />
</Flex>
</Flex>
<UpscaleWarning usesTile={true} />
<UpscaleWarning />
</Flex>
<Expander label={t('accordions.advanced.options')} isOpen={isOpenExpander} onToggle={onToggleExpander}>
<Flex gap={4} pb={4} flexDir="column">

20
invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx
View File

@ -7,14 +7,11 @@ import { useCallback, useEffect, useMemo } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { useControlNetModels } from 'services/api/hooks/modelsByType';
interface Props {
usesTile: boolean;
}
export const UpscaleWarning = ({ usesTile }: Props) => {
export const UpscaleWarning = () => {
const { t } = useTranslation();
const model = useAppSelector((s) => s.generation.model);
const { tileControlnetModel, upscaleModel, simpleUpscaleModel } = useAppSelector((s) => s.upscale);
const upscaleModel = useAppSelector((s) => s.upscale.upscaleModel);
const tileControlnetModel = useAppSelector((s) => s.upscale.tileControlnetModel);
const dispatch = useAppDispatch();
const [modelConfigs, { isLoading }] = useControlNetModels();
const disabledTabs = useAppSelector((s) => s.config.disabledTabs);
@ -29,23 +26,18 @@ export const UpscaleWarning = ({ usesTile }: Props) => {
const warnings = useMemo(() => {
const _warnings: string[] = [];
if (!usesTile) {
if (!simpleUpscaleModel) {
_warnings.push(t('upscaling.upscaleModelDesc'));
}
return _warnings;
}
if (!model) {
_warnings.push(t('upscaling.mainModelDesc'));
}
if (!tileControlnetModel && usesTile) {
if (!tileControlnetModel) {
_warnings.push(t('upscaling.tileControlNetModelDesc'));
}
if (!upscaleModel) {
_warnings.push(t('upscaling.upscaleModelDesc'));
}
return _warnings;
}, [model, upscaleModel, tileControlnetModel, usesTile, simpleUpscaleModel, t]);
}, [model, tileControlnetModel, upscaleModel, t]);
const handleGoToModelManager = useCallback(() => {
dispatch(setActiveTab('models'));