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}
+    />
+  );
+}