feat(ui): clip skip in sdxl graphs (wip)

- Update metadata accumulator to have `clip2_skip`
- Add `ParamClip2Skip`
- Update `activeLabel` to display both clips
- Update graph builders

TODO:
- Update the extra addXToGraph helpers that interact with CLIP, I got a bit lost in this and setting it aside for now.

invokeai/app/invocations/metadata.py

@@ -45,6 +45,9 @@ class CoreMetadata(BaseModelExcludeNull):
     clip_skip: int = Field(
         description="The number of skipped CLIP layers",
     )
+    clip2_skip: int = Field(
+        description="The number of skipped CLIP2 layers",
+    )
     model: MainModelField = Field(description="The main model used for inference")
     controlnets: list[ControlField] = Field(description="The ControlNets used for inference")
     loras: list[LoRAMetadataField] = Field(description="The LoRAs used for inference")
@@ -119,6 +122,9 @@ class MetadataAccumulatorInvocation(BaseInvocation):
     clip_skip: int = InputField(
         description="The number of skipped CLIP layers",
     )
+    clip2_skip: int = InputField(
+        description="The number of skipped CLIP2 layers",
+    )
     model: MainModelField = InputField(description="The main model used for inference")
     controlnets: list[ControlField] = InputField(description="The ControlNets used for inference")
     loras: list[LoRAMetadataField] = InputField(description="The LoRAs used for inference")

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

@@ -885,7 +885,9 @@
         },
         "cfgScale": "CFG Scale",
         "clipSkip": "CLIP Skip",
+        "clip2Skip": "CLIP2 Skip",
         "clipSkipWithLayerCount": "CLIP Skip {{layerCount}}",
+        "clip12SkipWithLayerCount": "CLIP Skip {{clipLayerCount}}/{{clip2LayerCount}}",
         "closeViewer": "Close Viewer",
         "codeformerFidelity": "Fidelity",
         "coherenceMode": "Mode",

invokeai/frontend/web/src/features/nodes/types/types.ts

@@ -1133,6 +1133,7 @@ export const zCoreMetadata = z
     steps: z.number().int().nullish().catch(null),
     scheduler: z.string().nullish().catch(null),
     clip_skip: z.number().int().nullish().catch(null),
+    clip2_skip: z.number().int().nullish().catch(null),
     model: z
       .union([zMainModel.deepPartial(), zOnnxModel.deepPartial()])
       .nullish()

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts

@@ -13,6 +13,8 @@ import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
   CANVAS_OUTPUT,
+  CLIP2_SKIP,
+  CLIP_SKIP,
   IMAGE_TO_LATENTS,
   IMG2IMG_RESIZE,
   LATENTS_TO_IMAGE,
