feat(ui): hide clipskip on sdxl; do not add to metadata (#4625)

Hide it until #4624 is ready

## What type of PR is this? (check all applicable)

- [ ] Refactor
- [ ] Feature
- [x] Bug Fix
- [ ] Optimization
- [ ] Documentation Update
- [ ] Community Node Submission



## Description

feat(ui): hide clipskip on sdxl; do not add to metadata
Hide it until #4624 is ready

## Related Tickets & Documents

<!--
For pull requests that relate or close an issue, please include them
below. 

For example having the text: "closes #1234" would connect the current
pull
request to issue 1234.  And when we merge the pull request, Github will
automatically close the issue.
-->

- Closes #4618

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

@@ -45,7 +45,6 @@ export const buildCanvasSDXLImageToImageGraph = (
     seed,
     steps,
     vaePrecision,
-    clipSkip,
     shouldUseCpuNoise,
     seamlessXAxis,
     seamlessYAxis,
@@ -339,7 +338,6 @@ export const buildCanvasSDXLImageToImageGraph = (
     vae: undefined, // option; set in addVAEToGraph
     controlnets: [], // populated in addControlNetToLinearGraph
     loras: [], // populated in addLoRAsToGraph
-    clip_skip: clipSkip,
     strength,
     init_image: initialImage.image_name,
   };

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

@@ -46,7 +46,6 @@ export const buildCanvasSDXLTextToImageGraph = (
     seed,
     steps,
     vaePrecision,
-    clipSkip,
     shouldUseCpuNoise,
     seamlessXAxis,
     seamlessYAxis,
@@ -321,7 +320,6 @@ export const buildCanvasSDXLTextToImageGraph = (
     vae: undefined, // option; set in addVAEToGraph
     controlnets: [], // populated in addControlNetToLinearGraph
     loras: [], // populated in addLoRAsToGraph
-    clip_skip: clipSkip,
   };
 
   graph.edges.push({

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

@@ -49,7 +49,6 @@ export const buildLinearSDXLImageToImageGraph = (
     shouldFitToWidthHeight,
     width,
     height,
-    clipSkip,
     shouldUseCpuNoise,
     vaePrecision,
     seamlessXAxis,
@@ -349,7 +348,6 @@ export const buildLinearSDXLImageToImageGraph = (
     vae: undefined,
     controlnets: [],
     loras: [],
-    clip_skip: clipSkip,
     strength: strength,
     init_image: initialImage.imageName,
     positive_style_prompt: positiveStylePrompt,

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

@@ -38,7 +38,6 @@ export const buildLinearSDXLTextToImageGraph = (
     steps,
     width,
     height,
-    clipSkip,
     shouldUseCpuNoise,
     vaePrecision,
     seamlessXAxis,
@@ -243,7 +242,6 @@ export const buildLinearSDXLTextToImageGraph = (
     vae: undefined,
     controlnets: [],
     loras: [],
-    clip_skip: clipSkip,
     positive_style_prompt: positiveStylePrompt,
     negative_style_prompt: negativeStylePrompt,
   };

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

@@ -13,16 +13,16 @@ import ParamClipSkip from './ParamClipSkip';
 const selector = createSelector(
   stateSelector,
   (state: RootState) => {
-    const { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise } =
+    const { clipSkip, model, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise } =
       state.generation;
 
-    return { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise };
+    return { clipSkip, model, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise };
   },
   defaultSelectorOptions
 );
 
 export default function ParamAdvancedCollapse() {
-  const { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise } =
+  const { clipSkip, model, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise } =
     useAppSelector(selector);
   const { t } = useTranslation();
   const activeLabel = useMemo(() => {
@@ -34,7 +34,7 @@ export default function ParamAdvancedCollapse() {
       activeLabel.push(t('parameters.gpuNoise'));
     }
 
-    if (clipSkip > 0) {
+    if (clipSkip > 0 && model && model.base_model !== 'sdxl') {
       activeLabel.push(
         t('parameters.clipSkipWithLayerCount', { layerCount: clipSkip })
       );
@@ -49,15 +49,19 @@ export default function ParamAdvancedCollapse() {
     }
 
     return activeLabel.join(', ');
-  }, [clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise, t]);
+  }, [clipSkip, model, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise, t]);
 
   return (
     <IAICollapse label={t('common.advanced')} activeLabel={activeLabel}>
       <Flex sx={{ flexDir: 'column', gap: 2 }}>
         <ParamSeamless />
         <Divider />
+        {model && model?.base_model !== 'sdxl' && (
+          <>
             <ParamClipSkip />
             <Divider pt={2} />
+          </>
+        )}
         <ParamCpuNoiseToggle />
       </Flex>
     </IAICollapse>

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

@@ -42,6 +42,10 @@ export default function ParamClipSkip() {
     return clipSkipMap[model.base_model].markers;
   }, [model]);
 
+  if (model?.base_model === 'sdxl') {
+    return null;
+  }
+
   return (
     <IAIInformationalPopover details="clipSkip">
       <IAISlider