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.
2024-08-30 20:32:17 +00:00 · 2023-09-21 14:03:15 +10:00 · 2023-09-21 14:03:15 +10:00 · 5cdfec8d75
commit 5cdfec8d75
parent 1625854eaf
14 changed files with 422 additions and 49 deletions
--- a/invokeai/app/invocations/metadata.py
+++ b/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")
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/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",
--- a/invokeai/frontend/web/src/features/nodes/types/types.ts
+++ b/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()
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts
+++ b/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,
-          field: 'clip2',
+          node_id: CLIP2_SKIP,
+          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,
  };
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts
+++ b/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: {
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts
+++ b/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: {
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts
+++ b/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,
-          field: 'clip2',
+          node_id: CLIP2_SKIP,
+          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({
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts
+++ b/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,
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts
+++ b/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,
-          field: 'clip2',
+          node_id: CLIP2_SKIP,
+          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,
  };
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/constants.ts
+++ b/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';
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx
+++ b/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 } =
-      state.generation;
+    const {
+      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 } =
-    useAppSelector(selector);
+  const {
+    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>
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamClip2Skip.tsx
+++ b/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);
--- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
+++ b/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,
--- a/invokeai/frontend/web/src/services/api/schema.d.ts
+++ b/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
-       * @description ControlNet(s) to apply
-       */
+      /** Control */
      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";
-    /**
-     * CLIPVisionModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    CLIPVisionModelFormat: "diffusers";
-    /**
-     * StableDiffusionXLModelFormat
-     * @description An enumeration.
-     * @enum {string}
-     */
-    StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
+    ControlNetModelFormat: "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.