fix(ui): ensure dynamic prompts updates on any change to any dependent state

When users generate on the canvas or upscaling tabs, we parse prompts through dynamic prompts before invoking. Whenever the prompt or other settings change, we run dynamic prompts.

Previously, we used a redux listener to react to changes to dynamic prompts' dependent state, keeping the processed dynamic prompts synced. For example, when the user changed the prompt field, we re-processed the dynamic prompts.

This requires that all redux actions that change the dependent state be added to the listener matcher. It's easy to forget actions, though, which can result in the dynamic prompts state being stale.

For example, when resetting canvas state, we dispatch an action that resets the whole params slice, but this wasn't in the matcher. As a result, when resetting canvas, the dynamic prompts aren't updated. If the user then clicks Invoke (with an empty prompt), the last dynamic prompts state will be used.

For example:
- Generate w/ prompt "frog", get frog
- Click new canvas session
- Generate without any prompt, still get frog

To resolve this, the logic that keeps the dynamic prompts synced is moved from the listener to a hook. The way the logic is triggered is improved - it's now triggered in a useEffect, which is run when the dependent state changes. This way, it doesn't matter _how_ the dependent state changes - the changes will always be "seen", and the dynamic prompts will update.

Author: psychedelicious

invokeai/frontend/web/src/app/components/GlobalHookIsolator.tsx

@@ -9,6 +9,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import type { PartialAppConfig } from 'app/types/invokeai';
 import { useFocusRegionWatcher } from 'common/hooks/focus';
 import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
+import { useDynamicPromptsWatcher } from 'features/dynamicPrompts/hooks/useDynamicPromptsWatcher';
 import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast';
 import { useWorkflowBuilderWatcher } from 'features/nodes/components/sidePanel/workflow/IsolatedWorkflowBuilderWatcher';
 import { useReadinessWatcher } from 'features/queue/store/readiness';
@@ -58,6 +59,7 @@ export const GlobalHookIsolator = memo(
     useSyncQueueStatus();
     useFocusRegionWatcher();
     useWorkflowBuilderWatcher();
+    useDynamicPromptsWatcher();
 
     return null;
   }

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