@@ -41,11 +43,12 @@ export const buildCanvasSDXLImageToImageGraph = (
     negativePrompt,
     model,
     cfgScale: cfg_scale,
+    clipSkip,
+    clip2Skip,
     scheduler,
     seed,
     steps,
     vaePrecision,
-    clipSkip,
     shouldUseCpuNoise,
     seamlessXAxis,
     seamlessYAxis,
@@ -100,6 +103,18 @@ export const buildCanvasSDXLImageToImageGraph = (
         id: modelLoaderNodeId,
         model,
       },
+      [CLIP_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP_SKIP,
+        skipped_layers: clipSkip,
+        is_intermediate,
+      },
+      [CLIP2_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP2_SKIP,
+        skipped_layers: clip2Skip,
+        is_intermediate,
+      },
       [POSITIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
@@ -162,7 +177,7 @@ export const buildCanvasSDXLImageToImageGraph = (
           field: 'clip',
         },
         destination: {
-          node_id: POSITIVE_CONDITIONING,
+          node_id: CLIP_SKIP,
           field: 'clip',
         },
       },
@@ -171,6 +186,26 @@ export const buildCanvasSDXLImageToImageGraph = (
           node_id: modelLoaderNodeId,
           field: 'clip2',
         },
+        destination: {
+          node_id: CLIP2_SKIP,
+          field: 'clip',
+        },
+      },
+      {
+        source: {
+          node_id: CLIP_SKIP,
+          field: 'clip',
+        },
+        destination: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'clip',
+        },
+      },
+      {
+        source: {
+          node_id: CLIP2_SKIP,
+          field: 'clip',
+        },
         destination: {
           node_id: POSITIVE_CONDITIONING,
           field: 'clip2',
@@ -178,7 +213,7 @@ export const buildCanvasSDXLImageToImageGraph = (
       },
       {
         source: {
-          node_id: modelLoaderNodeId,
+          node_id: CLIP_SKIP,
           field: 'clip',
         },
         destination: {
@@ -188,8 +223,8 @@ export const buildCanvasSDXLImageToImageGraph = (
       },
       {
         source: {
-          node_id: modelLoaderNodeId,
+          node_id: CLIP2_SKIP,
-          field: 'clip2',
+          field: 'clip',
         },
         destination: {
           node_id: NEGATIVE_CONDITIONING,
@@ -340,6 +375,7 @@ export const buildCanvasSDXLImageToImageGraph = (
     controlnets: [], // populated in addControlNetToLinearGraph
     loras: [], // populated in addLoRAsToGraph
     clip_skip: clipSkip,
+    clip2_skip: clip2Skip,
     strength,
     init_image: initialImage.image_name,
   };

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts

@@ -25,6 +25,8 @@ import {
   CANVAS_COHERENCE_NOISE,
   CANVAS_COHERENCE_NOISE_INCREMENT,
   CANVAS_OUTPUT,
+  CLIP2_SKIP,
+  CLIP_SKIP,
   INPAINT_CREATE_MASK,
   INPAINT_IMAGE,
   INPAINT_IMAGE_RESIZE_DOWN,
@@ -58,6 +60,8 @@ export const buildCanvasSDXLInpaintGraph = (
     negativePrompt,
     model,
     cfgScale: cfg_scale,
+    clipSkip,
+    clip2Skip,
     scheduler,
     steps,
     seed,
@@ -111,6 +115,18 @@ export const buildCanvasSDXLInpaintGraph = (
         id: modelLoaderNodeId,
         model,
       },
+      [CLIP_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP_SKIP,
+        skipped_layers: clipSkip,
+        is_intermediate,
+      },
+      [CLIP2_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP2_SKIP,
+        skipped_layers: clip2Skip,
+        is_intermediate,
+      },
       [POSITIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
@@ -215,7 +231,7 @@ export const buildCanvasSDXLInpaintGraph = (
           field: 'clip',
         },
         destination: {
-          node_id: POSITIVE_CONDITIONING,
+          node_id: CLIP_SKIP,
           field: 'clip',
         },
       },
@@ -224,6 +240,26 @@ export const buildCanvasSDXLInpaintGraph = (
           node_id: modelLoaderNodeId,
           field: 'clip2',
         },
+        destination: {
+          node_id: CLIP2_SKIP,
+          field: 'clip2',
+        },
+      },
+      {
+        source: {
+          node_id: CLIP_SKIP,
+          field: 'clip',
+        },
+        destination: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'clip',
+        },
+      },
+      {
+        source: {
+          node_id: CLIP2_SKIP,
+          field: 'clip',
+        },
         destination: {
           node_id: POSITIVE_CONDITIONING,
           field: 'clip2',
@@ -231,7 +267,7 @@ export const buildCanvasSDXLInpaintGraph = (
       },
       {
         source: {
-          node_id: modelLoaderNodeId,
+          node_id: CLIP_SKIP,
           field: 'clip',
         },
         destination: {
@@ -241,7 +277,7 @@ export const buildCanvasSDXLInpaintGraph = (
       },
       {
         source: {
-          node_id: modelLoaderNodeId,
+          node_id: CLIP2_SKIP,
           field: 'clip2',
         },
         destination: {

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts

@@ -24,6 +24,8 @@ import {
   CANVAS_COHERENCE_NOISE,
   CANVAS_COHERENCE_NOISE_INCREMENT,
   CANVAS_OUTPUT,
+  CLIP2_SKIP,
+  CLIP_SKIP,
   INPAINT_CREATE_MASK,
   INPAINT_IMAGE,
   INPAINT_IMAGE_RESIZE_DOWN,
@@ -60,6 +62,8 @@ export const buildCanvasSDXLOutpaintGraph = (
     negativePrompt,
     model,
     cfgScale: cfg_scale,
+    clipSkip,
+    clip2Skip,
     scheduler,
     steps,
     seed,
@@ -115,6 +119,18 @@ export const buildCanvasSDXLOutpaintGraph = (
         id: SDXL_MODEL_LOADER,
         model,
       },
+      [CLIP_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP_SKIP,
+        skipped_layers: clipSkip,
+        is_intermediate,
+      },
+      [CLIP2_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP2_SKIP,
+        skipped_layers: clip2Skip,
+        is_intermediate,
+      },
       [POSITIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
@@ -223,7 +239,7 @@ export const buildCanvasSDXLOutpaintGraph = (
           field: 'clip',
         },
         destination: {
-          node_id: POSITIVE_CONDITIONING,
+          node_id: CLIP_SKIP,
           field: 'clip',
         },
       },
@@ -232,6 +248,26 @@ export const buildCanvasSDXLOutpaintGraph = (
           node_id: SDXL_MODEL_LOADER,
           field: 'clip2',
         },
+        destination: {
+          node_id: CLIP2_SKIP,
+          field: 'clip2',
+        },
+      },
+      {
+        source: {
+          node_id: CLIP_SKIP,
+          field: 'clip',
+        },
+        destination: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'clip',
+        },
+      },
+      {
+        source: {
+          node_id: CLIP2_SKIP,
+          field: 'clip',
+        },
         destination: {
           node_id: POSITIVE_CONDITIONING,
           field: 'clip2',
@@ -239,7 +275,7 @@ export const buildCanvasSDXLOutpaintGraph = (
       },
       {
         source: {
-          node_id: SDXL_MODEL_LOADER,
+          node_id: CLIP_SKIP,
           field: 'clip',
         },
         destination: {
@@ -249,7 +285,7 @@ export const buildCanvasSDXLOutpaintGraph = (
       },
       {
         source: {
-          node_id: SDXL_MODEL_LOADER,
+          node_id: CLIP2_SKIP,
           field: 'clip2',
         },
         destination: {

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts

@@ -16,6 +16,8 @@ import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
   CANVAS_OUTPUT,
+  CLIP2_SKIP,
+  CLIP_SKIP,
   LATENTS_TO_IMAGE,
   METADATA_ACCUMULATOR,
   NEGATIVE_CONDITIONING,
@@ -47,6 +49,7 @@ export const buildCanvasSDXLTextToImageGraph = (
     steps,
     vaePrecision,
     clipSkip,
+    clip2Skip,
     shouldUseCpuNoise,
     seamlessXAxis,
     seamlessYAxis,
@@ -127,6 +130,18 @@ export const buildCanvasSDXLTextToImageGraph = (
         is_intermediate,
         model,
       },
+      [CLIP_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP_SKIP,
+        skipped_layers: clipSkip,
+        is_intermediate,
+      },
+      [CLIP2_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP2_SKIP,
+        skipped_layers: clip2Skip,
+        is_intermediate,
+      },
       [POSITIVE_CONDITIONING]: {
         type: isUsingOnnxModel ? 'prompt_onnx' : 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
@@ -174,7 +189,7 @@ export const buildCanvasSDXLTextToImageGraph = (
           field: 'clip',
         },
         destination: {
-          node_id: POSITIVE_CONDITIONING,
+          node_id: CLIP_SKIP,
           field: 'clip',
         },
       },
@@ -183,6 +198,26 @@ export const buildCanvasSDXLTextToImageGraph = (
           node_id: modelLoaderNodeId,
           field: 'clip2',
         },
+        destination: {
+          node_id: CLIP2_SKIP,
+          field: 'clip',
+        },
+      },
+      {
+        source: {
+          node_id: CLIP_SKIP,
+          field: 'clip',
+        },
+        destination: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'clip',
+        },
+      },
+      {
+        source: {
+          node_id: CLIP2_SKIP,
+          field: 'clip',
+        },
         destination: {
           node_id: POSITIVE_CONDITIONING,
           field: 'clip2',
@@ -190,7 +225,7 @@ export const buildCanvasSDXLTextToImageGraph = (
       },
       {
         source: {
-          node_id: modelLoaderNodeId,
+          node_id: CLIP_SKIP,
           field: 'clip',
         },
         destination: {
@@ -200,8 +235,8 @@ export const buildCanvasSDXLTextToImageGraph = (
       },
       {
         source: {
-          node_id: modelLoaderNodeId,
+          node_id: CLIP2_SKIP,
-          field: 'clip2',
+          field: 'clip',
         },
         destination: {
           node_id: NEGATIVE_CONDITIONING,
@@ -322,6 +357,7 @@ export const buildCanvasSDXLTextToImageGraph = (
     controlnets: [], // populated in addControlNetToLinearGraph
     loras: [], // populated in addLoRAsToGraph
     clip_skip: clipSkip,
+    clip2_skip: clip2Skip,
   };
 
   graph.edges.push({

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts

@@ -15,6 +15,8 @@ import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CLIP2_SKIP,
+  CLIP_SKIP,
   IMAGE_TO_LATENTS,
   LATENTS_TO_IMAGE,
   METADATA_ACCUMULATOR,
@@ -50,6 +52,7 @@ export const buildLinearSDXLImageToImageGraph = (
     width,
     height,
     clipSkip,
+    clip2Skip,
     shouldUseCpuNoise,
     vaePrecision,
     seamlessXAxis,
@@ -105,6 +108,18 @@ export const buildLinearSDXLImageToImageGraph = (
         model,
         is_intermediate,
       },
+      [CLIP_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP_SKIP,
+        skipped_layers: clipSkip,
+        is_intermediate,
+      },
+      [CLIP2_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP2_SKIP,
+        skipped_layers: clip2Skip,
+        is_intermediate,
+      },
       [POSITIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
@@ -173,7 +188,7 @@ export const buildLinearSDXLImageToImageGraph = (
           field: 'clip',
         },
         destination: {
-          node_id: POSITIVE_CONDITIONING,
+          node_id: CLIP_SKIP,
           field: 'clip',
         },
       },
@@ -182,6 +197,26 @@ export const buildLinearSDXLImageToImageGraph = (
           node_id: modelLoaderNodeId,
           field: 'clip2',
         },
+        destination: {
+          node_id: CLIP2_SKIP,
+          field: 'clip2',
+        },
+      },
+      {
+        source: {
+          node_id: CLIP_SKIP,
+          field: 'clip',
+        },
+        destination: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'clip',
+        },
+      },
+      {
+        source: {
+          node_id: CLIP2_SKIP,
+          field: 'clip',
+        },
         destination: {
           node_id: POSITIVE_CONDITIONING,
           field: 'clip2',
@@ -189,7 +224,7 @@ export const buildLinearSDXLImageToImageGraph = (
       },
       {
         source: {
-          node_id: modelLoaderNodeId,
+          node_id: CLIP_SKIP,
           field: 'clip',
         },
         destination: {
@@ -199,7 +234,7 @@ export const buildLinearSDXLImageToImageGraph = (
       },
       {
         source: {
-          node_id: modelLoaderNodeId,
+          node_id: CLIP2_SKIP,
           field: 'clip2',
         },
         destination: {
@@ -350,6 +385,7 @@ export const buildLinearSDXLImageToImageGraph = (
     controlnets: [],
     loras: [],
     clip_skip: clipSkip,
+    clip2_skip: clip2Skip,
     strength: strength,
     init_image: initialImage.imageName,
     positive_style_prompt: positiveStylePrompt,

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts

@@ -11,6 +11,8 @@ import { addSeamlessToLinearGraph } from './addSeamlessToLinearGraph';
 import { addVAEToGraph } from './addVAEToGraph';
 import { addWatermarkerToGraph } from './addWatermarkerToGraph';
 import {
+  CLIP2_SKIP,
+  CLIP_SKIP,
   LATENTS_TO_IMAGE,
   METADATA_ACCUMULATOR,
   NEGATIVE_CONDITIONING,
@@ -39,6 +41,7 @@ export const buildLinearSDXLTextToImageGraph = (
     width,
     height,
     clipSkip,
+    clip2Skip,
     shouldUseCpuNoise,
     vaePrecision,
     seamlessXAxis,
@@ -88,6 +91,18 @@ export const buildLinearSDXLTextToImageGraph = (
         model,
         is_intermediate,
       },
+      [CLIP_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP_SKIP,
+        skipped_layers: clipSkip,
+        is_intermediate,
+      },
+      [CLIP2_SKIP]: {
+        type: 'clip_skip',
+        id: CLIP2_SKIP,
+        skipped_layers: clip2Skip,
+        is_intermediate,
+      },
       [POSITIVE_CONDITIONING]: {
         type: 'sdxl_compel_prompt',
         id: POSITIVE_CONDITIONING,
@@ -146,7 +161,7 @@ export const buildLinearSDXLTextToImageGraph = (
           field: 'clip',
         },
         destination: {
-          node_id: POSITIVE_CONDITIONING,
+          node_id: CLIP_SKIP,
           field: 'clip',
         },
       },
@@ -155,6 +170,26 @@ export const buildLinearSDXLTextToImageGraph = (
           node_id: modelLoaderNodeId,
           field: 'clip2',
         },
+        destination: {
+          node_id: CLIP2_SKIP,
+          field: 'clip',
+        },
+      },
+      {
+        source: {
+          node_id: CLIP_SKIP,
+          field: 'clip',
+        },
+        destination: {
+          node_id: POSITIVE_CONDITIONING,
+          field: 'clip',
+        },
+      },
+      {
+        source: {
+          node_id: CLIP2_SKIP,
+          field: 'clip',
+        },
         destination: {
           node_id: POSITIVE_CONDITIONING,
           field: 'clip2',
@@ -162,7 +197,7 @@ export const buildLinearSDXLTextToImageGraph = (
       },
       {
         source: {
-          node_id: modelLoaderNodeId,
+          node_id: CLIP_SKIP,
           field: 'clip',
         },
         destination: {
@@ -172,8 +207,8 @@ export const buildLinearSDXLTextToImageGraph = (
       },
       {
         source: {
-          node_id: modelLoaderNodeId,
+          node_id: CLIP2_SKIP,
-          field: 'clip2',
+          field: 'clip',
         },
         destination: {
           node_id: NEGATIVE_CONDITIONING,
@@ -244,6 +279,7 @@ export const buildLinearSDXLTextToImageGraph = (
     controlnets: [],
     loras: [],
     clip_skip: clipSkip,
+    clip2_skip: clipSkip,
     positive_style_prompt: positiveStylePrompt,
     negative_style_prompt: negativeStylePrompt,
   };

invokeai/frontend/web/src/features/nodes/util/graphBuilders/constants.ts

@@ -15,6 +15,7 @@ export const ONNX_MODEL_LOADER = 'onnx_model_loader';
 export const VAE_LOADER = 'vae_loader';
 export const LORA_LOADER = 'lora_loader';
 export const CLIP_SKIP = 'clip_skip';
+export const CLIP2_SKIP = 'clip2_skip';
 export const IMAGE_TO_LATENTS = 'image_to_latents';
 export const LATENTS_TO_LATENTS = 'latents_to_latents';
 export const RESIZE = 'resize_image';

invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx

@@ -9,21 +9,41 @@ import { useTranslation } from 'react-i18next';
 import { ParamCpuNoiseToggle } from '../Noise/ParamCpuNoise';
 import ParamSeamless from '../Seamless/ParamSeamless';
 import ParamClipSkip from './ParamClipSkip';
+import ParamClip2Skip from './ParamClip2Skip';
 
 const selector = createSelector(
   stateSelector,
   (state: RootState) => {
-    const { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise } =
+    const {
-      state.generation;
+      clipSkip,
+      clip2Skip,
+      seamlessXAxis,
+      seamlessYAxis,
+      shouldUseCpuNoise,
+      model,
+    } = state.generation;
 
-    return { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise };
+    return {
+      clipSkip,
+      clip2Skip,
+      seamlessXAxis,
+      seamlessYAxis,
+      shouldUseCpuNoise,
+      shouldShowClip2Skip: model?.base_model === 'sdxl',
+    };
   },
   defaultSelectorOptions
 );
 
 export default function ParamAdvancedCollapse() {
-  const { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise } =
+  const {
-    useAppSelector(selector);
+    clipSkip,
+    clip2Skip,
+    seamlessXAxis,
+    seamlessYAxis,
+    shouldUseCpuNoise,
+    shouldShowClip2Skip,
+  } = useAppSelector(selector);
   const { t } = useTranslation();
   const activeLabel = useMemo(() => {
     const activeLabel: string[] = [];
@@ -34,7 +54,14 @@ export default function ParamAdvancedCollapse() {
       activeLabel.push(t('parameters.gpuNoise'));
     }
 
-    if (clipSkip > 0) {
+    if ((clipSkip > 0 || clip2Skip > 0) && shouldShowClip2Skip) {
+      activeLabel.push(
+        t('parameters.clip12SkipWithLayerCount', {
+          clipLayerCount: clipSkip,
+          clip2LayerCount: clip2Skip,
+        })
+      );
+    } else if (clipSkip > 0) {
       activeLabel.push(
         t('parameters.clipSkipWithLayerCount', { layerCount: clipSkip })
       );
@@ -49,7 +76,15 @@ export default function ParamAdvancedCollapse() {
     }
 
     return activeLabel.join(', ');
-  }, [clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise, t]);
+  }, [
+    clip2Skip,
+    clipSkip,
+    seamlessXAxis,
+    seamlessYAxis,
+    shouldShowClip2Skip,
+    shouldUseCpuNoise,
+    t,
+  ]);
 
   return (
     <IAICollapse label={t('common.advanced')} activeLabel={activeLabel}>
@@ -58,6 +93,13 @@ export default function ParamAdvancedCollapse() {
         <Divider />
         <ParamClipSkip />
         <Divider pt={2} />
+        {shouldShowClip2Skip && (
+          <>
+            <ParamClip2Skip />
+            <Divider pt={2} />
+          </>
+        )}
+
         <ParamCpuNoiseToggle />
       </Flex>
     </IAICollapse>

invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamClip2Skip.tsx

@@ -0,0 +1,71 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
+import IAISlider from 'common/components/IAISlider';
+import { setClip2Skip } from 'features/parameters/store/generationSlice';
+import { clipSkipMap } from 'features/parameters/types/constants';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const selector = createSelector(
+  stateSelector,
+  ({ generation }) => {
+    const { model, clip2Skip } = generation;
+    return { model, clip2Skip };
+  },
+  defaultSelectorOptions
+);
+
+const ParamClip2Skip = () => {
+  const { model, clip2Skip } = useAppSelector(selector);
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+
+  const handleClipSkipChange = useCallback(
+    (v: number) => {
+      dispatch(setClip2Skip(v));
+    },
+    [dispatch]
+  );
+
+  const handleClipSkipReset = useCallback(() => {
+    dispatch(setClip2Skip(0));
+  }, [dispatch]);
+
+  const max = useMemo(() => {
+    if (!model) {
+      return clipSkipMap['sd-1'].maxClip;
+    }
+    return clipSkipMap[model.base_model].maxClip;
+  }, [model]);
+
+  const sliderMarks = useMemo(() => {
+    if (!model) {
+      return clipSkipMap['sd-1'].markers;
+    }
+    return clipSkipMap[model.base_model].markers;
+  }, [model]);
+
+  return (
+    <IAIInformationalPopover details="clipSkip">
+      <IAISlider
+        label={t('parameters.clip2Skip')}
+        aria-label={t('parameters.clip2Skip')}
+        min={0}
+        max={max}
+        step={1}
+        value={clip2Skip}
+        onChange={handleClipSkipChange}
+        withSliderMarks
+        sliderMarks={sliderMarks}
+        withInput
+        withReset
+        handleReset={handleClipSkipReset}
+      />
+    </IAIInformationalPopover>
+  );
+};
+
+export default memo(ParamClip2Skip);

invokeai/frontend/web/src/features/parameters/store/generationSlice.ts

@@ -61,6 +61,7 @@ export interface GenerationState {
   seamlessXAxis: boolean;
   seamlessYAxis: boolean;
   clipSkip: number;
+  clip2Skip: number;
   shouldUseCpuNoise: boolean;
   shouldShowAdvancedOptions: boolean;
   aspectRatio: number | null;
@@ -102,6 +103,7 @@ export const initialGenerationState: GenerationState = {
   seamlessXAxis: false,
   seamlessYAxis: false,
   clipSkip: 0,
+  clip2Skip: 0,
   shouldUseCpuNoise: true,
   shouldShowAdvancedOptions: false,
   aspectRatio: null,
@@ -270,6 +272,9 @@ export const generationSlice = createSlice({
     setClipSkip: (state, action: PayloadAction<number>) => {
       state.clipSkip = action.payload;
     },
+    setClip2Skip: (state, action: PayloadAction<number>) => {
+      state.clip2Skip = action.payload;
+    },
     shouldUseCpuNoiseChanged: (state, action: PayloadAction<boolean>) => {
       state.shouldUseCpuNoise = action.payload;
     },
@@ -345,6 +350,7 @@ export const {
   setSeamlessXAxis,
   setSeamlessYAxis,
   setClipSkip,
+  setClip2Skip,
   shouldUseCpuNoiseChanged,
   setAspectRatio,
   setShouldLockAspectRatio,

invokeai/frontend/web/src/services/api/schema.d.ts

@@ -317,6 +317,13 @@ export type paths = {
      */
     post: operations["set_log_level"];
   };
+  "/api/v1/app/invocation_cache": {
+    /**
+     * Clear Invocation Cache
+     * @description Clears the invocation cache
+     */
+    delete: operations["clear_invocation_cache"];
+  };
   "/api/v1/queue/{queue_id}/enqueue_graph": {
     /**
      * Enqueue Graph
@@ -2021,6 +2028,11 @@ export type components = {
        * @description The number of skipped CLIP layers
        */
       clip_skip: number;
+      /**
+       * Clip2 Skip
+       * @description The number of skipped CLIP2 layers
+       */
+      clip2_skip: number;
       /**
        * Model
        * @description The main model used for inference
@@ -2309,10 +2321,7 @@ export type components = {
        * @enum {string}
        */
       scheduler?: "ddim" | "ddpm" | "deis" | "lms" | "lms_k" | "pndm" | "heun" | "heun_k" | "euler" | "euler_k" | "euler_a" | "kdpm_2" | "kdpm_2_a" | "dpmpp_2s" | "dpmpp_2s_k" | "dpmpp_2m" | "dpmpp_2m_k" | "dpmpp_2m_sde" | "dpmpp_2m_sde_k" | "dpmpp_sde" | "dpmpp_sde_k" | "unipc";
-      /**
+      /** Control */
-       * Control
-       * @description ControlNet(s) to apply
-       */
       control?: components["schemas"]["ControlField"] | components["schemas"]["ControlField"][];
       /**
        * IP-Adapter
@@ -5690,6 +5699,11 @@ export type components = {
        * @description The number of skipped CLIP layers
        */
       clip_skip?: number;
+      /**
+       * Clip2 Skip
+       * @description The number of skipped CLIP2 layers
+       */
+      clip2_skip?: number;
       /**
        * Model
        * @description The main model used for inference
@@ -9042,6 +9056,18 @@ export type components = {
       /** Ui Order */
       ui_order?: number;
     };
+    /**
+     * CLIPVisionModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    CLIPVisionModelFormat: "diffusers";
+    /**
+     * StableDiffusionXLModelFormat
+     * @description An enumeration.
+     * @enum {string}
+     */
+    StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
     /**
      * IPAdapterModelFormat
      * @description An enumeration.
@@ -9049,11 +9075,11 @@ export type components = {
      */
     IPAdapterModelFormat: "invokeai";
     /**
-     * ControlNetModelFormat
+     * StableDiffusion1ModelFormat
      * @description An enumeration.
      * @enum {string}
      */
-    ControlNetModelFormat: "checkpoint" | "diffusers";
+    StableDiffusion1ModelFormat: "checkpoint" | "diffusers";
     /**
      * StableDiffusionOnnxModelFormat
      * @description An enumeration.
@@ -9067,23 +9093,11 @@ export type components = {
      */
     StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
     /**
-     * StableDiffusion1ModelFormat
+     * ControlNetModelFormat
      * @description An enumeration.
      * @enum {string}
      */
-    StableDiffusion1ModelFormat: "checkpoint" | "diffusers";
+    ControlNetModelFormat: "checkpoint" | "diffusers";
-    /**
-     * CLIPVisionModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    CLIPVisionModelFormat: "diffusers";
-    /**
-     * StableDiffusionXLModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
   };
   responses: never;
   parameters: never;
@@ -10505,6 +10519,20 @@ export type operations = {
       };
     };
   };
+  /**
+   * Clear Invocation Cache
+   * @description Clears the invocation cache
+   */
+  clear_invocation_cache: {
+    responses: {
+      /** @description The operation was successful */
+      200: {
+        content: {
+          "application/json": unknown;
+        };
+      };
+    };
+  };
   /**
    * Enqueue Graph
    * @description Enqueues a graph for single execution.