use hook instead

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
  */

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;
   }
 

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;
+};

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 }) });
   }