feat(ui): display toast when enabling t2i/controlnet and disabling the other

invokeai/frontend/web/public/locales/en.json

@@ -139,6 +139,9 @@
         "addControlNet": "Add $t(common.controlNet)",
         "addIPAdapter": "Add $t(common.ipAdapter)",
         "addT2IAdapter": "Add $t(common.t2iAdapter)",
+        "controlNetEnabledT2IDisabled": "$t(common.controlNet) enabled, $t(common.t2iAdapter)s disabled",
+        "t2iEnabledControlNetDisabled": "$t(common.t2iAdapter) enabled, $t(common.controlNet)s disabled",
+        "controlNetT2IMutexDesc": "$t(common.controlNet) and $t(common.t2iAdapter) at same time is currently unsupported.",
         "amult": "a_mult",
         "autoConfigure": "Auto configure processor",
         "balanced": "Balanced",

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -72,6 +72,7 @@ import { addTabChangedListener } from './listeners/tabChanged';
 import { addUpscaleRequestedListener } from './listeners/upscaleRequested';
 import { addWorkflowLoadedListener } from './listeners/workflowLoaded';
 import { addBatchEnqueuedListener } from './listeners/batchEnqueued';
+import { addControlAdapterAddedOrEnabledListener } from './listeners/controlAdapterAddedOrEnabled';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -199,3 +200,7 @@ addTabChangedListener();
 
 // Dynamic prompts
 addDynamicPromptsListener();
+
+// Display toast when controlnet or t2i adapter enabled
+// TODO: Remove when they can both be enabled at same time
+addControlAdapterAddedOrEnabledListener();

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlAdapterAddedOrEnabled.ts

@@ -0,0 +1,87 @@
+import { isAnyOf } from '@reduxjs/toolkit';
+import {
+  controlAdapterAdded,
+  controlAdapterAddedFromImage,
+  controlAdapterIsEnabledChanged,
+  controlAdapterRecalled,
+  selectControlAdapterAll,
+  selectControlAdapterById,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
+import { ControlAdapterType } from 'features/controlAdapters/store/types';
+import { addToast } from 'features/system/store/systemSlice';
+import i18n from 'i18n';
+import { startAppListening } from '..';
+
+const isAnyControlAdapterAddedOrEnabled = isAnyOf(
+  controlAdapterAdded,
+  controlAdapterAddedFromImage,
+  controlAdapterRecalled,
+  controlAdapterIsEnabledChanged
+);
+
+/**
+ * Until we can have both controlnet and t2i adapter enabled at once, they are mutually exclusive
+ * This displays a toast when one is enabled and the other is already enabled, or one is added
+ * with the other enabled
+ */
+export const addControlAdapterAddedOrEnabledListener = () => {
+  startAppListening({
+    matcher: isAnyControlAdapterAddedOrEnabled,
+    effect: async (action, { dispatch, getOriginalState }) => {
+      const controlAdapters = getOriginalState().controlAdapters;
+
+      const hasEnabledControlNets = selectControlAdapterAll(
+        controlAdapters
+      ).some((ca) => ca.isEnabled && ca.type === 'controlnet');
+
+      const hasEnabledT2IAdapters = selectControlAdapterAll(
+        controlAdapters
+      ).some((ca) => ca.isEnabled && ca.type === 't2i_adapter');
+
+      let caType: ControlAdapterType | null = null;
+
+      if (controlAdapterAdded.match(action)) {
+        caType = action.payload.type;
+      }
+
+      if (controlAdapterAddedFromImage.match(action)) {
+        caType = action.payload.type;
+      }
+
+      if (controlAdapterRecalled.match(action)) {
+        caType = action.payload.type;
+      }
+
+      if (controlAdapterIsEnabledChanged.match(action)) {
+        const _caType = selectControlAdapterById(
+          controlAdapters,
+          action.payload.id
+        )?.type;
+        if (!_caType) {
+          return;
+        }
+        caType = _caType;
+      }
+
+      if (
+        (caType === 'controlnet' && hasEnabledT2IAdapters) ||
+        (caType === 't2i_adapter' && hasEnabledControlNets)
+      ) {
+        const title =
+          caType === 'controlnet'
+            ? i18n.t('controlnet.controlNetEnabledT2IDisabled')
+            : i18n.t('controlnet.t2iEnabledControlNetDisabled');
+
+        const description = i18n.t('controlnet.controlNetT2IMutexDesc');
+
+        dispatch(
+          addToast({
+            title,
+            description,
+            status: 'warning',
+          })
+        );
+      }
+    },
+  });
+};