feat: add UI for IP Adapter Method

invokeai/app/invocations/metadata.py

@@ -36,6 +36,7 @@ class IPAdapterMetadataField(BaseModel):
     image: ImageField = Field(description="The IP-Adapter image prompt.")
     ip_adapter_model: ModelIdentifierField = Field(description="The IP-Adapter model.")
     clip_vision_model: Literal["ViT-H", "ViT-G"] = Field(description="The CLIP Vision model")
+    method: Literal["full", "style", "composition"] = Field(description="Method to apply IP Weights with")
     weight: Union[float, list[float]] = Field(description="The weight given to the IP-Adapter")
     begin_step_percent: float = Field(description="When the IP-Adapter is first applied (% of total steps)")
     end_step_percent: float = Field(description="When the IP-Adapter is last applied (% of total steps)")

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

@@ -213,6 +213,10 @@
         "resize": "Resize",
         "resizeSimple": "Resize (Simple)",
         "resizeMode": "Resize Mode",
+        "ipAdapterMethod": "Method",
+        "full": "Full",
+        "style": "Style Only",
+        "composition": "Composition Only",
         "safe": "Safe",
         "saveControlImage": "Save Control Image",
         "scribble": "scribble",

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx

@@ -21,6 +21,7 @@ import ControlAdapterShouldAutoConfig from './ControlAdapterShouldAutoConfig';
 import ControlNetCanvasImageImports from './imports/ControlNetCanvasImageImports';
 import { ParamControlAdapterBeginEnd } from './parameters/ParamControlAdapterBeginEnd';
 import ParamControlAdapterControlMode from './parameters/ParamControlAdapterControlMode';
+import ParamControlAdapterIPMethod from './parameters/ParamControlAdapterIPMethod';
 import ParamControlAdapterProcessorSelect from './parameters/ParamControlAdapterProcessorSelect';
 import ParamControlAdapterResizeMode from './parameters/ParamControlAdapterResizeMode';
 import ParamControlAdapterWeight from './parameters/ParamControlAdapterWeight';
@@ -111,7 +112,8 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
 
       <Flex w="full" flexDir="column" gap={4}>
         <Flex gap={8} w="full" alignItems="center">
-          <Flex flexDir="column" gap={2} h={32} w="full">
+          <Flex flexDir="column" gap={4} h={40} w="full">
+            <ParamControlAdapterIPMethod id={id} />
             <ParamControlAdapterWeight id={id} />
             <ParamControlAdapterBeginEnd id={id} />
           </Flex>

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterIPMethod.tsx

@@ -0,0 +1,63 @@
+import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
+import { useControlAdapterIPMethod } from 'features/controlAdapters/hooks/useControlAdapterIPMethod';
+import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
+import { controlAdapterIPMethodChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
+import type { IPMethod } from 'features/controlAdapters/store/types';
+import { isIPMethod } from 'features/controlAdapters/store/types';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  id: string;
+};
+
+const ParamControlAdapterIPMethod = ({ id }: Props) => {
+  const isEnabled = useControlAdapterIsEnabled(id);
+  const method = useControlAdapterIPMethod(id);
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+
+  const options: { label: string; value: IPMethod }[] = useMemo(
+    () => [
+      { label: t('controlnet.full'), value: 'full' },
+      { label: t('controlnet.style'), value: 'style' },
+      { label: t('controlnet.composition'), value: 'composition' },
+    ],
+    [t]
+  );
+
+  const handleIPMethodChanged = useCallback<ComboboxOnChange>(
+    (v) => {
+      if (!isIPMethod(v?.value)) {
+        return;
+      }
+      dispatch(
+        controlAdapterIPMethodChanged({
+          id,
+          method: v.value,
+        })
+      );
+    },
+    [id, dispatch]
+  );
+
+  const value = useMemo(() => options.find((o) => o.value === method), [options, method]);
+
+  if (!method) {
+    return null;
+  }
+
+  return (
+    <FormControl>
+      <InformationalPopover feature="controlNetResizeMode">
+        <FormLabel>{t('controlnet.ipAdapterMethod')}</FormLabel>
+      </InformationalPopover>
+      <Combobox value={value} options={options} isDisabled={!isEnabled} onChange={handleIPMethodChanged} />
+    </FormControl>
+  );
+};
+
+export default memo(ParamControlAdapterIPMethod);

invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterIPMethod.ts

@@ -0,0 +1,24 @@
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import {
+  selectControlAdapterById,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
+import { useMemo } from 'react';
+
+export const useControlAdapterIPMethod = (id: string) => {
+  const selector = useMemo(
+    () =>
+      createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
+        const cn = selectControlAdapterById(controlAdapters, id);
+        if (cn && cn?.type === 'ip_adapter') {
+          return cn.method;
+        }
+      }),
+    [id]
+  );
+
+  const method = useAppSelector(selector);
+
+  return method;
+};

invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts

@@ -21,6 +21,7 @@ import type {
   ControlAdapterType,
   ControlMode,
   ControlNetConfig,
+  IPMethod,
   RequiredControlAdapterProcessorNode,
   ResizeMode,
   T2IAdapterConfig,
@@ -245,6 +246,10 @@ export const controlAdaptersSlice = createSlice({
       }
       caAdapter.updateOne(state, { id, changes: { controlMode } });
     },
+    controlAdapterIPMethodChanged: (state, action: PayloadAction<{ id: string; method: IPMethod }>) => {
+      const { id, method } = action.payload;
+      caAdapter.updateOne(state, { id, changes: { method } });
+    },
     controlAdapterCLIPVisionModelChanged: (
       state,
       action: PayloadAction<{ id: string; clipVisionModel: CLIPVisionModel }>
@@ -390,6 +395,7 @@ export const {
   controlAdapterIsEnabledChanged,
   controlAdapterModelChanged,
   controlAdapterCLIPVisionModelChanged,
+  controlAdapterIPMethodChanged,
   controlAdapterWeightChanged,
   controlAdapterBeginStepPctChanged,
   controlAdapterEndStepPctChanged,

invokeai/frontend/web/src/features/controlAdapters/store/types.ts

@@ -210,6 +210,10 @@ const zResizeMode = z.enum(['just_resize', 'crop_resize', 'fill_resize', 'just_r
 export type ResizeMode = z.infer<typeof zResizeMode>;
 export const isResizeMode = (v: unknown): v is ResizeMode => zResizeMode.safeParse(v).success;
 
+const zIPMethod = z.enum(['full', 'style', 'composition']);
+export type IPMethod = z.infer<typeof zIPMethod>;
+export const isIPMethod = (v: unknown): v is IPMethod => zIPMethod.safeParse(v).success;
+
 export type ControlNetConfig = {
   type: 'controlnet';
   id: string;
@@ -253,6 +257,7 @@ export type IPAdapterConfig = {
   model: ParameterIPAdapterModel | null;
   clipVisionModel: CLIPVisionModel;
   weight: number;
+  method: IPMethod;
   beginStepPct: number;
   endStepPct: number;
 };

invokeai/frontend/web/src/features/controlAdapters/util/buildControlAdapter.ts

@@ -46,6 +46,7 @@ export const initialIPAdapter: Omit<IPAdapterConfig, 'id'> = {
   isEnabled: true,
   controlImage: null,
   model: null,
+  method: 'full',
   clipVisionModel: 'ViT-H',
   weight: 1,
   beginStepPct: 0,

invokeai/frontend/web/src/features/metadata/util/parsers.ts

@@ -386,6 +386,7 @@ const parseIPAdapter: MetadataParseFunc<IPAdapterConfigMetadata> = async (metada
     clipVisionModel: 'ViT-H',
     controlImage: image?.image_name ?? null,
     weight: weight ?? initialIPAdapter.weight,
+    method: 'full',
     beginStepPct: begin_step_percent ?? initialIPAdapter.beginStepPct,
     endStepPct: end_step_percent ?? initialIPAdapter.endStepPct,
   };

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

@@ -48,7 +48,7 @@ export const addIPAdapterToLinearGraph = async (
       if (!ipAdapter.model) {
         return;
       }
-      const { id, weight, model, clipVisionModel, beginStepPct, endStepPct, controlImage } = ipAdapter;
+      const { id, weight, model, clipVisionModel, method, beginStepPct, endStepPct, controlImage } = ipAdapter;
 
       assert(controlImage, 'IP Adapter image is required');
 
@@ -57,7 +57,7 @@ export const addIPAdapterToLinearGraph = async (
         type: 'ip_adapter',
         is_intermediate: true,
         weight: weight,
-        method: 'composition',
+        method: method,
         ip_adapter_model: model,
         clip_vision_model: clipVisionModel,
         begin_step_percent: beginStepPct,
@@ -85,7 +85,7 @@ export const addIPAdapterToLinearGraph = async (
 };
 
 const buildIPAdapterMetadata = (ipAdapter: IPAdapterConfig): S['IPAdapterMetadataField'] => {
-  const { controlImage, beginStepPct, endStepPct, model, clipVisionModel, weight } = ipAdapter;
+  const { controlImage, beginStepPct, endStepPct, model, clipVisionModel, method, weight } = ipAdapter;
 
   assert(model, 'IP Adapter model is required');
 
@@ -103,6 +103,7 @@ const buildIPAdapterMetadata = (ipAdapter: IPAdapterConfig): S['IPAdapterMetadat
     ip_adapter_model: model,
     clip_vision_model: clipVisionModel,
     weight,
+    method,
     begin_step_percent: beginStepPct,
     end_step_percent: endStepPct,
     image,