feat: Change Clip Skip to Slider & Add Collapse Active Text

invokeai/frontend/web/src/common/components/IAISlider.tsx

@@ -26,7 +26,7 @@ import {
 } from '@chakra-ui/react';
 import { clamp } from 'lodash-es';
 
-import { useTranslation } from 'react-i18next';
+import { roundDownToMultiple } from 'common/util/roundDownToMultiple';
 import {
   FocusEvent,
   memo,
@@ -36,9 +36,9 @@ import {
   useMemo,
   useState,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 import { BiReset } from 'react-icons/bi';
 import IAIIconButton, { IAIIconButtonProps } from './IAIIconButton';
-import { roundDownToMultiple } from 'common/util/roundDownToMultiple';
 
 const SLIDER_MARK_STYLES: ChakraProps['sx'] = {
   mt: 1.5,

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

@@ -1,16 +1,30 @@
 import { Flex } from '@chakra-ui/react';
-import { RootState } from 'app/store/store';
+import { createSelector } from '@reduxjs/toolkit';
+import { RootState, stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAICollapse from 'common/components/IAICollapse';
 import ParamClipSkip from './ParamClipSkip';
 
+const selector = createSelector(
+  stateSelector,
+  (state: RootState) => {
+    const clipSkip = state.generation.clipSkip;
+    return {
+      activeLabel: clipSkip > 0 ? `Clip Skip Active` : undefined,
+    };
+  },
+  defaultSelectorOptions
+);
+
 export default function ParamAdvancedCollapse() {
+  const { activeLabel } = useAppSelector(selector);
   const shouldShowAdvancedOptions = useAppSelector(
     (state: RootState) => state.ui.shouldShowAdvancedOptions
   );
   return (
     shouldShowAdvancedOptions && (
-      <IAICollapse label={'Advanced'}>
+      <IAICollapse label={'Advanced'} activeLabel={activeLabel}>
         <Flex sx={{ flexDir: 'column', gap: 2 }}>
           <ParamClipSkip />
         </Flex>

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

@@ -1,6 +1,6 @@
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAINumberInput from 'common/components/IAINumberInput';
+import IAISlider from 'common/components/IAISlider';
 import { setClipSkip } from 'features/parameters/store/generationSlice';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -20,8 +20,12 @@ export default function ParamClipSkip() {
     [dispatch]
   );
 
+  const handleClipSkipReset = useCallback(() => {
+    dispatch(setClipSkip(0));
+  }, [dispatch]);
+
   return (
-    <IAINumberInput
+    <IAISlider
       label={t('parameters.clipSkip')}
       aria-label={t('parameters.clipSkip')}
       min={0}
@@ -29,6 +33,11 @@ export default function ParamClipSkip() {
       step={1}
       value={clipSkip}
       onChange={handleClipSkipChange}
+      withSliderMarks
+      sliderMarks={[0, 1, 2, 3, 5, 10, 15, 25, 30]}
+      withInput
+      withReset
+      handleReset={handleClipSkipReset}
     />
   );
 }