refactor(ui): persistent workflow field value generators

Previously, workflow generators existed on a layer above the workflow and were ephemeral. Generators could be run and the result saved to the workflow.

There was no way to have the generator and its settings to be an inherent part of the workflow. When you refresh the page or load a workflow, the generator settings are reset.

For example, a number collection field's value is a list of numbers. When you use a range generator for that field, the generated list of numbers is written to the workflow. When you refresh the page or load the workflow later, all you have is the list of numbers.

This change makes generators a part of the workflow itself. In other words, the a field's generator settings are persisted to the workflow alongside the field, and eligible fields can be thought of as having a generator _as_ their state.

For example, consider a number collection. If the field has a generator enabled, the generator settings are stored in the workflow directly, in that field's state. When we need to access the field's value, if it has a generator, we run the generator. If there is no generator, we get the directly-entered value.

This enables an important use-case, where the workflow editor can set up a good baseline generator and save it to the workflow.

Then the workflow user loads the workflow, and they just see the generator settings, importantly with the default values set by the editor. They never need to see a big list of values.

- Add generator persistence to number collection field values.
- Update all logic that references field values to use "resolved" field values if the field is a number collection field. This includes validation logic.
- Rework the generator UI. Generators are now part of each field, not a separate modal. You can enable the generator, reset its values, commit them and then edit them. Or, disable the generator to manually edit the values.
- Support locking the linear view mode. If the workflow editor locks the field, the linear view will be slimmed down, showing only the generator fields.
- Rework how the "reset to default value" functionality works with exposed fields to also work with generators. **Unfortunately, this did require some changes to redux state that I cannot easily handle in a redux state migration. As a result, on the first run after updating Invoke, their workflow editor state will be erased.**

Author: psychedelicious

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

@@ -855,7 +855,13 @@
     },
     "nodes": {
         "noBatchGroup": "no group",
+        "generator": "Generator",
+        "generatedValues": "Generated Values",
+        "commitValues": "Commit Values",
+        "addValue": "Add Value",
         "addNode": "Add Node",
+        "lockLinearView": "Lock Linear View",
+        "unlockLinearView": "Unlock Linear View",
         "addNodeToolTip": "Add Node (Shift+A, Space)",
         "addLinearView": "Add to Linear View",
         "animatedEdges": "Animated Edges",
@@ -994,11 +1000,7 @@
         "imageAccessError": "Unable to find image {{image_name}}, resetting to default",
         "boardAccessError": "Unable to find board {{board_id}}, resetting to default",
         "modelAccessError": "Unable to find model {{key}}, resetting to default",
-        "saveToGallery": "Save To Gallery",
-        "addItem": "Add Item",
-        "generateValues": "Generate Values",
-        "floatRangeGenerator": "Float Range Generator",
-        "integerRangeGenerator": "Integer Range Generator"
+        "saveToGallery": "Save To Gallery"
     },
     "parameters": {
         "aspect": "Aspect",

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

@@ -22,8 +22,6 @@ import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicP
 import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
 import { ImageContextMenu } from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
 import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast';
-import { FloatRangeGeneratorModal } from 'features/nodes/components/FloatRangeGeneratorModal';
-import { IntegerRangeGeneratorModal } from 'features/nodes/components/IntegerRangeGeneratorModal';
 import { ShareWorkflowModal } from 'features/nodes/components/sidePanel/WorkflowListMenu/ShareWorkflowModal';
 import { ClearQueueConfirmationsAlertDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { DeleteStylePresetDialog } from 'features/stylePresets/components/DeleteStylePresetDialog';
@@ -112,8 +110,6 @@ const App = ({ config = DEFAULT_CONFIG, studioInitAction }: Props) => {
       <ImageContextMenu />
       <FullscreenDropzone />
       <VideosModal />
-      <FloatRangeGeneratorModal />
-      <IntegerRangeGeneratorModal />
     </ErrorBoundary>
   );
 };

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

@@ -9,6 +9,7 @@ import {
   isIntegerFieldCollectionInputInstance,
   isStringFieldCollectionInputInstance,
 } from 'features/nodes/types/field';
+import { resolveNumberFieldCollectionValue } from 'features/nodes/types/fieldValidators';
 import type { InvocationNodeEdge } from 'features/nodes/types/invocation';
 import { isBatchNode, isInvocationNode } from 'features/nodes/types/invocation';
 import { buildNodesGraph } from 'features/nodes/util/graph/buildNodesGraph';
@@ -140,10 +141,11 @@ export const addEnqueueRequestedNodes = (startAppListening: AppStartListening) =
 
           // Find outgoing edges from the batch node, we will remove these from the graph and create batch data collection items from them instead
           const edgesFromStringBatch = nodes.edges.filter((e) => e.source === node.id && e.sourceHandle === 'value');
+          const resolvedValue = resolveNumberFieldCollectionValue(integers);
           if (batchGroupId !== 'None') {
-            addZippedBatchDataCollectionItem(edgesFromStringBatch, integers.value);
+            addZippedBatchDataCollectionItem(edgesFromStringBatch, resolvedValue);
           } else {
-            addProductBatchDataCollectionItem(edgesFromStringBatch, integers.value);
+            addProductBatchDataCollectionItem(edgesFromStringBatch, resolvedValue);
           }
         }
 
@@ -163,10 +165,11 @@ export const addEnqueueRequestedNodes = (startAppListening: AppStartListening) =
 
           // Find outgoing edges from the batch node, we will remove these from the graph and create batch data collection items from them instead
           const edgesFromStringBatch = nodes.edges.filter((e) => e.source === node.id && e.sourceHandle === 'value');
