fix, feat: canvas followups 2

invokeai/frontend/web/public/locales/en.json

@@ -93,6 +93,7 @@
  "copy": "Copy",
  "copyError": "$t(gallery.copy) Error",
  "on": "On",
+ "off": "Off",
  "or": "or",
  "checkpoint": "Checkpoint",
  "communityLabel": "Community",
@@ -1795,14 +1796,35 @@
  "filterType": "Filter Type",
  "preview": "Preview",
  "apply": "Apply",
- "cancel": "Cancel"
+ "cancel": "Cancel",
+ "spandrel": {
+ "label": "Image-to-Image Model",
+ "description": "Run an image-to-image model on the selected layer.",
+ "paramModel": "Model",
+ "paramAutoScale": "Auto Scale",
+ "paramAutoScaleDesc": "The selected model will be run until the target scale is reached.",
+ "paramScale": "Target Scale"
+ }
  },
  "transform": {
  "transform": "Transform",
  "fitToBbox": "Fit to Bbox",
  "reset": "Reset",
  "apply": "Apply",
  "cancel": "Cancel"
+ },
+ "settings": {
+ "snapToGrid": {
+ "label": "Snap to Grid",
+ "off": "Off",
+ "8": "8px",
+ "64": "64px"
+ }
+ },
+ "HUD": {
+ "bbox": "Bbox",
+ "scaledBbox": "Scaled Bbox",
+ "autoSave": "Auto Save"
  }
  },
  "upscaling": {

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -1,5 +1,5 @@
 import type { TypedStartListening } from '@reduxjs/toolkit';
-import { createListenerMiddleware } from '@reduxjs/toolkit';
+import { addListener, createListenerMiddleware } from '@reduxjs/toolkit';
 import { addAdHocPostProcessingRequestedListener } from 'app/store/middleware/listenerMiddleware/listeners/addAdHocPostProcessingRequestedListener';
 import { addStagingListeners } from 'app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener';
 import { addAnyEnqueuedListener } from 'app/store/middleware/listenerMiddleware/listeners/anyEnqueued';
@@ -41,6 +41,8 @@ export type AppStartListening = TypedStartListening<RootState, AppDispatch>;
 
 const startAppListening = listenerMiddleware.startListening as AppStartListening;
 
+export const addAppListener = addListener.withTypes<RootState, AppDispatch>();
+
 /**
  * The RTK listener middleware is a lightweight alternative sagas/observables.
  *

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts

@@ -1,11 +1,8 @@
 import { isAnyOf } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import {
- sessionStagingAreaImageAccepted,
- sessionStagingAreaReset,
-} from 'features/controlLayers/store/canvasSessionSlice';
 import { canvasReset, rasterLayerAdded } from 'features/controlLayers/store/canvasSlice';
+import { stagingAreaImageAccepted, stagingAreaReset } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
 import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
 import { imageDTOToImageObject } from 'features/controlLayers/store/types';
@@ -16,7 +13,7 @@ import { assert } from 'tsafe';
 
 const log = logger('canvas');
 
-const matchCanvasOrStagingAreaRest = isAnyOf(sessionStagingAreaReset, canvasReset);
+const matchCanvasOrStagingAreaRest = isAnyOf(stagingAreaReset, canvasReset);
 
 export const addStagingListeners = (startAppListening: AppStartListening) => {
  startAppListening({
@@ -52,11 +49,11 @@ export const addStagingListeners = (startAppListening: AppStartListening) => {
  });
 
  startAppListening({
- actionCreator: sessionStagingAreaImageAccepted,
+ actionCreator: stagingAreaImageAccepted,
  effect: (action, api) => {
  const { index } = action.payload;
  const state = api.getState();
- const stagingAreaImage = state.canvasSession.stagedImages[index];
+ const stagingAreaImage = state.canvasStagingArea.stagedImages[index];
 
  assert(stagingAreaImage, 'No staged image found to accept');
  const { x, y } = selectCanvasSlice(state).bbox.rect;
@@ -69,7 +66,7 @@ export const addStagingListeners = (startAppListening: AppStartListening) => {
  };
 
  api.dispatch(rasterLayerAdded({ overrides, isSelected: false }));
- api.dispatch(sessionStagingAreaReset());
+ api.dispatch(stagingAreaReset());
  },
  });
 };

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts

@@ -4,8 +4,12 @@ import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'
 import type { SerializableObject } from 'common/types';
 import type { Result } from 'common/util/result';
 import { isErr, withResult, withResultAsync } from 'common/util/result';
-import { $canvasManager } from 'features/controlLayers/konva/CanvasManager';
-import { sessionStagingAreaReset, sessionStartedStaging } from 'features/controlLayers/store/canvasSessionSlice';
+import { $canvasManager } from 'features/controlLayers/store/canvasSlice';
+import {
+ selectIsStaging,
+ stagingAreaReset,
+ stagingAreaStartedStaging,
+} from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
 import { buildSD1Graph } from 'features/nodes/util/graph/generation/buildSD1Graph';
 import { buildSDXLGraph } from 'features/nodes/util/graph/generation/buildSDXLGraph';
@@ -31,14 +35,14 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
 
  let didStartStaging = false;
 
- if (!state.canvasSession.isStaging && state.canvasSettings.sendToCanvas) {
- dispatch(sessionStartedStaging());
+ if (!selectIsStaging(state) && state.canvasSettings.sendToCanvas) {
+ dispatch(stagingAreaStartedStaging());
  didStartStaging = true;
  }
 
  const abortStaging = () => {
- if (didStartStaging && getState().canvasSession.isStaging) {
- dispatch(sessionStagingAreaReset());
+ if (didStartStaging && selectIsStaging(getState())) {
+ dispatch(stagingAreaReset());
  }
  };
 

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeletionListeners.ts

@@ -17,7 +17,7 @@ import type { ImageDTO } from 'services/api/types';
 
 const log = logger('gallery');
 
-//TODO(psyche): handle image deletion (canvas sessions?)
+//TODO(psyche): handle image deletion (canvas staging area?)
 
 // Some utils to delete images from different parts of the app
 const deleteNodesImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {

invokeai/frontend/web/src/app/store/store.ts

@@ -6,9 +6,12 @@ import { errorHandler } from 'app/store/enhancers/reduxRemember/errors';
 import type { SerializableObject } from 'common/types';
 import { deepClone } from 'common/util/deepClone';
 import { changeBoardModalSlice } from 'features/changeBoardModal/store/slice';
-import { canvasSessionPersistConfig, canvasSessionSlice } from 'features/controlLayers/store/canvasSessionSlice';
 import { canvasSettingsPersistConfig, canvasSettingsSlice } from 'features/controlLayers/store/canvasSettingsSlice';
 import { canvasPersistConfig, canvasSlice, canvasUndoableConfig } from 'features/controlLayers/store/canvasSlice';
+import {
+ canvasStagingAreaPersistConfig,
+ canvasStagingAreaSlice,
+} from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { lorasPersistConfig, lorasSlice } from 'features/controlLayers/store/lorasSlice';
 import { paramsPersistConfig, paramsSlice } from 'features/controlLayers/store/paramsSlice';
 import { deleteImageModalSlice } from 'features/deleteImageModal/store/slice';
@@ -63,7 +66,7 @@ const allReducers = {
  [stylePresetSlice.name]: stylePresetSlice.reducer,
  [paramsSlice.name]: paramsSlice.reducer,
  [canvasSettingsSlice.name]: canvasSettingsSlice.reducer,
- [canvasSessionSlice.name]: canvasSessionSlice.reducer,
+ [canvasStagingAreaSlice.name]: canvasStagingAreaSlice.reducer,
  [lorasSlice.name]: lorasSlice.reducer,
 };
 
@@ -108,7 +111,7 @@ const persistConfigs: { [key in keyof typeof allReducers]?: PersistConfig } = {
  [stylePresetPersistConfig.name]: stylePresetPersistConfig,
  [paramsPersistConfig.name]: paramsPersistConfig,
  [canvasSettingsPersistConfig.name]: canvasSettingsPersistConfig,
- [canvasSessionPersistConfig.name]: canvasSessionPersistConfig,
+ [canvasStagingAreaPersistConfig.name]: canvasStagingAreaPersistConfig,
  [lorasPersistConfig.name]: lorasPersistConfig,
 };
 

invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx

@@ -4,14 +4,14 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { FilterSettings } from 'features/controlLayers/components/Filters/FilterSettings';
 import { FilterTypeSelect } from 'features/controlLayers/components/Filters/FilterTypeSelect';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import type { CanvasEntityAdapterControlLayer } from 'features/controlLayers/konva/CanvasEntityAdapter/CanvasEntityAdapterControlLayer';
-import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konva/CanvasEntityAdapter/CanvasEntityAdapterRasterLayer';
+import type { CanvasEntityAdapterControlLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterControlLayer';
+import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRasterLayer';
 import {
  selectAutoPreviewFilter,
  settingsAutoPreviewFilterToggled,
 } from 'features/controlLayers/store/canvasSettingsSlice';
 import { type FilterConfig, IMAGE_FILTERS } from 'features/controlLayers/store/types';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCheckBold, PiShootingStarBold, PiXBold } from 'react-icons/pi';
 
@@ -40,6 +40,10 @@ const FilterBox = memo(({ adapter }: { adapter: CanvasEntityAdapterRasterLayer |
  dispatch(settingsAutoPreviewFilterToggled());
  }, [dispatch]);
 
+ const isValid = useMemo(() => {
+ return IMAGE_FILTERS[config.type].validateConfig?.(config as never) ?? true;
+ }, [config]);
+
  return (
  <Flex
  bg="base.800"
@@ -72,6 +76,7 @@ const FilterBox = memo(({ adapter }: { adapter: CanvasEntityAdapterRasterLayer |
  onClick={adapter.filterer.previewFilter}
  isLoading={isProcessing}
  loadingText={t('controlLayers.filter.preview')}
+ isDisabled={!isValid}
  >
  {t('controlLayers.filter.preview')}
  </Button>
@@ -82,6 +87,7 @@ const FilterBox = memo(({ adapter }: { adapter: CanvasEntityAdapterRasterLayer |
  onClick={adapter.filterer.applyFilter}
  isLoading={isProcessing}
  loadingText={t('controlLayers.filter.apply')}
+ isDisabled={!isValid}
  >
  {t('controlLayers.filter.apply')}
  </Button>
@@ -91,6 +97,7 @@ const FilterBox = memo(({ adapter }: { adapter: CanvasEntityAdapterRasterLayer |
  onClick={adapter.filterer.cancelFilter}
  isLoading={isProcessing}
  loadingText={t('controlLayers.filter.cancel')}
+ isDisabled={!isValid}
  >
  {t('controlLayers.filter.cancel')}
  </Button>

invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterSettings.tsx

@@ -10,6 +10,7 @@ import { FilterMediapipeFace } from 'features/controlLayers/components/Filters/F
 import { FilterMidasDepth } from 'features/controlLayers/components/Filters/FilterMidasDepth';
 import { FilterMlsdImage } from 'features/controlLayers/components/Filters/FilterMlsdImage';
 import { FilterPidi } from 'features/controlLayers/components/Filters/FilterPidi';
+import { FilterSpandrel } from 'features/controlLayers/components/Filters/FilterSpandrel';
 import type { FilterConfig } from 'features/controlLayers/store/types';
 import { IMAGE_FILTERS } from 'features/controlLayers/store/types';
 import { memo } from 'react';
@@ -64,6 +65,10 @@ export const FilterSettings = memo(({ filterConfig, onChange }: Props) => {
  return <FilterPidi config={filterConfig} onChange={onChange} />;
  }
 
+ if (filterConfig.type === 'spandrel_filter') {
+ return <FilterSpandrel config={filterConfig} onChange={onChange} />;
+ }
+
  return (
  <IAINoContentFallback
  py={4}

invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterSpandrel.tsx

@@ -0,0 +1,125 @@
+import {
+ Box,
+ Combobox,
+ CompositeNumberInput,
+ CompositeSlider,
+ Flex,
+ FormControl,
+ FormHelperText,
+ FormLabel,
+ Switch,
+ Tooltip,
+} from '@invoke-ai/ui-library';
+import { useModelCombobox } from 'common/hooks/useModelCombobox';
+import type { SpandrelFilterConfig } from 'features/controlLayers/store/types';
+import { IMAGE_FILTERS } from 'features/controlLayers/store/types';
+import type { ChangeEvent } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSpandrelImageToImageModels } from 'services/api/hooks/modelsByType';
+import type { SpandrelImageToImageModelConfig } from 'services/api/types';
+
+import type { FilterComponentProps } from './types';
+
+type Props = FilterComponentProps<SpandrelFilterConfig>;
+const DEFAULTS = IMAGE_FILTERS['spandrel_filter'].buildDefaults();
+
+export const FilterSpandrel = ({ onChange, config }: Props) => {
+ const { t } = useTranslation();
+
+ const [modelConfigs, { isLoading }] = useSpandrelImageToImageModels();
+
+ const tooltipLabel = useMemo(() => {
+ if (!modelConfigs.length || !config.model) {
+ return;
+ }
+ return modelConfigs.find((m) => m.key === config.model?.key)?.description;
+ }, [modelConfigs, config.model]);
+
+ const _onChange = useCallback(
+ (v: SpandrelImageToImageModelConfig | null) => {
+ onChange({ ...config, model: v });
+ },
+ [config, onChange]
+ );
+
+ const {
+ options,
+ value,
+ onChange: onChangeModel,
+ placeholder,
+ noOptionsMessage,
+ } = useModelCombobox({
+ modelConfigs,
+ onChange: _onChange,
+ selectedModel: config.model,
+ isLoading,
+ });
+
+ const onScaleChanged = useCallback(
+ (v: number) => {
+ onChange({ ...config, scale: v });
+ },
+ [onChange, config]
+ );
+ const onAutoscaleChanged = useCallback(
+ (e: ChangeEvent<HTMLInputElement>) => {
+ onChange({ ...config, autoScale: e.target.checked });
+ },
+ [onChange, config]
+ );
+
+ useEffect(() => {
+ if (!config.model) {
+ onChangeModel(options[0] ?? null);
+ }
+ }, [config.model, onChangeModel, options]);
+
+ return (
+ <>
+ <FormControl w="full" orientation="vertical">
+ <Flex w="full" alignItems="center">
+ <FormLabel m={0} flexGrow={1}>
+ {t('controlLayers.filter.spandrel.paramAutoScale')}
+ </FormLabel>
+ <Switch size="sm" isChecked={config.autoScale} onChange={onAutoscaleChanged} />
+ </Flex>
+ <FormHelperText>{t('controlLayers.filter.spandrel.paramAutoScaleDesc')}</FormHelperText>
+ </FormControl>
+ <FormControl isDisabled={!config.autoScale}>
+ <FormLabel m={0}>{t('controlLayers.filter.spandrel.paramScale')}</FormLabel>
+ <CompositeSlider
+ value={config.scale}
+ onChange={onScaleChanged}
+ defaultValue={DEFAULTS.scale}
+ min={1}
+ max={16}
+ />
+ <CompositeNumberInput
+ value={config.scale}
+ onChange={onScaleChanged}
+ defaultValue={DEFAULTS.scale}
+ min={1}
+ max={16}
+ />
+ </FormControl>
+ <FormControl>
+ <FormLabel m={0}>{t('controlLayers.filter.spandrel.paramModel')}</FormLabel>
+ <Tooltip label={tooltipLabel}>
+ <Box w="full">
+ <Combobox
+ value={value}
+ placeholder={placeholder}
+ options={options}
+ onChange={onChangeModel}
+ noOptionsMessage={noOptionsMessage}
+ isDisabled={options.length === 0}
+ />
+ </Box>
+ </Tooltip>
+ </FormControl>
+ </>
+ );
+};
+
+FilterSpandrel.displayName = 'FilterSpandrel';