diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 2375cf9fa1..ecd34fb3a6 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1052,11 +1052,7 @@ "remixImage": "Remix Image", "usePrompt": "Use Prompt", "useSeed": "Use Seed", - "width": "Width", - "isAllowedToUpscale": { - "useX2Model": "Image is too large to upscale with x4 model, use x2 model", - "tooLarge": "Image is too large to upscale, select smaller image" - } + "width": "Width" }, "dynamicPrompts": { "showDynamicPrompts": "Show Dynamic Prompts", @@ -1684,6 +1680,8 @@ "postProcessingMissingModelWarning": "Visit the Model Manager to install a post-processing (image to image) model.", "missingModelsWarning": "Visit the Model Manager to install the required models:", "mainModelDesc": "Main model (SD1.5 or SDXL architecture)", + "outputTooLargeShort": "Output is too large to upscale", + "outputTooLarge": "Max upscale limit is 10,000x10,000 pixels. Please try a smaller image or decrease your scale selection.", "tileControlNetModelDesc": "Tile ControlNet model for the chosen main model architecture", "upscaleModelDesc": "Upscale (image to image) model", "missingUpscaleInitialImage": "Missing initial image for upscaling", diff --git a/invokeai/frontend/web/src/app/types/invokeai.ts b/invokeai/frontend/web/src/app/types/invokeai.ts index 8cc8422c24..a84cefabaa 100644 --- a/invokeai/frontend/web/src/app/types/invokeai.ts +++ b/invokeai/frontend/web/src/app/types/invokeai.ts @@ -65,6 +65,7 @@ export type AppConfig = { */ shouldUpdateImagesOnConnect: boolean; shouldFetchMetadataFromApi: boolean; + maxUpscalePixels?: number; allowPrivateBoards: boolean; disabledTabs: InvokeTabName[]; disabledFeatures: AppFeature[]; diff --git a/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts b/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts index ba2117f207..b0562f74dd 100644 --- a/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts +++ b/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts @@ -16,6 +16,7 @@ import { selectWorkflowSettingsSlice } from 'features/nodes/store/workflowSettin import { isInvocationNode } from 'features/nodes/types/invocation'; import { selectGenerationSlice } from 'features/parameters/store/generationSlice'; import { selectUpscalelice } from 'features/parameters/store/upscaleSlice'; +import { selectConfigSlice } from 'features/system/store/configSlice'; import { selectSystemSlice } from 'features/system/store/systemSlice'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import i18n from 'i18next'; @@ -42,6 +43,7 @@ const createSelector = (templates: Templates) => selectControlLayersSlice, activeTabNameSelector, selectUpscalelice, + selectConfigSlice, ], ( controlAdapters, @@ -52,7 +54,8 @@ const createSelector = (templates: Templates) => dynamicPrompts, controlLayers, activeTabName, - upscale + upscale, + config ) => { const { model } = generation; const { size } = controlLayers.present; @@ -209,6 +212,12 @@ const createSelector = (templates: Templates) => } else if (activeTabName === 'upscaling') { if (!upscale.upscaleInitialImage) { reasons.push({ content: i18n.t('upscaling.missingUpscaleInitialImage') }); + } else if (config.maxUpscalePixels) { + const upscaledPixels = + upscale.upscaleInitialImage.width * upscale.scale * upscale.upscaleInitialImage.height * upscale.scale; + if (upscaledPixels > config.maxUpscalePixels) { + reasons.push({ content: i18n.t('upscaling.outputTooLargeShort') }); + } } if (!upscale.upscaleModel) { reasons.push({ content: i18n.t('upscaling.missingUpscaleModel') }); diff --git a/invokeai/frontend/web/src/features/parameters/hooks/useIsTooLargeToUpscale.ts b/invokeai/frontend/web/src/features/parameters/hooks/useIsTooLargeToUpscale.ts index b6cd68c795..09e4deffe1 100644 --- a/invokeai/frontend/web/src/features/parameters/hooks/useIsTooLargeToUpscale.ts +++ b/invokeai/frontend/web/src/features/parameters/hooks/useIsTooLargeToUpscale.ts @@ -5,24 +5,20 @@ import { selectConfigSlice } from 'features/system/store/configSlice'; import { useMemo } from 'react'; import type { ImageDTO } from 'services/api/types'; - export const createIsTooLargeToUpscaleSelector = (imageDTO?: ImageDTO) => createMemoizedSelector(selectUpscalelice, selectConfigSlice, (upscale, config) => { const { upscaleModel, scale } = upscale; const { maxUpscalePixels } = config; if (!maxUpscalePixels || !upscaleModel || !imageDTO) { - return false + return false; } const upscaledPixels = imageDTO.width * scale * imageDTO.height * scale; - console.log({ upscaledPixels }) - console.log({ maxUpscalePixels }) - return upscaledPixels > maxUpscalePixels - + return upscaledPixels > maxUpscalePixels; }); export const useIsTooLargeToUpscale = (imageDTO?: ImageDTO) => { const selectIsTooLargeToUpscale = useMemo(() => createIsTooLargeToUpscaleSelector(imageDTO), [imageDTO]); return useAppSelector(selectIsTooLargeToUpscale); -}; \ No newline at end of file +}; diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx index 35ce3ac1a1..40a8370d0c 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx @@ -1,12 +1,12 @@ import { Button, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { $installModelsTab } from 'features/modelManagerV2/subpanels/InstallModels'; +import { useIsTooLargeToUpscale } from 'features/parameters/hooks/useIsTooLargeToUpscale'; import { tileControlnetModelChanged } from 'features/parameters/store/upscaleSlice'; import { setActiveTab } from 'features/ui/store/uiSlice'; import { useCallback, useEffect, useMemo } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { useControlNetModels } from 'services/api/hooks/modelsByType'; -import { useIsTooLargeToUpscale } from '../../../parameters/hooks/useIsTooLargeToUpscale'; export const UpscaleWarning = () => { const { t } = useTranslation(); @@ -42,13 +42,12 @@ export const UpscaleWarning = () => { }, [model, tileControlnetModel, upscaleModel, t]); const otherWarnings = useMemo(() => { - console.log({ isTooLargeToUpscale }); const _warnings: string[] = []; if (isTooLargeToUpscale) { _warnings.push(t('upscaling.outputTooLarge')); } return _warnings; - }, [isTooLargeToUpscale]); + }, [isTooLargeToUpscale, t]); const handleGoToModelManager = useCallback(() => { dispatch(setActiveTab('models'));