@@ -22,7 +22,6 @@ import { addImageToDeleteSelectedListener } from 'app/store/middleware/listenerM
 import { addImageUploadedFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/imageUploaded';
 import { addModelSelectedListener } from 'app/store/middleware/listenerMiddleware/listeners/modelSelected';
 import { addModelsLoadedListener } from 'app/store/middleware/listenerMiddleware/listeners/modelsLoaded';
-import { addDynamicPromptsListener } from 'app/store/middleware/listenerMiddleware/listeners/promptChanged';
 import { addSetDefaultSettingsListener } from 'app/store/middleware/listenerMiddleware/listeners/setDefaultSettings';
 import { addSocketConnectedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketConnected';
 import type { AppDispatch, RootState } from 'app/store/store';
@@ -95,7 +94,4 @@ addAppConfigReceivedListener(startAppListening);
 // Ad-hoc upscale workflwo
 addAdHocPostProcessingRequestedListener(startAppListening);
 
-// Prompts
-addDynamicPromptsListener(startAppListening);
-
 addSetDefaultSettingsListener(startAppListening);

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

@@ -0,0 +1,93 @@
+import { useAppStore } from 'app/store/nanostores/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import {
+  isErrorChanged,
+  isLoadingChanged,
+  parsingErrorChanged,
+  promptsChanged,
+  selectDynamicPromptsMaxPrompts,
+} from 'features/dynamicPrompts/store/dynamicPromptsSlice';
+import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
+import { selectPresetModifiedPrompts } from 'features/nodes/util/graph/graphBuilderUtils';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { debounce } from 'lodash-es';
+import { useEffect, useMemo } from 'react';
+import { utilitiesApi } from 'services/api/endpoints/utilities';
+
+const DYNAMIC_PROMPTS_DEBOUNCE_MS = 1000;
+
+/**
+ * This hook watches for changes to state that should trigger dynamic prompts to be updated.
+ */
+export const useDynamicPromptsWatcher = () => {
+  const { getState, dispatch } = useAppStore();
+  // The prompt to process is derived from the preset-modified prompts
+  const presetModifiedPrompts = useAppSelector(selectPresetModifiedPrompts);
+  const maxPrompts = useAppSelector(selectDynamicPromptsMaxPrompts);
+
+  const dynamicPrompting = useFeatureStatus('dynamicPrompting');
+
+  const debouncedUpdateDynamicPrompts = useMemo(
+    () =>
+      debounce(async (positivePrompt: string, maxPrompts: number) => {
+        // Try to fetch the dynamic prompts and store in state
+        try {
+          const req = dispatch(
+            utilitiesApi.endpoints.dynamicPrompts.initiate({
+              prompt: positivePrompt,
+              max_prompts: maxPrompts,
+            })
+          );
+
+          const res = await req.unwrap();
+          req.unsubscribe();
+
+          dispatch(promptsChanged(res.prompts));
+          dispatch(parsingErrorChanged(res.error));
+          dispatch(isErrorChanged(false));
+        } catch {
+          dispatch(isErrorChanged(true));
+          dispatch(isLoadingChanged(false));
+        }
+      }, DYNAMIC_PROMPTS_DEBOUNCE_MS),
+    [dispatch]
+  );
+
+  useEffect(() => {
+    if (!dynamicPrompting) {
+      return;
+    }
+
+    const { positivePrompt } = presetModifiedPrompts;
+
+    // Before we execute, imperatively check the dynamic prompts query cache to see if we have already fetched this prompt
+    const state = getState();
+
+    const cachedPrompts = utilitiesApi.endpoints.dynamicPrompts.select({
+      prompt: positivePrompt,
+      max_prompts: maxPrompts,
+    })(state).data;
+
+    if (cachedPrompts) {
+      // Yep we already did this prompt, use the cached result
+      dispatch(promptsChanged(cachedPrompts.prompts));
+      dispatch(parsingErrorChanged(cachedPrompts.error));
+      return;
+    }
+
+    // If the prompt is not in the cache, check if we should process it - this is just looking for dynamic prompts syntax
+    if (!getShouldProcessPrompt(positivePrompt)) {
+      dispatch(promptsChanged([positivePrompt]));
+      dispatch(parsingErrorChanged(undefined));
+      dispatch(isErrorChanged(false));
+      return;
+    }
+
+    // If we are here, we need to process the prompt
+    if (!state.dynamicPrompts.isLoading) {
+      dispatch(isLoadingChanged(true));
+    }
+
+    debouncedUpdateDynamicPrompts(positivePrompt, maxPrompts);
+  }, [debouncedUpdateDynamicPrompts, dispatch, dynamicPrompting, getState, maxPrompts, presetModifiedPrompts]);
+};

invokeai/frontend/web/src/features/dynamicPrompts/hooks/useDynamicPromptsWatcher.tsx

@@ -36,12 +36,6 @@ export const dynamicPromptsSlice = createSlice({
     maxPromptsChanged: (state, action: PayloadAction<number>) => {
       state.maxPrompts = action.payload;
     },
-    maxPromptsReset: (state) => {
-      state.maxPrompts = initialDynamicPromptsState.maxPrompts;
-    },
-    combinatorialToggled: (state) => {
-      state.combinatorial = !state.combinatorial;
-    },
     promptsChanged: (state, action: PayloadAction<string[]>) => {
       state.prompts = action.payload;
       state.isLoading = false;
@@ -63,8 +57,6 @@ export const dynamicPromptsSlice = createSlice({
 
 export const {
   maxPromptsChanged,
-  maxPromptsReset,
-  combinatorialToggled,
   promptsChanged,
   parsingErrorChanged,
   isErrorChanged,

invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts

@@ -8,7 +8,7 @@ import { isNonRefinerMainModelConfig, isSpandrelImageToImageModelConfig } from '
 import { assert } from 'tsafe';
 
 import { addLoRAs } from './generation/addLoRAs';
-import { getBoardField, getPresetModifiedPrompts } from './graphBuilderUtils';
+import { getBoardField, selectPresetModifiedPrompts } from './graphBuilderUtils';
 
 export const buildMultidiffusionUpscaleGraph = async (
   state: RootState
@@ -97,7 +97,7 @@ export const buildMultidiffusionUpscaleGraph = async (
 
   if (model.base === 'sdxl') {
     const { positivePrompt, negativePrompt, positiveStylePrompt, negativeStylePrompt } =
-      getPresetModifiedPrompts(state);
+      selectPresetModifiedPrompts(state);
 
     posCond = g.addNode({
       type: 'sdxl_compel_prompt',
@@ -130,7 +130,7 @@ export const buildMultidiffusionUpscaleGraph = async (
       negative_style_prompt: negativeStylePrompt,
     });
   } else {
-    const { positivePrompt, negativePrompt } = getPresetModifiedPrompts(state);
+    const { positivePrompt, negativePrompt } = selectPresetModifiedPrompts(state);
 
     posCond = g.addNode({
       type: 'compel',

invokeai/frontend/web/src/features/nodes/util/graph/buildMultidiffusionUpscaleGraph.ts

@@ -16,8 +16,8 @@ import { Graph } from 'features/nodes/util/graph/generation/Graph';
 import {
   CANVAS_OUTPUT_PREFIX,
   getBoardField,
-  getPresetModifiedPrompts,
   getSizes,
+  selectPresetModifiedPrompts,
 } from 'features/nodes/util/graph/graphBuilderUtils';
 import type { ImageOutputNodes } from 'features/nodes/util/graph/types';
 import type { Invocation } from 'services/api/types';
@@ -45,7 +45,7 @@ export const buildCogView4Graph = async (
   assert(model, 'No model found in state');
 
   const { originalSize, scaledSize } = getSizes(bbox);
-  const { positivePrompt, negativePrompt } = getPresetModifiedPrompts(state);
+  const { positivePrompt, negativePrompt } = selectPresetModifiedPrompts(state);
 
   const g = new Graph(getPrefixedId('cogview4_graph'));
   const modelLoader = g.addNode({

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildCogView4Graph.ts

@@ -19,8 +19,8 @@ import { Graph } from 'features/nodes/util/graph/generation/Graph';
 import {
   CANVAS_OUTPUT_PREFIX,
   getBoardField,
-  getPresetModifiedPrompts,
   getSizes,
+  selectPresetModifiedPrompts,
 } from 'features/nodes/util/graph/graphBuilderUtils';
 import type { ImageOutputNodes } from 'features/nodes/util/graph/types';
 import { t } from 'i18next';
@@ -91,7 +91,7 @@ export const buildFLUXGraph = async (
     guidance = 30;
   }
 
-  const { positivePrompt } = getPresetModifiedPrompts(state);
+  const { positivePrompt } = selectPresetModifiedPrompts(state);
 
   const g = new Graph(getPrefixedId('flux_graph'));
   const modelLoader = g.addNode({

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildFLUXGraph.ts

@@ -20,8 +20,8 @@ import { Graph } from 'features/nodes/util/graph/generation/Graph';
 import {
   CANVAS_OUTPUT_PREFIX,
   getBoardField,
-  getPresetModifiedPrompts,
   getSizes,
+  selectPresetModifiedPrompts,
 } from 'features/nodes/util/graph/graphBuilderUtils';
 import type { ImageOutputNodes } from 'features/nodes/util/graph/types';
 import { selectMainModelConfig } from 'services/api/endpoints/models';
@@ -62,7 +62,7 @@ export const buildSD1Graph = async (
   assert(model, 'No model found in state');
 
   const fp32 = vaePrecision === 'fp32';
-  const { positivePrompt, negativePrompt } = getPresetModifiedPrompts(state);
+  const { positivePrompt, negativePrompt } = selectPresetModifiedPrompts(state);
   const { originalSize, scaledSize } = getSizes(bbox);
 
   const g = new Graph(getPrefixedId('sd1_graph'));

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildSD1Graph.ts

@@ -15,8 +15,8 @@ import { Graph } from 'features/nodes/util/graph/generation/Graph';
 import {
   CANVAS_OUTPUT_PREFIX,
   getBoardField,
-  getPresetModifiedPrompts,
   getSizes,
+  selectPresetModifiedPrompts,
 } from 'features/nodes/util/graph/graphBuilderUtils';
 import type { ImageOutputNodes } from 'features/nodes/util/graph/types';
 import { selectMainModelConfig } from 'services/api/endpoints/models';
@@ -56,7 +56,7 @@ export const buildSD3Graph = async (
   } = params;
 
   const { originalSize, scaledSize } = getSizes(bbox);
-  const { positivePrompt, negativePrompt } = getPresetModifiedPrompts(state);
+  const { positivePrompt, negativePrompt } = selectPresetModifiedPrompts(state);
 
   const g = new Graph(getPrefixedId('sd3_graph'));
   const modelLoader = g.addNode({