+          const resolvedValue = resolveNumberFieldCollectionValue(floats);
           if (batchGroupId !== 'None') {
-            addZippedBatchDataCollectionItem(edgesFromStringBatch, floats.value);
+            addZippedBatchDataCollectionItem(edgesFromStringBatch, resolvedValue);
           } else {
-            addProductBatchDataCollectionItem(edgesFromStringBatch, floats.value);
+            addProductBatchDataCollectionItem(edgesFromStringBatch, resolvedValue);
           }
         }
 

invokeai/frontend/web/src/app/store/store.ts

@@ -166,8 +166,10 @@ export const createStore = (uniqueStoreKey?: string, persist = true) =>
     reducer: rememberedRootReducer,
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware({
-        serializableCheck: import.meta.env.MODE === 'development',
-        immutableCheck: import.meta.env.MODE === 'development',
+        serializableCheck: false,
+        immutableCheck: false,
+        // serializableCheck: import.meta.env.MODE === 'development',
+        // immutableCheck: import.meta.env.MODE === 'development',
       })
         .concat(api.middleware)
         .concat(dynamicMiddlewares)

invokeai/frontend/web/src/features/nodes/components/FloatRangeGeneratorModal.tsx

@@ -43,7 +43,7 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
                 {fieldNames.connectionFields.map((fieldName, i) => (
                   <GridItem gridColumnStart={1} gridRowStart={i + 1} key={`${nodeId}.${fieldName}.input-field`}>
                     <InvocationInputFieldCheck nodeId={nodeId} fieldName={fieldName}>
-                      <InputField nodeId={nodeId} fieldName={fieldName} />
+                      <InputField nodeId={nodeId} fieldName={fieldName} isLinearView={false} />
                     </InvocationInputFieldCheck>
                   </GridItem>
                 ))}
@@ -59,7 +59,7 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
                   nodeId={nodeId}
                   fieldName={fieldName}
                 >
-                  <InputField nodeId={nodeId} fieldName={fieldName} />
+                  <InputField nodeId={nodeId} fieldName={fieldName} isLinearView={false} />
                 </InvocationInputFieldCheck>
               ))}
               {fieldNames.missingFields.map((fieldName) => (
@@ -68,7 +68,7 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
                   nodeId={nodeId}
                   fieldName={fieldName}
                 >
-                  <InputField nodeId={nodeId} fieldName={fieldName} />
+                  <InputField nodeId={nodeId} fieldName={fieldName} isLinearView={false} />
                 </InvocationInputFieldCheck>
               ))}
             </Flex>

invokeai/frontend/web/src/features/nodes/components/IntegerRangeGeneratorModal.tsx

@@ -1,7 +1,7 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useFieldValue } from 'features/nodes/hooks/useFieldValue';
+import { useFieldInputInstance } from 'features/nodes/hooks/useFieldInputInstance';
 import {
   selectWorkflowSlice,
   workflowExposedFieldAdded,
@@ -19,7 +19,7 @@ type Props = {
 const FieldLinearViewToggle = ({ nodeId, fieldName }: Props) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const value = useFieldValue(nodeId, fieldName);
+  const field = useFieldInputInstance(nodeId, fieldName);
   const selectIsExposed = useMemo(
     () =>
       createSelector(selectWorkflowSlice, (workflow) => {
@@ -31,8 +31,11 @@ const FieldLinearViewToggle = ({ nodeId, fieldName }: Props) => {
   const isExposed = useAppSelector(selectIsExposed);
 
   const handleExposeField = useCallback(() => {
-    dispatch(workflowExposedFieldAdded({ nodeId, fieldName, value }));
-  }, [dispatch, fieldName, nodeId, value]);
+    if (!field) {
+      return;
+    }
+    dispatch(workflowExposedFieldAdded({ nodeId, fieldName, field }));
+  }, [dispatch, field, fieldName, nodeId]);
 
   const handleUnexposeField = useCallback(() => {
     dispatch(workflowExposedFieldRemoved({ nodeId, fieldName }));

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx

@@ -14,9 +14,10 @@ import { InputFieldWrapper } from './InputFieldWrapper';
 interface Props {
   nodeId: string;
   fieldName: string;
+  isLinearView: boolean;
 }
 
-const InputField = ({ nodeId, fieldName }: Props) => {
+const InputField = ({ nodeId, fieldName, isLinearView }: Props) => {
   const fieldTemplate = useFieldInputTemplate(nodeId, fieldName);
   const [isHovered, setIsHovered] = useState(false);
   const isInvalid = useFieldIsInvalid(nodeId, fieldName);
@@ -69,12 +70,12 @@ const InputField = ({ nodeId, fieldName }: Props) => {
         px={2}
       >
         <Flex flexDir="column" w="full" gap={1} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-          <Flex gap={1}>
+          <Flex gap={1} alignItems="center">
             <EditableFieldTitle nodeId={nodeId} fieldName={fieldName} kind="inputs" isInvalid={isInvalid} withTooltip />
             {isHovered && <FieldResetToDefaultValueButton nodeId={nodeId} fieldName={fieldName} />}
             {isHovered && <FieldLinearViewToggle nodeId={nodeId} fieldName={fieldName} />}
           </Flex>
-          <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
+          <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} isLinearView={isLinearView} />
         </Flex>
       </FormControl>