feat: Add Clip Skip To Linear UI

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

@@ -0,0 +1,20 @@
+import { Flex } from '@chakra-ui/react';
+import { RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import IAICollapse from 'common/components/IAICollapse';
+import ParamClipSkip from './ParamClipSkip';
+
+export default function ParamAdvancedCollapse() {
+  const shouldShowAdvancedOptions = useAppSelector(
+    (state: RootState) => state.ui.shouldShowAdvancedOptions
+  );
+  return (
+    shouldShowAdvancedOptions && (
+      <IAICollapse label={'Advanced'}>
+        <Flex sx={{ flexDir: 'column', gap: 2 }}>
+          <ParamClipSkip />
+        </Flex>
+      </IAICollapse>
+    )
+  );
+}

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

@@ -0,0 +1,34 @@
+import { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAINumberInput from 'common/components/IAINumberInput';
+import { setClipSkip } from 'features/parameters/store/generationSlice';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function ParamClipSkip() {
+  const clipSkip = useAppSelector(
+    (state: RootState) => state.generation.clipSkip
+  );
+
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+
+  const handleClipSkipChange = useCallback(
+    (v: number) => {
+      dispatch(setClipSkip(v));
+    },
+    [dispatch]
+  );
+
+  return (
+    <IAINumberInput
+      label={t('parameters.clipSkip')}
+      aria-label={t('parameters.clipSkip')}
+      min={0}
+      max={30}
+      step={1}
+      value={clipSkip}
+      onChange={handleClipSkipChange}
+    />
+  );
+}

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

@@ -51,6 +51,7 @@ export interface GenerationState {
   vae: VAEParam;
   seamlessXAxis: boolean;
   seamlessYAxis: boolean;
+  clipSkip: number;
 }
 
 export const initialGenerationState: GenerationState = {
@@ -85,6 +86,7 @@ export const initialGenerationState: GenerationState = {
   vae: '',
   seamlessXAxis: false,
   seamlessYAxis: false,
+  clipSkip: 0,
 };
 
 const initialState: GenerationState = initialGenerationState;
@@ -217,6 +219,9 @@ export const generationSlice = createSlice({
     vaeSelected: (state, action: PayloadAction<string>) => {
       state.vae = action.payload;
     },
+    setClipSkip: (state, action: PayloadAction<number>) => {
+      state.clipSkip = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(configChanged, (state, action) => {
@@ -265,6 +270,7 @@ export const {
   setShouldUseNoiseSettings,
   setSeamlessXAxis,
   setSeamlessYAxis,
+  setClipSkip,
 } = generationSlice.actions;
 
 export default generationSlice.reducer;