diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx index 93ac679af83..4143b113ca3 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx @@ -1,4 +1,14 @@ -import { Button, ButtonGroup, Flex, Heading, Spacer } from '@invoke-ai/ui-library'; +import { + Button, + ButtonGroup, + Flex, + Heading, + Menu, + MenuButton, + MenuItem, + MenuList, + Spacer, +} from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { useAppSelector } from 'app/store/storeHooks'; import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus'; @@ -15,7 +25,7 @@ import { IMAGE_FILTERS } from 'features/controlLayers/store/filters'; import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; import { memo, useCallback, useMemo, useRef } from 'react'; import { useTranslation } from 'react-i18next'; -import { PiArrowsCounterClockwiseBold, PiCheckBold, PiPlayFill, PiXBold } from 'react-icons/pi'; +import { PiArrowsCounterClockwiseBold, PiFloppyDiskBold, PiPlayFill, PiXBold } from 'react-icons/pi'; const FilterContent = memo( ({ adapter }: { adapter: CanvasEntityAdapterRasterLayer | CanvasEntityAdapterControlLayer }) => { @@ -46,6 +56,22 @@ const FilterContent = memo( return IMAGE_FILTERS[config.type].validateConfig?.(config as never) ?? true; }, [config]); + const saveAsInpaintMask = useCallback(() => { + adapter.filterer.saveAs('inpaint_mask'); + }, [adapter.filterer]); + + const saveAsRegionalGuidance = useCallback(() => { + adapter.filterer.saveAs('regional_guidance'); + }, [adapter.filterer]); + + const saveAsRasterLayer = useCallback(() => { + adapter.filterer.saveAs('raster_layer'); + }, [adapter.filterer]); + + const saveAsControlLayer = useCallback(() => { + adapter.filterer.saveAs('control_layer'); + }, [adapter.filterer]); + useRegisteredHotkeys({ id: 'applyFilter', category: 'canvas', @@ -107,16 +133,35 @@ const FilterContent = memo( > {t('controlLayers.filter.reset')} - + + } + isLoading={isProcessing} + loadingText={t('controlLayers.selectObject.saveAs')} + variant="ghost" + isDisabled={!isValid || !hasProcessed} + > + {t('controlLayers.selectObject.saveAs')} + + + + {t('controlLayers.replaceCurrent')} + + + {t('controlLayers.newInpaintMask')} + + + {t('controlLayers.newRegionalGuidance')} + + + {t('controlLayers.newControlLayer')} + + + {t('controlLayers.newRasterLayer')} + + +