From 323da2d66dc5df6a218e59f5f8d7319d6f43c768 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Wed, 21 May 2025 09:49:41 -0400 Subject: [PATCH] use hook instead --- .../frontend/web/src/app/types/invokeai.ts | 2 +- .../MainModel/DisabledModelWarning.tsx | 15 +++++---------- .../parameters/hooks/useIsModelDisabled.ts | 17 +++++++++++++++++ .../web/src/features/queue/store/readiness.ts | 19 ++++++++++--------- 4 files changed, 33 insertions(+), 20 deletions(-) create mode 100644 invokeai/frontend/web/src/features/parameters/hooks/useIsModelDisabled.ts diff --git a/invokeai/frontend/web/src/app/types/invokeai.ts b/invokeai/frontend/web/src/app/types/invokeai.ts index f64fd903b3..72cf076f0f 100644 --- a/invokeai/frontend/web/src/app/types/invokeai.ts +++ b/invokeai/frontend/web/src/app/types/invokeai.ts @@ -29,7 +29,7 @@ export type AppFeature = | 'hfToken' | 'retryQueueItem' | 'cancelAndClearAll' - | 'chatGPT4oModels'; + | 'chatGPT4oHigh'; /** * A disable-able Stable Diffusion feature */ diff --git a/invokeai/frontend/web/src/features/parameters/components/MainModel/DisabledModelWarning.tsx b/invokeai/frontend/web/src/features/parameters/components/MainModel/DisabledModelWarning.tsx index c1337722e5..c2ec27d367 100644 --- a/invokeai/frontend/web/src/features/parameters/components/MainModel/DisabledModelWarning.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/MainModel/DisabledModelWarning.tsx @@ -2,23 +2,18 @@ import { Flex, Link, Text } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { $accountSettingsLink } from 'app/store/nanostores/accountSettingsLink'; import { useAppSelector } from 'app/store/storeHooks'; -import { selectIsChatGTP4o, selectModel } from 'features/controlLayers/store/paramsSlice'; -import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; -import { useMemo } from 'react'; +import { selectModel } from 'features/controlLayers/store/paramsSlice'; +import { useIsModelDisabled } from 'features/parameters/hooks/useIsModelDisabled'; import { Trans, useTranslation } from 'react-i18next'; export const DisabledModelWarning = () => { const { t } = useTranslation(); const model = useAppSelector(selectModel); - const isChatGPT4o = useAppSelector(selectIsChatGTP4o); - const areChatGPT4oModelsEnabled = useFeatureStatus('chatGPT4oModels'); + const accountSettingsLink = useStore($accountSettingsLink); + const isChatGPT4oHighModelDisabled = useIsModelDisabled('chatGPT4oHigh'); - const isModelDisabled = useMemo(() => { - return isChatGPT4o && !areChatGPT4oModelsEnabled; - }, [isChatGPT4o, areChatGPT4oModelsEnabled]); - - if (!isModelDisabled) { + if (!model || !isChatGPT4oHighModelDisabled(model)) { return null; } diff --git a/invokeai/frontend/web/src/features/parameters/hooks/useIsModelDisabled.ts b/invokeai/frontend/web/src/features/parameters/hooks/useIsModelDisabled.ts new file mode 100644 index 0000000000..a554e1a628 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/hooks/useIsModelDisabled.ts @@ -0,0 +1,17 @@ +import type { AppFeature } from 'app/types/invokeai'; +import type { ParameterModel } from 'features/parameters/types/parameterSchemas'; +import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; +import { useCallback } from 'react'; + +export const useIsModelDisabled = (feature: AppFeature) => { + const isEnabled = useFeatureStatus(feature); + + const isModelDisabled = useCallback( + (model: ParameterModel) => { + return model?.base === 'chatgpt-4o' && model.name.toLowerCase().includes('high') && !isEnabled; + }, + [isEnabled] + ); + + return isModelDisabled; +}; diff --git a/invokeai/frontend/web/src/features/queue/store/readiness.ts b/invokeai/frontend/web/src/features/queue/store/readiness.ts index 7f8a9c91ac..ffc8f4ecd8 100644 --- a/invokeai/frontend/web/src/features/queue/store/readiness.ts +++ b/invokeai/frontend/web/src/features/queue/store/readiness.ts @@ -31,10 +31,11 @@ import type { WorkflowSettingsState } from 'features/nodes/store/workflowSetting import { selectWorkflowSettingsSlice } from 'features/nodes/store/workflowSettingsSlice'; import { isBatchNode, isExecutableNode, isInvocationNode } from 'features/nodes/types/invocation'; import { resolveBatchValue } from 'features/nodes/util/node/resolveBatchValue'; +import { useIsModelDisabled } from 'features/parameters/hooks/useIsModelDisabled'; import type { UpscaleState } from 'features/parameters/store/upscaleSlice'; import { selectUpscaleSlice } from 'features/parameters/store/upscaleSlice'; +import type { ParameterModel } from 'features/parameters/types/parameterSchemas'; import { getGridSize } from 'features/parameters/util/optimalDimension'; -import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { selectConfigSlice } from 'features/system/store/configSlice'; import { selectActiveTab } from 'features/ui/store/uiSelectors'; import type { TabName } from 'features/ui/store/uiTypes'; @@ -89,7 +90,7 @@ const debouncedUpdateReasons = debounce( config: AppConfig, store: AppStore, isInPublishFlow: boolean, - areChatGPT4oModelsEnabled: boolean + isChatGPT4oHighModelDisabled: (model: ParameterModel) => boolean ) => { if (tab === 'canvas') { const model = selectMainModelConfig(store.getState()); @@ -104,7 +105,7 @@ const debouncedUpdateReasons = debounce( canvasIsRasterizing, canvasIsCompositing, canvasIsSelectingObject, - areChatGPT4oModelsEnabled, + isChatGPT4oHighModelDisabled, }); $reasonsWhyCannotEnqueue.set(reasons); } else if (tab === 'workflows') { @@ -152,7 +153,7 @@ export const useReadinessWatcher = () => { const canvasIsSelectingObject = useStore(canvasManager?.stateApi.$isSegmenting ?? $true); const canvasIsCompositing = useStore(canvasManager?.compositor.$isBusy ?? $true); const isInPublishFlow = useStore($isInPublishFlow); - const areChatGPT4oModelsEnabled = useFeatureStatus('chatGPT4oModels'); + const isChatGPT4oHighModelDisabled = useIsModelDisabled('chatGPT4oHigh'); useEffect(() => { debouncedUpdateReasons( @@ -173,7 +174,7 @@ export const useReadinessWatcher = () => { config, store, isInPublishFlow, - areChatGPT4oModelsEnabled + isChatGPT4oHighModelDisabled ); }, [ store, @@ -193,7 +194,7 @@ export const useReadinessWatcher = () => { upscale, workflowSettings, isInPublishFlow, - areChatGPT4oModelsEnabled, + isChatGPT4oHighModelDisabled, ]); }; @@ -341,7 +342,7 @@ const getReasonsWhyCannotEnqueueCanvasTab = (arg: { canvasIsRasterizing: boolean; canvasIsCompositing: boolean; canvasIsSelectingObject: boolean; - areChatGPT4oModelsEnabled: boolean; + isChatGPT4oHighModelDisabled: (model: ParameterModel) => boolean; }) => { const { isConnected, @@ -354,7 +355,7 @@ const getReasonsWhyCannotEnqueueCanvasTab = (arg: { canvasIsRasterizing, canvasIsCompositing, canvasIsSelectingObject, - areChatGPT4oModelsEnabled, + isChatGPT4oHighModelDisabled, } = arg; const { positivePrompt } = params; const reasons: Reason[] = []; @@ -487,7 +488,7 @@ const getReasonsWhyCannotEnqueueCanvasTab = (arg: { } } - if (model?.base === 'chatgpt-4o' && !areChatGPT4oModelsEnabled) { + if (model && isChatGPT4oHighModelDisabled(model)) { reasons.push({ content: i18n.t('parameters.invoke.modelDisabledForTrial', { modelName: model.name }) }); }