feat: workflow builder

invokeai/frontend/web/package.json

@@ -58,10 +58,11 @@
     "@dagrejs/dagre": "^1.1.4",
     "@dagrejs/graphlib": "^2.2.4",
     "@fontsource-variable/inter": "^5.1.0",
-    "@invoke-ai/ui-library": "^0.0.44",
+    "@invoke-ai/ui-library": "^0.0.46",
     "@nanostores/react": "^0.7.3",
     "@reduxjs/toolkit": "2.2.3",
     "@roarr/browser-log-writer": "^1.3.0",
+    "@xyflow/react": "^12.4.2",
     "async-mutex": "^0.5.0",
     "chakra-react-select": "^4.9.2",
     "cmdk": "^1.0.0",
@@ -96,9 +97,9 @@
     "react-icons": "^5.3.0",
     "react-redux": "9.1.2",
     "react-resizable-panels": "^2.1.4",
+    "react-textarea-autosize": "^8.5.7",
     "react-use": "^17.5.1",
     "react-virtuoso": "^4.10.4",
-    "reactflow": "^11.11.4",
     "redux-dynamic-middlewares": "^2.2.0",
     "redux-remember": "^5.1.0",
     "redux-undo": "^1.1.0",

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

@@ -187,7 +187,10 @@
         "values": "Values",
         "resetToDefaults": "Reset to Defaults",
         "seed": "Seed",
-        "combinatorial": "Combinatorial"
+        "combinatorial": "Combinatorial",
+        "layout": "Layout",
+        "row": "Row",
+        "column": "Column"
     },
     "hrf": {
         "hrf": "High Resolution Fix",
@@ -931,13 +934,15 @@
         "noWorkflows": "No Workflows",
         "noMatchingWorkflows": "No Matching Workflows",
         "noWorkflow": "No Workflow",
+        "unableToUpdateNode": "Node update failed: node {{node}} of type {{type}} (may require deleting and recreating)",
         "mismatchedVersion": "Invalid node: node {{node}} of type {{type}} has mismatched version (try updating?)",
         "missingTemplate": "Invalid node: node {{node}} of type {{type}} missing template (not installed?)",
         "sourceNodeDoesNotExist": "Invalid edge: source/output node {{node}} does not exist",
         "targetNodeDoesNotExist": "Invalid edge: target/input node {{node}} does not exist",
         "sourceNodeFieldDoesNotExist": "Invalid edge: source/output field {{node}}.{{field}} does not exist",
         "targetNodeFieldDoesNotExist": "Invalid edge: target/input field {{node}}.{{field}} does not exist",
         "deletedInvalidEdge": "Deleted invalid edge {{source}} -> {{target}}",
+        "deletedMissingNodeFieldFormElement": "Deleted missing form field: node {{nodeId}} field {{fieldName}}",
         "noConnectionInProgress": "No connection in progress",
         "node": "Node",
         "nodeOutputs": "Node Outputs",
@@ -952,6 +957,7 @@
         "nodeVersion": "Node Version",
         "noOutputRecorded": "No outputs recorded",
         "notes": "Notes",
+        "description": "Description",
         "notesDescription": "Add notes about your workflow",
         "problemSettingTitle": "Problem Setting Title",
         "resetToDefaultValue": "Reset to default value",
@@ -1694,7 +1700,26 @@
         "download": "Download",
         "copyShareLink": "Copy Share Link",
         "copyShareLinkForWorkflow": "Copy Share Link for Workflow",
-        "delete": "Delete"
+        "delete": "Delete",
+        "builder": {
+            "builder": "Builder",
+            "layout": "Layout",
+            "row": "Row",
+            "column": "Column",
+            "label": "Label",
+            "description": "Description",
+            "component": "Component",
+            "numberInput": "Number Input",
+            "slider": "Slider",
+            "both": "Both",
+            "emptyRootPlaceholderViewMode": "Click Edit to start building a form for this workflow.",
+            "emptyRootPlaceholderEditMode": "Drag a form element or node field here to get started.",
+            "containerPlaceholder": "Empty Container",
+            "containerPlaceholderDesc": "Drag a form element or node field into this container.",
+            "headingPlaceholder": "Empty Heading",
+            "textPlaceholder": "Empty Text",
+            "workflowBuilderAlphaWarning": "The workflow builder is currently in alpha. There may be breaking changes before the stable release."
+        }
     },
     "controlLayers": {
         "regional": "Regional",

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

@@ -1,5 +1,6 @@
 import '@fontsource-variable/inter';
 import 'overlayscrollbars/overlayscrollbars.css';
+import '@xyflow/react/dist/base.css';
 
 import { ChakraProvider, DarkMode, extendTheme, theme as _theme, TOAST_OPTIONS } from '@invoke-ai/ui-library';
 import type { ReactNode } from 'react';

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

@@ -8,36 +8,50 @@ import { imageDeletionConfirmed } from 'features/deleteImageModal/store/actions'
 import { isModalOpenChanged } from 'features/deleteImageModal/store/slice';
 import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
 import { imageSelected } from 'features/gallery/store/gallerySlice';
-import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
-import { isImageFieldInputInstance } from 'features/nodes/types/field';
+import { fieldImageCollectionValueChanged, fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
+import { isImageFieldCollectionInputInstance, isImageFieldInputInstance } from 'features/nodes/types/field';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { forEach, intersectionBy } from 'lodash-es';
 import { imagesApi } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
+import type { Param0 } from 'tsafe';
 
 const log = logger('gallery');
 
 //TODO(psyche): handle image deletion (canvas staging area?)
 
 // Some utils to delete images from different parts of the app
 const deleteNodesImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
+  const actions: Param0<typeof dispatch>[] = [];
   state.nodes.present.nodes.forEach((node) => {
     if (!isInvocationNode(node)) {
       return;
     }
 
     forEach(node.data.inputs, (input) => {
       if (isImageFieldInputInstance(input) && input.value?.image_name === imageDTO.image_name) {
-        dispatch(
+        actions.push(
           fieldImageValueChanged({
             nodeId: node.data.id,
             fieldName: input.name,
             value: undefined,
           })
         );
+        return;
+      }
+      if (isImageFieldCollectionInputInstance(input)) {
+        actions.push(
+          fieldImageCollectionValueChanged({
+            nodeId: node.data.id,
+            fieldName: input.name,
+            value: input.value?.filter((value) => value?.image_name !== imageDTO.image_name),
+          })
+        );
       }
     });
   });
+
+  actions.forEach(dispatch);
 };
 
 const deleteControlLayerImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {

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

@@ -1,6 +1,6 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { $nodeExecutionStates } from 'features/nodes/hooks/useExecutionState';
+import { $nodeExecutionStates } from 'features/nodes/hooks/useNodeExecutionState';
 import { workflowLoaded, workflowLoadRequested } from 'features/nodes/store/actions';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { $needsFit } from 'features/nodes/store/reactFlowInstance';

invokeai/frontend/web/src/common/components/IAIImageFallback.tsx

@@ -1,5 +1,6 @@
-import type { As, ChakraProps, FlexProps } from '@invoke-ai/ui-library';
+import type { ChakraProps, FlexProps } from '@invoke-ai/ui-library';
 import { Flex, Icon, Skeleton, Spinner, Text } from '@invoke-ai/ui-library';
+import type { ElementType } from 'react';
 import { memo, useMemo } from 'react';
 import { PiImageBold } from 'react-icons/pi';
 import type { ImageDTO } from 'services/api/types';
@@ -28,7 +29,7 @@ IAILoadingImageFallback.displayName = 'IAILoadingImageFallback';
 
 type IAINoImageFallbackProps = FlexProps & {
   label?: string;
-  icon?: As | null;
+  icon?: ElementType | null;
   boxSize?: ChakraProps['boxSize'];
 };