chore: bump version to v5.4.1rc1

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>

.github/pull_request_template.md

@@ -19,3 +19,4 @@
 - [ ] _The PR has a short but descriptive title, suitable for a changelog_
 - [ ] _Tests added / updated (if applicable)_
 - [ ] _Documentation added / updated (if applicable)_
+- [ ] _Updated `What's New` copy (if doing a release after this PR)_

invokeai/app/api/routers/app_info.py

@@ -40,6 +40,8 @@ class AppVersion(BaseModel):
 
     version: str = Field(description="App version")
 
+    highlights: Optional[list[str]] = Field(default=None, description="Highlights of release")
+
 
 class AppDependencyVersions(BaseModel):
     """App depencency Versions Response"""

invokeai/backend/model_manager/util/model_util.py

@@ -169,17 +169,20 @@ def convert_bundle_to_flux_transformer_checkpoint(
 
 
 def get_clip_variant_type(location: str) -> Optional[ClipVariantType]:
-    path = Path(location)
-    config_path = path / "config.json"
-    if not config_path.exists():
-        return None
-    with open(config_path) as file:
-        clip_conf = json.load(file)
-        hidden_size = clip_conf.get("hidden_size", -1)
-        match hidden_size:
-            case 1280:
-                return ClipVariantType.G
-            case 768:
-                return ClipVariantType.L
-            case _:
-                return None
+    try:
+        path = Path(location)
+        config_path = path / "config.json"
+        if not config_path.exists():
+            return ClipVariantType.L
+        with open(config_path) as file:
+            clip_conf = json.load(file)
+            hidden_size = clip_conf.get("hidden_size", -1)
+            match hidden_size:
+                case 1280:
+                    return ClipVariantType.G
+                case 768:
+                    return ClipVariantType.L
+                case _:
+                    return ClipVariantType.L
+    except Exception:
+        return ClipVariantType.L

invokeai/frontend/web/knip.ts

@@ -9,6 +9,7 @@ const config: KnipConfig = {
     'src/services/api/schema.ts',
     'src/features/nodes/types/v1/**',
     'src/features/nodes/types/v2/**',
+    'src/features/parameters/types/parameterSchemas.ts',
     // TODO(psyche): maybe we can clean up these utils after canvas v2 release
     'src/features/controlLayers/konva/util.ts',
     // TODO(psyche): restore HRF functionality?

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

@@ -997,6 +997,7 @@
         "controlNetControlMode": "Control Mode",
         "copyImage": "Copy Image",
         "denoisingStrength": "Denoising Strength",
+        "noRasterLayers": "No Raster Layers",
         "downloadImage": "Download Image",
         "general": "General",
         "guidance": "Guidance",
@@ -1412,8 +1413,9 @@
         "paramDenoisingStrength": {
             "heading": "Denoising Strength",
             "paragraphs": [
-                "How much noise is added to the input image.",
-                "0 will result in an identical image, while 1 will result in a completely new image."
+                "Controls how much the generated image varies from the raster layer(s).",
+                "Lower strength stays closer to the combined visible raster layers. Higher strength relies more on the global prompt.",
+                "When there are no raster layers with visible content, this setting is ignored."
             ]
         },
         "paramHeight": {
@@ -1662,6 +1664,7 @@
         "mergeDown": "Merge Down",
         "mergeVisibleOk": "Merged layers",
         "mergeVisibleError": "Error merging layers",
+        "mergingLayers": "Merging layers",
         "clearHistory": "Clear History",
         "bboxOverlay": "Show Bbox Overlay",
         "resetCanvas": "Reset Canvas",
@@ -1774,9 +1777,10 @@
         "newCanvasSession": "New Canvas Session",
         "newCanvasSessionDesc": "This will clear the canvas and all settings except for your model selection. Generations will be staged on the canvas.",
         "replaceCurrent": "Replace Current",
+        "controlLayerEmptyState": "<UploadButton>Upload an image</UploadButton>, drag an image from the <GalleryButton>gallery</GalleryButton> onto this layer, or draw on the canvas to get started.",
         "controlMode": {
             "controlMode": "Control Mode",
-            "balanced": "Balanced",
+            "balanced": "Balanced (recommended)",
             "prompt": "Prompt",
             "control": "Control",
             "megaControl": "Mega Control"
@@ -1815,6 +1819,9 @@
             "process": "Process",
             "apply": "Apply",
             "cancel": "Cancel",
+            "advanced": "Advanced",
+            "processingLayerWith": "Processing layer with the {{type}} filter.",
+            "forMoreControl": "For more control, click Advanced below.",
             "spandrel_filter": {
                 "label": "Image-to-Image Model",
                 "description": "Run an image-to-image model on the selected layer.",
@@ -2095,9 +2102,8 @@
     },
     "whatsNew": {
         "whatsNewInInvoke": "What's New in Invoke",
-        "line1": "<ItalicComponent>Select Object</ItalicComponent> tool for precise object selection and editing",
-        "line2": "Expanded Flux support, now with Global Reference Images",
-        "line3": "Improved tooltips and context menus",
+        "line1": "<StrongComponent>Layer Merging</StrongComponent>: New <StrongComponent>Merge Down</StrongComponent> and improved <StrongComponent>Merge Visible</StrongComponent> for all layers, with special handling for Regional Guidance and Control Layers.",
+        "line2": "<StrongComponent>HF Token Support</StrongComponent>: Upload models that require Hugging Face authentication.",
         "readReleaseNotes": "Read Release Notes",
         "watchRecentReleaseVideos": "Watch Recent Release Videos",
         "watchUiUpdatesOverview": "Watch UI Updates Overview"

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

@@ -2,7 +2,7 @@ import { createAction } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { deepClone } from 'common/util/deepClone';
-import { selectDefaultControlAdapter, selectDefaultIPAdapter } from 'features/controlLayers/hooks/addLayerHooks';
+import { selectDefaultIPAdapter } from 'features/controlLayers/hooks/addLayerHooks';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import {
   controlLayerAdded,
@@ -23,7 +23,7 @@ import type {
   CanvasReferenceImageState,
   CanvasRegionalGuidanceState,
 } from 'features/controlLayers/store/types';
-import { imageDTOToImageObject, imageDTOToImageWithDims } from 'features/controlLayers/store/util';
+import { imageDTOToImageObject, imageDTOToImageWithDims, initialControlNet } from 'features/controlLayers/store/util';
 import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
 import { isValidDrop } from 'features/dnd/util/isValidDrop';
 import { imageToCompareChanged, selectionChanged } from 'features/gallery/store/gallerySlice';
@@ -163,11 +163,10 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
         const state = getState();
         const imageObject = imageDTOToImageObject(activeData.payload.imageDTO);
         const { x, y } = selectCanvasSlice(state).bbox.rect;
-        const defaultControlAdapter = selectDefaultControlAdapter(state);
         const overrides: Partial<CanvasControlLayerState> = {
           objects: [imageObject],
           position: { x, y },
-          controlAdapter: defaultControlAdapter,
+          controlAdapter: deepClone(initialControlNet),
         };
         dispatch(controlLayerAdded({ overrides, isSelected: true }));
         return;

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

@@ -4,8 +4,10 @@ import { atom } from 'nanostores';
 /**
  * A fallback non-writable atom that always returns `false`, used when a nanostores atom is only conditionally available
  * in a hook or component.
+ *
+ * @knipignore
  */
-// export const $false: ReadableAtom<boolean> = atom(false);
+export const $false: ReadableAtom<boolean> = atom(false);
 /**
  * A fallback non-writable atom that always returns `true`, used when a nanostores atom is only conditionally available
  * in a hook or component.

invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts

@@ -1,5 +1,6 @@
 import type { PopoverProps } from '@invoke-ai/ui-library';
 import commercialLicenseBg from 'public/assets/images/commercial-license-bg.png';
+import denoisingStrength from 'public/assets/images/denoising-strength.png';
 
 export type Feature =
   | 'clipSkip'
@@ -125,7 +126,7 @@ export const POPOVER_DATA: { [key in Feature]?: PopoverData } = {
     href: 'https://support.invoke.ai/support/solutions/articles/151000158838-compositing-settings',
   },
   infillMethod: {
-    href: 'https://support.invoke.ai/support/solutions/articles/151000158841-infill-and-scaling',
+    href: 'https://support.invoke.ai/support/solutions/articles/151000158838-compositing-settings',
   },
   scaleBeforeProcessing: {
     href: 'https://support.invoke.ai/support/solutions/articles/151000158841',
@@ -138,6 +139,7 @@ export const POPOVER_DATA: { [key in Feature]?: PopoverData } = {
   },
   paramDenoisingStrength: {
     href: 'https://support.invoke.ai/support/solutions/articles/151000094998-image-to-image',
+    image: denoisingStrength,
   },
   paramHrf: {
     href: 'https://support.invoke.ai/support/solutions/articles/151000096700-how-can-i-get-larger-images-what-does-upscaling-do-',

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

@@ -0,0 +1,57 @@
+type Props = {
+  /**
+   * The amplitude of the wave. 0 is a straight line, higher values create more pronounced waves.
+   */
+  amplitude: number;
+  /**
+   * The number of segments in the line. More segments create a smoother wave.
+   */
+  segments?: number;
+  /**
+   * The color of the wave.
+   */
+  stroke: string;
+  /**
+   * The width of the wave.
+   */
+  strokeWidth: number;
+  /**
+   * The width of the SVG.
+   */
+  width: number;
+  /**
+   * The height of the SVG.
+   */
+  height: number;
+};
+
+const WavyLine = ({ amplitude, stroke, strokeWidth, width, height, segments = 5 }: Props) => {
+  // Calculate the path dynamically based on waviness
+  const generatePath = () => {
+    if (amplitude === 0) {
+      // If waviness is 0, return a straight line
+      return `M0,${height / 2} L${width},${height / 2}`;
+    }
+
+    const clampedAmplitude = Math.min(height / 2, amplitude); // Cap amplitude to half the height
+    const segmentWidth = width / segments;
+    let path = `M0,${height / 2}`; // Start in the middle of the left edge
+
+    // Loop through each segment and alternate the y position to create waves
+    for (let i = 1; i <= segments; i++) {
+      const x = i * segmentWidth;
+      const y = height / 2 + (i % 2 === 0 ? clampedAmplitude : -clampedAmplitude);
+      path += ` Q${x - segmentWidth / 2},${y} ${x},${height / 2}`;
+    }
+
+    return path;
+  };
+
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg">
+      <path d={generatePath()} fill="none" stroke={stroke} strokeWidth={strokeWidth} />
+    </svg>
+  );
+};
+
+export default WavyLine;

invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx

@@ -7,6 +7,8 @@ import { EntityListSelectedEntityActionBar } from 'features/controlLayers/compon
 import { selectHasEntities } from 'features/controlLayers/store/selectors';
 import { memo, useRef } from 'react';
 
+import { ParamDenoisingStrength } from './ParamDenoisingStrength';
+
 export const CanvasLayersPanelContent = memo(() => {
   const hasEntities = useAppSelector(selectHasEntities);
   const layersPanelFocusRef = useRef<HTMLDivElement>(null);
@@ -16,6 +18,8 @@ export const CanvasLayersPanelContent = memo(() => {
     <Flex ref={layersPanelFocusRef} flexDir="column" gap={2} w="full" h="full">
       <EntityListSelectedEntityActionBar />
       <Divider py={0} />
+      <ParamDenoisingStrength />
+      <Divider py={0} />
       {!hasEntities && <CanvasAddEntityButtons />}
       {hasEntities && <CanvasEntityList />}
     </Flex>

invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx

@@ -7,7 +7,7 @@ import { CanvasEntityPreviewImage } from 'features/controlLayers/components/comm
 import { CanvasEntitySettingsWrapper } from 'features/controlLayers/components/common/CanvasEntitySettingsWrapper';
 import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
 import { ControlLayerBadges } from 'features/controlLayers/components/ControlLayer/ControlLayerBadges';
-import { ControlLayerControlAdapter } from 'features/controlLayers/components/ControlLayer/ControlLayerControlAdapter';
+import { ControlLayerSettings } from 'features/controlLayers/components/ControlLayer/ControlLayerSettings';
 import { ControlLayerAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
@@ -41,7 +41,7 @@ export const ControlLayer = memo(({ id }: Props) => {
             <CanvasEntityHeaderCommonActions />
           </CanvasEntityHeader>
           <CanvasEntitySettingsWrapper>
-            <ControlLayerControlAdapter />
+            <ControlLayerSettings />
           </CanvasEntitySettingsWrapper>
           <IAIDroppable data={dropData} dropLabel={t('controlLayers.replaceLayer')} />
         </CanvasEntityContainer>

invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapter.tsx

@@ -6,6 +6,7 @@ import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginE
 import { Weight } from 'features/controlLayers/components/common/Weight';
 import { ControlLayerControlAdapterControlMode } from 'features/controlLayers/components/ControlLayer/ControlLayerControlAdapterControlMode';
 import { ControlLayerControlAdapterModel } from 'features/controlLayers/components/ControlLayer/ControlLayerControlAdapterModel';
+import { useEntityAdapterContext } from 'features/controlLayers/contexts/EntityAdapterContext';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { usePullBboxIntoLayer } from 'features/controlLayers/hooks/saveCanvasHooks';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
@@ -16,6 +17,7 @@ import {
   controlLayerModelChanged,
   controlLayerWeightChanged,
 } from 'features/controlLayers/store/canvasSlice';
+import { getFilterForModel } from 'features/controlLayers/store/filters';
 import { selectIsFLUX } from 'features/controlLayers/store/paramsSlice';
 import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
 import type { CanvasEntityIdentifier, ControlModeV2 } from 'features/controlLayers/store/types';
@@ -44,6 +46,7 @@ export const ControlLayerControlAdapter = memo(() => {
   const controlAdapter = useControlLayerControlAdapter(entityIdentifier);
   const filter = useEntityFilter(entityIdentifier);
   const isFLUX = useAppSelector(selectIsFLUX);
+  const adapter = useEntityAdapterContext('control_layer');
 
   const onChangeBeginEndStepPct = useCallback(
     (beginEndStepPct: [number, number]) => {
@@ -69,8 +72,43 @@ export const ControlLayerControlAdapter = memo(() => {
   const onChangeModel = useCallback(
     (modelConfig: ControlNetModelConfig | T2IAdapterModelConfig) => {
       dispatch(controlLayerModelChanged({ entityIdentifier, modelConfig }));
+      // When we change the model, we need may need to start filtering w/ the simplified filter mode, and/or change the
+      // filter config.
+      const isFiltering = adapter.filterer.$isFiltering.get();
+      const isSimple = adapter.filterer.$simple.get();
+      // If we are filtering and _not_ in simple mode, that means the user has clicked Advanced. They want to be in control
+      // of the settings. Bail early without doing anything else.
+      if (isFiltering && !isSimple) {
+        return;
+      }
+
+      // Else, we are in simple mode and will take care of some things for the user.
+
+      // First, check if the newly-selected model has a default filter. It may not - for example, Tile controlnet models
+      // don't have a default filter.
+      const defaultFilterForNewModel = getFilterForModel(modelConfig);
+
+      if (!defaultFilterForNewModel) {
+        // The user has chosen a model that doesn't have a default filter - cancel any in-progress filtering and bail.
+        if (isFiltering) {
+          adapter.filterer.cancel();
+        }
+        return;
+      }
+
+      // At this point, we know the user has selected a model that has a default filter. We need to either start filtering
+      // with that default filter, or update the existing filter config to match the new model's default filter.
+      const filterConfig = defaultFilterForNewModel.buildDefaults();
+      if (isFiltering) {
+        adapter.filterer.$filterConfig.set(filterConfig);
+      } else {
+        adapter.filterer.start(filterConfig);
+      }
+      // The user may have disabled auto-processing, so we should process the filter manually. This is essentially a
+      // no-op if auto-processing is already enabled, because the process method is debounced.
+      adapter.filterer.process();
     },
-    [dispatch, entityIdentifier]
+    [adapter.filterer, dispatch, entityIdentifier]
   );
 
   const pullBboxIntoLayer = usePullBboxIntoLayer(entityIdentifier);

invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerSettings.tsx

@@ -0,0 +1,18 @@
+import { ControlLayerControlAdapter } from 'features/controlLayers/components/ControlLayer/ControlLayerControlAdapter';
+import { ControlLayerSettingsEmptyState } from 'features/controlLayers/components/ControlLayer/ControlLayerSettingsEmptyState';
+import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { useEntityIsEmpty } from 'features/controlLayers/hooks/useEntityIsEmpty';
+import { memo } from 'react';
+
+export const ControlLayerSettings = memo(() => {
+  const entityIdentifier = useEntityIdentifierContext();
+  const isEmpty = useEntityIsEmpty(entityIdentifier);
+
+  if (isEmpty) {
+    return <ControlLayerSettingsEmptyState />;
+  }
+
+  return <ControlLayerControlAdapter />;
+});
+
+ControlLayerSettings.displayName = 'ControlLayerSettings';

invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerSettingsEmptyState.tsx

@@ -0,0 +1,50 @@
+import { Button, Flex, Text } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
+import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
+import { memo, useCallback, useMemo } from 'react';
+import { Trans } from 'react-i18next';
+import type { PostUploadAction } from 'services/api/types';
+
+export const ControlLayerSettingsEmptyState = memo(() => {
+  const entityIdentifier = useEntityIdentifierContext('control_layer');
+  const dispatch = useAppDispatch();
+  const isBusy = useCanvasIsBusy();
+  const postUploadAction = useMemo<PostUploadAction>(
+    () => ({ type: 'REPLACE_LAYER_WITH_IMAGE', entityIdentifier }),
+    [entityIdentifier]
+  );
+  const uploadApi = useImageUploadButton({ postUploadAction });
+  const onClickGalleryButton = useCallback(() => {
+    dispatch(activeTabCanvasRightPanelChanged('gallery'));
+  }, [dispatch]);
+
+  return (
+    <Flex flexDir="column" gap={3} position="relative" w="full" p={4}>
+      <Text textAlign="center" color="base.300">
+        <Trans
+          i18nKey="controlLayers.controlLayerEmptyState"
+          components={{
+            UploadButton: (
+              <Button
+                isDisabled={isBusy}
+                size="sm"
+                variant="link"
+                color="base.300"
+                {...uploadApi.getUploadButtonProps()}
+              />
+            ),
+            GalleryButton: (
+              <Button onClick={onClickGalleryButton} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
+            ),
+          }}
+        />
+      </Text>
+      <input {...uploadApi.getUploadInputProps()} />
+    </Flex>
+  );
+});
+
+ControlLayerSettingsEmptyState.displayName = 'ControlLayerSettingsEmptyState';

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

@@ -9,6 +9,7 @@ import {
   MenuList,
   Spacer,
   Spinner,
+  Text,
 } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppSelector } from 'app/store/storeHooks';
@@ -28,13 +29,10 @@ import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCaretDownBold } from 'react-icons/pi';
 
-const FilterContent = memo(
+const FilterContentAdvanced = memo(
   ({ adapter }: { adapter: CanvasEntityAdapterRasterLayer | CanvasEntityAdapterControlLayer }) => {
     const { t } = useTranslation();
-    const ref = useRef<HTMLDivElement>(null);
-    useFocusRegion('canvas', ref, { focusOnMount: true });
     const config = useStore(adapter.filterer.$filterConfig);
-    const isCanvasFocused = useIsRegionFocused('canvas');
     const isProcessing = useStore(adapter.filterer.$isProcessing);
     const hasImageState = useStore(adapter.filterer.$hasImageState);
     const autoProcess = useAppSelector(selectAutoProcess);
@@ -73,36 +71,8 @@ const FilterContent = memo(
       adapter.filterer.saveAs('control_layer');
     }, [adapter.filterer]);
 
-    useRegisteredHotkeys({
-      id: 'applyFilter',
-      category: 'canvas',
-      callback: adapter.filterer.apply,
-      options: { enabled: !isProcessing && isCanvasFocused },
-      dependencies: [adapter.filterer, isProcessing, isCanvasFocused],
-    });
-
-    useRegisteredHotkeys({
-      id: 'cancelFilter',
-      category: 'canvas',
-      callback: adapter.filterer.cancel,
-      options: { enabled: !isProcessing && isCanvasFocused },
-      dependencies: [adapter.filterer, isProcessing, isCanvasFocused],
-    });
-
     return (
-      <Flex
-        ref={ref}
-        bg="base.800"
-        borderRadius="base"
-        p={4}
-        flexDir="column"
-        gap={4}
-        w={420}
-        h="auto"
-        shadow="dark-lg"
-        transitionProperty="height"
-        transitionDuration="normal"
-      >
+      <>
         <Flex w="full" gap={4}>
           <Heading size="md" color="base.300" userSelect="none">
             {t('controlLayers.filter.filter')}
@@ -169,12 +139,67 @@ const FilterContent = memo(
             {t('controlLayers.filter.cancel')}
           </Button>
         </ButtonGroup>
-      </Flex>
+      </>
     );
   }
 );
 
-FilterContent.displayName = 'FilterContent';
+FilterContentAdvanced.displayName = 'FilterContentAdvanced';
+
+const FilterContentSimple = memo(
+  ({ adapter }: { adapter: CanvasEntityAdapterRasterLayer | CanvasEntityAdapterControlLayer }) => {
+    const { t } = useTranslation();
+    const config = useStore(adapter.filterer.$filterConfig);
+    const isProcessing = useStore(adapter.filterer.$isProcessing);
+    const hasImageState = useStore(adapter.filterer.$hasImageState);
+
+    const isValid = useMemo(() => {
+      return IMAGE_FILTERS[config.type].validateConfig?.(config as never) ?? true;
+    }, [config]);
+
+    const onClickAdvanced = useCallback(() => {
+      adapter.filterer.$simple.set(false);
+    }, [adapter.filterer.$simple]);
+
+    return (
+      <>
+        <Flex w="full" gap={4}>
+          <Heading size="md" color="base.300" userSelect="none">
+            {t('controlLayers.filter.filter')}
+          </Heading>
+          <Spacer />
+        </Flex>
+        <Flex flexDir="column" w="full" gap={2} pb={2}>
+          <Text color="base.500" textAlign="center">
+            {t('controlLayers.filter.processingLayerWith', { type: t(`controlLayers.filter.${config.type}.label`) })}
+          </Text>
+          <Text color="base.500" textAlign="center">
+            {t('controlLayers.filter.forMoreControl')}
+          </Text>
+        </Flex>
+        <ButtonGroup isAttached={false} size="sm" w="full">
+          <Button variant="ghost" onClick={onClickAdvanced}>
+            {t('controlLayers.filter.advanced')}
+          </Button>
+          <Spacer />
+          <Button
+            onClick={adapter.filterer.apply}
+            loadingText={t('controlLayers.filter.apply')}
+            variant="ghost"
+            isDisabled={isProcessing || !isValid || !hasImageState}
+          >
+            {t('controlLayers.filter.apply')}
+          </Button>
+          <Button variant="ghost" onClick={adapter.filterer.cancel} loadingText={t('controlLayers.filter.cancel')}>
+            {t('controlLayers.filter.cancel')}
+          </Button>
+        </ButtonGroup>
+      </>
+    );
+  }
+);
+
+FilterContentSimple.displayName = 'FilterContentSimple';
 
 export const Filter = () => {
   const canvasManager = useCanvasManager();
@@ -182,8 +207,54 @@ export const Filter = () => {
   if (!adapter) {
     return null;
   }
-
   return <FilterContent adapter={adapter} />;
 };
 
 Filter.displayName = 'Filter';
+
+const FilterContent = memo(
+  ({ adapter }: { adapter: CanvasEntityAdapterRasterLayer | CanvasEntityAdapterControlLayer }) => {
+    const simplified = useStore(adapter.filterer.$simple);
+    const isCanvasFocused = useIsRegionFocused('canvas');
+    const isProcessing = useStore(adapter.filterer.$isProcessing);
+    const ref = useRef<HTMLDivElement>(null);
+    useFocusRegion('canvas', ref, { focusOnMount: true });
+
+    useRegisteredHotkeys({
+      id: 'applyFilter',
+      category: 'canvas',
+      callback: adapter.filterer.apply,
+      options: { enabled: !isProcessing && isCanvasFocused, enableOnFormTags: true },
+      dependencies: [adapter.filterer, isProcessing, isCanvasFocused],
+    });
+
+    useRegisteredHotkeys({
+      id: 'cancelFilter',
+      category: 'canvas',
+      callback: adapter.filterer.cancel,
+      options: { enabled: !isProcessing && isCanvasFocused, enableOnFormTags: true },
+      dependencies: [adapter.filterer, isProcessing, isCanvasFocused],
+    });
+
+    return (
+      <Flex
+        ref={ref}
+        bg="base.800"
+        borderRadius="base"
+        p={4}
+        flexDir="column"
+        gap={4}
+        w={420}
+        h="auto"
+        shadow="dark-lg"
+        transitionProperty="height"
+        transitionDuration="normal"
+      >
+        {simplified && <FilterContentSimple adapter={adapter} />}
+        {!simplified && <FilterContentAdvanced adapter={adapter} />}
+      </Flex>
+    );
+  }
+);
+
+FilterContent.displayName = 'FilterContent';

invokeai/frontend/web/src/features/controlLayers/components/ParamDenoisingStrength.tsx

@@ -0,0 +1,82 @@
+import {
+  Badge,
+  CompositeNumberInput,
+  CompositeSlider,
+  Flex,
+  FormControl,
+  FormLabel,
+  useToken,
+} from '@invoke-ai/ui-library';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
+import WavyLine from 'common/components/WavyLine';
+import { selectImg2imgStrength, setImg2imgStrength } from 'features/controlLayers/store/paramsSlice';
+import { selectActiveRasterLayerEntities } from 'features/controlLayers/store/selectors';
+import { selectImg2imgStrengthConfig } from 'features/system/store/configSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const selectIsEnabled = createSelector(selectActiveRasterLayerEntities, (entities) => entities.length > 0);
+
+export const ParamDenoisingStrength = memo(() => {
+  const img2imgStrength = useAppSelector(selectImg2imgStrength);
+  const dispatch = useAppDispatch();
+  const isEnabled = useAppSelector(selectIsEnabled);
+
+  const onChange = useCallback(
+    (v: number) => {
+      dispatch(setImg2imgStrength(v));
+    },
+    [dispatch]
+  );
+
+  const config = useAppSelector(selectImg2imgStrengthConfig);
+  const { t } = useTranslation();
+
+  const [invokeBlue300] = useToken('colors', ['invokeBlue.300']);
+
+  return (
+    <FormControl isDisabled={!isEnabled} p={1} justifyContent="space-between" h={8}>
+      <Flex gap={3} alignItems="center">
+        <InformationalPopover feature="paramDenoisingStrength">
+          <FormLabel mr={0}>{`${t('parameters.denoisingStrength')}`}</FormLabel>
+        </InformationalPopover>
+        {isEnabled && (
+          <WavyLine amplitude={img2imgStrength * 10} stroke={invokeBlue300} strokeWidth={1} width={40} height={14} />
+        )}
+      </Flex>
+      {isEnabled ? (
+        <>
+          <CompositeSlider
+            step={config.coarseStep}
+            fineStep={config.fineStep}
+            min={config.sliderMin}
+            max={config.sliderMax}
+            defaultValue={config.initial}
+            onChange={onChange}
+            value={img2imgStrength}
+          />
+          <CompositeNumberInput
+            step={config.coarseStep}
+            fineStep={config.fineStep}
+            min={config.numberInputMin}
+            max={config.numberInputMax}
+            defaultValue={config.initial}
+            onChange={onChange}
+            value={img2imgStrength}
+            variant="outline"
+          />
+        </>
+      ) : (
+        <Flex alignItems="center">
+          <Badge opacity="0.6">
+            {t('common.disabled')} - {t('parameters.noRasterLayers')}
+          </Badge>
+        </Flex>
+      )}
+    </FormControl>
+  );
+});
+
+ParamDenoisingStrength.displayName = 'ParamDenoisingStrength';

invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerMenuItemsConvertToSubMenu.tsx

@@ -1,8 +1,8 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch } from 'app/store/storeHooks';
 import { SubMenuButtonContent, useSubMenu } from 'common/hooks/useSubMenu';
+import { deepClone } from 'common/util/deepClone';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
-import { selectDefaultControlAdapter } from 'features/controlLayers/hooks/addLayerHooks';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { useEntityIsLocked } from 'features/controlLayers/hooks/useEntityIsLocked';
 import {
@@ -10,6 +10,7 @@ import {
   rasterLayerConvertedToInpaintMask,
   rasterLayerConvertedToRegionalGuidance,
 } from 'features/controlLayers/store/canvasSlice';
+import { initialControlNet } from 'features/controlLayers/store/util';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiSwapBold } from 'react-icons/pi';
@@ -20,7 +21,6 @@ export const RasterLayerMenuItemsConvertToSubMenu = memo(() => {
 
   const dispatch = useAppDispatch();
   const entityIdentifier = useEntityIdentifierContext('raster_layer');
-  const defaultControlAdapter = useAppSelector(selectDefaultControlAdapter);
   const isBusy = useCanvasIsBusy();
   const isLocked = useEntityIsLocked(entityIdentifier);
 
@@ -37,10 +37,10 @@ export const RasterLayerMenuItemsConvertToSubMenu = memo(() => {
       rasterLayerConvertedToControlLayer({
         entityIdentifier,
         replace: true,
-        overrides: { controlAdapter: defaultControlAdapter },
+        overrides: { controlAdapter: deepClone(initialControlNet) },
       })
     );
-  }, [defaultControlAdapter, dispatch, entityIdentifier]);
+  }, [dispatch, entityIdentifier]);
 
   return (
     <MenuItem {...subMenu.parentMenuItemProps} icon={<PiSwapBold />} isDisabled={isBusy || isLocked}>

invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerMenuItemsCopyToSubMenu.tsx

@@ -1,15 +1,16 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch } from 'app/store/storeHooks';
 import { SubMenuButtonContent, useSubMenu } from 'common/hooks/useSubMenu';
+import { deepClone } from 'common/util/deepClone';
 import { CanvasEntityMenuItemsCopyToClipboard } from 'features/controlLayers/components/common/CanvasEntityMenuItemsCopyToClipboard';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
-import { selectDefaultControlAdapter } from 'features/controlLayers/hooks/addLayerHooks';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import {
   rasterLayerConvertedToControlLayer,
   rasterLayerConvertedToInpaintMask,
   rasterLayerConvertedToRegionalGuidance,
 } from 'features/controlLayers/store/canvasSlice';
+import { initialControlNet } from 'features/controlLayers/store/util';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCopyBold } from 'react-icons/pi';
@@ -20,7 +21,6 @@ export const RasterLayerMenuItemsCopyToSubMenu = memo(() => {
 
   const dispatch = useAppDispatch();
   const entityIdentifier = useEntityIdentifierContext('raster_layer');
-  const defaultControlAdapter = useAppSelector(selectDefaultControlAdapter);
   const isBusy = useCanvasIsBusy();
 
   const copyToInpaintMask = useCallback(() => {
@@ -35,10 +35,10 @@ export const RasterLayerMenuItemsCopyToSubMenu = memo(() => {
     dispatch(
       rasterLayerConvertedToControlLayer({
         entityIdentifier,
-        overrides: { controlAdapter: defaultControlAdapter },
+        overrides: { controlAdapter: deepClone(initialControlNet) },
       })
     );
-  }, [defaultControlAdapter, dispatch, entityIdentifier]);
+  }, [dispatch, entityIdentifier]);
 
   return (
     <MenuItem {...subMenu.parentMenuItemProps} icon={<PiCopyBold />} isDisabled={isBusy}>

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityGroupList.tsx

@@ -2,6 +2,7 @@ import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Button, Collapse, Flex, Icon, Spacer, Text } from '@invoke-ai/ui-library';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useBoolean } from 'common/hooks/useBoolean';
+import { fixTooltipCloseOnScrollStyles } from 'common/util/fixTooltipCloseOnScrollStyles';
 import { CanvasEntityAddOfTypeButton } from 'features/controlLayers/components/common/CanvasEntityAddOfTypeButton';
 import { CanvasEntityMergeVisibleButton } from 'features/controlLayers/components/common/CanvasEntityMergeVisibleButton';
 import { CanvasEntityTypeIsHiddenToggle } from 'features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle';
@@ -78,7 +79,7 @@ export const CanvasEntityGroupList = memo(({ isSelected, type, children }: Props
         {isRenderableEntityType(type) && <CanvasEntityTypeIsHiddenToggle type={type} />}
         <CanvasEntityAddOfTypeButton type={type} />
       </Flex>
-      <Collapse in={collapse.isTrue}>
+      <Collapse in={collapse.isTrue} style={fixTooltipCloseOnScrollStyles}>
         <Flex flexDir="column" gap={2} pt={2}>
           {children}
         </Flex>

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityPreviewImage.tsx

@@ -1,4 +1,4 @@
-import { Box, chakra, Flex } from '@invoke-ai/ui-library';
+import { Box, chakra, Flex, Tooltip } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { rgbColorToString } from 'common/util/colorCodeTransformers';
@@ -86,13 +86,63 @@ export const CanvasEntityPreviewImage = memo(() => {
 
   useEffect(updatePreview, [updatePreview, canvasCache, nodeRect, pixelRect]);
 
+  return (
+    <Tooltip label={<TooltipContent canvasRef={canvasRef} />} p={2} closeOnScroll>
+      <Flex
+        position="relative"
+        alignItems="center"
+        justifyContent="center"
+        w={CONTAINER_WIDTH_PX}
+        h={CONTAINER_WIDTH_PX}
+        borderRadius="sm"
+        borderWidth={1}
+        bg="base.900"
+        flexShrink={0}
+      >
+        <Box
+          position="absolute"
+          top={0}
+          right={0}
+          bottom={0}
+          left={0}
+          bgImage={TRANSPARENCY_CHECKERBOARD_PATTERN_DARK_DATAURL}
+          bgSize="5px"
+        />
+        <ChakraCanvas position="relative" ref={canvasRef} objectFit="contain" maxW="full" maxH="full" />
+      </Flex>
+    </Tooltip>
+  );
+});
+
+CanvasEntityPreviewImage.displayName = 'CanvasEntityPreviewImage';
+
+const TooltipContent = ({ canvasRef }: { canvasRef: React.RefObject<HTMLCanvasElement> }) => {
+  const canvasRef2 = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (!canvasRef2.current || !canvasRef.current) {
+      return;
+    }
+
+    const ctx = canvasRef2.current.getContext('2d');
+
+    if (!ctx) {
+      return;
+    }
+
+    canvasRef2.current.width = canvasRef.current.width;
+    canvasRef2.current.height = canvasRef.current.height;
+    ctx.clearRect(0, 0, canvasRef2.current.width, canvasRef2.current.height);
+    ctx.drawImage(canvasRef.current, 0, 0);
+  }, [canvasRef]);
+
   return (
     <Flex
       position="relative"
       alignItems="center"
       justifyContent="center"
-      w={CONTAINER_WIDTH_PX}
-      h={CONTAINER_WIDTH_PX}
+      w={150}
+      h={150}
       borderRadius="sm"
       borderWidth={1}
       bg="base.900"
@@ -105,11 +155,9 @@ export const CanvasEntityPreviewImage = memo(() => {
         bottom={0}
         left={0}
         bgImage={TRANSPARENCY_CHECKERBOARD_PATTERN_DARK_DATAURL}
-        bgSize="5px"
+        bgSize="8px"
       />
-      <ChakraCanvas position="relative" ref={canvasRef} objectFit="contain" maxW="full" maxH="full" />
+      <ChakraCanvas position="relative" ref={canvasRef2} objectFit="contain" maxW="full" maxH="full" />
     </Flex>
   );
-});
-
-CanvasEntityPreviewImage.displayName = 'CanvasEntityPreviewImage';
+};

invokeai/frontend/web/src/features/controlLayers/contexts/EntityAdapterContext.tsx

@@ -4,9 +4,10 @@ import type { CanvasEntityAdapterControlLayer } from 'features/controlLayers/kon
 import type { CanvasEntityAdapterInpaintMask } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterInpaintMask';
 import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRasterLayer';
 import type { CanvasEntityAdapterRegionalGuidance } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRegionalGuidance';
-import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
+import type { CanvasEntityAdapterFromType } from 'features/controlLayers/konva/CanvasEntity/types';
+import type { CanvasEntityIdentifier, CanvasRenderableEntityType } from 'features/controlLayers/store/types';
 import type { PropsWithChildren } from 'react';
-import { createContext, memo, useMemo, useSyncExternalStore } from 'react';
+import { createContext, memo, useContext, useMemo, useSyncExternalStore } from 'react';
 import { assert } from 'tsafe';
 
 const EntityAdapterContext = createContext<
@@ -95,6 +96,17 @@ export const RegionalGuidanceAdapterGate = memo(({ children }: PropsWithChildren
   return <EntityAdapterContext.Provider value={adapter}>{children}</EntityAdapterContext.Provider>;
 });
 
+export const useEntityAdapterContext = <T extends CanvasRenderableEntityType | undefined = CanvasRenderableEntityType>(
+  type?: T
+): CanvasEntityAdapterFromType<T extends undefined ? CanvasRenderableEntityType : T> => {
+  const adapter = useContext(EntityAdapterContext);
+  assert(adapter, 'useEntityIdentifier must be used within a EntityIdentifierProvider');
+  if (type) {
+    assert(adapter.entityIdentifier.type === type, 'useEntityIdentifier must be used with the correct type');
+  }
+  return adapter as CanvasEntityAdapterFromType<T extends undefined ? CanvasRenderableEntityType : T>;
+};
+
 RegionalGuidanceAdapterGate.displayName = 'RegionalGuidanceAdapterGate';
 
 export const useEntityAdapterSafe = (

invokeai/frontend/web/src/features/controlLayers/hooks/addLayerHooks.ts

@@ -49,6 +49,7 @@ import { isControlNetOrT2IAdapterModelConfig, isIPAdapterModelConfig } from 'ser
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
 
+/** @knipignore */
 export const selectDefaultControlAdapter = createSelector(
   selectModelConfigsQuery,
   selectBase,
@@ -92,11 +93,10 @@ export const selectDefaultIPAdapter = createSelector(
 
 export const useAddControlLayer = () => {
   const dispatch = useAppDispatch();
-  const defaultControlAdapter = useAppSelector(selectDefaultControlAdapter);
   const func = useCallback(() => {
-    const overrides = { controlAdapter: defaultControlAdapter };
+    const overrides = { controlAdapter: deepClone(initialControlNet) };
     dispatch(controlLayerAdded({ isSelected: true, overrides }));
-  }, [defaultControlAdapter, dispatch]);
+  }, [dispatch]);
 
   return func;
 };

invokeai/frontend/web/src/features/controlLayers/hooks/saveCanvasHooks.ts

@@ -4,7 +4,7 @@ import type { SerializableObject } from 'common/types';
 import { deepClone } from 'common/util/deepClone';
 import { withResultAsync } from 'common/util/result';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { selectDefaultControlAdapter, selectDefaultIPAdapter } from 'features/controlLayers/hooks/addLayerHooks';
+import { selectDefaultIPAdapter } from 'features/controlLayers/hooks/addLayerHooks';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import {
   controlLayerAdded,
@@ -25,7 +25,7 @@ import type {
   Rect,
   RegionalGuidanceReferenceImageState,
 } from 'features/controlLayers/store/types';
-import { imageDTOToImageObject, imageDTOToImageWithDims } from 'features/controlLayers/store/util';
+import { imageDTOToImageObject, imageDTOToImageWithDims, initialControlNet } from 'features/controlLayers/store/util';
 import { toast } from 'features/toast/toast';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -229,13 +229,12 @@ export const useNewRasterLayerFromBbox = () => {
 export const useNewControlLayerFromBbox = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const defaultControlAdapter = useAppSelector(selectDefaultControlAdapter);
 
   const arg = useMemo<UseSaveCanvasArg>(() => {
     const onSave = (imageDTO: ImageDTO, rect: Rect) => {
       const overrides: Partial<CanvasControlLayerState> = {
         objects: [imageDTOToImageObject(imageDTO)],
-        controlAdapter: deepClone(defaultControlAdapter),
+        controlAdapter: deepClone(initialControlNet),
         position: { x: rect.x, y: rect.y },
       };
       dispatch(controlLayerAdded({ overrides, isSelected: true }));
@@ -248,7 +247,7 @@ export const useNewControlLayerFromBbox = () => {
       toastOk: t('controlLayers.newControlLayerOk'),
       toastError: t('controlLayers.newControlLayerError'),
     };
-  }, [defaultControlAdapter, dispatch, t]);
+  }, [dispatch, t]);
   const func = useSaveCanvas(arg);
   return func;
 };

invokeai/frontend/web/src/features/controlLayers/konva/CanvasCompositorModule.ts

@@ -329,6 +329,7 @@ export class CanvasCompositorModule extends CanvasModuleBase {
     entityIdentifiers: T[],
     deleteMergedEntities: boolean
   ): Promise<ImageDTO | null> => {
+    toast({ id: 'MERGE_LAYERS_TOAST', title: t('controlLayers.mergingLayers'), withCount: false });
     if (entityIdentifiers.length <= 1) {
       this.log.warn({ entityIdentifiers }, 'Cannot merge less than 2 entities');
       return null;
@@ -351,7 +352,12 @@ export class CanvasCompositorModule extends CanvasModuleBase {
 
     if (result.isErr()) {
       this.log.error({ error: serializeError(result.error) }, 'Failed to merge selected entities');
-      toast({ title: t('controlLayers.mergeVisibleError'), status: 'error' });
+      toast({
+        id: 'MERGE_LAYERS_TOAST',
+        title: t('controlLayers.mergeVisibleError'),
+        status: 'error',
+        withCount: false,
+      });
       return null;
     }
 
@@ -383,7 +389,7 @@ export class CanvasCompositorModule extends CanvasModuleBase {
         assert<Equals<typeof type, never>>(false, 'Unsupported type for merge');
     }
 
-    toast({ title: t('controlLayers.mergeVisibleOk') });
+    toast({ id: 'MERGE_LAYERS_TOAST', title: t('controlLayers.mergeVisibleOk'), status: 'success', withCount: false });
 
     return result.value;
   };

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityFilterer.ts

@@ -83,6 +83,13 @@ export class CanvasEntityFilterer extends CanvasModuleBase {
    * Whether the module has an image state. This is a computed value based on $imageState.
    */
   $hasImageState = computed(this.$imageState, (imageState) => imageState !== null);
+
+  /**
+   * Whether the filter is in simple mode. In simple mode, the filter is started with a default filter config and the
+   * user is not presented with filter settings.
+   */
+  $simple = atom<boolean>(false);
+
   /**
    * The filtered image object module, if it exists.
    */
@@ -147,7 +154,7 @@ export class CanvasEntityFilterer extends CanvasModuleBase {
 
   /**
    * Starts the filter module.
-   * @param config The filter config to start with. If omitted, the default filter config is used.
+   * @param config The filter config to use. If omitted, the default filter config is used.
    */
   start = (config?: FilterConfig) => {
     const filteringAdapter = this.manager.stateApi.$filteringAdapter.get();
@@ -174,12 +181,14 @@ export class CanvasEntityFilterer extends CanvasModuleBase {
       // If a config is provided, use it
       this.$filterConfig.set(config);
       this.$initialFilterConfig.set(config);
+      this.$simple.set(true);
     } else {
-      this.$filterConfig.set(this.createInitialFilterConfig());
+      const initialConfig = this.createInitialFilterConfig();
+      this.$filterConfig.set(initialConfig);
+      this.$initialFilterConfig.set(initialConfig);
+      this.$simple.set(false);
     }
 
-    this.$initialFilterConfig.set(this.$filterConfig.get());
-
     this.subscribe();
 
     this.manager.stateApi.$filteringAdapter.set(this.parent);
@@ -198,7 +207,7 @@ export class CanvasEntityFilterer extends CanvasModuleBase {
       );
       const modelConfig = this.manager.stateApi.runSelector(selectModelConfig);
       // This always returns a filter
-      const filter = getFilterForModel(modelConfig);
+      const filter = getFilterForModel(modelConfig) ?? IMAGE_FILTERS.canny_edge_detection;
       return filter.buildDefaults();
     } else {
       // Otherwise, used the default filter
@@ -404,7 +413,7 @@ export class CanvasEntityFilterer extends CanvasModuleBase {
       this.imageModule.destroy();
       this.imageModule = null;
     }
-    const initialFilterConfig = this.$initialFilterConfig.get() ?? this.createInitialFilterConfig();
+    const initialFilterConfig = deepClone(this.$initialFilterConfig.get() ?? this.createInitialFilterConfig());
     this.$filterConfig.set(initialFilterConfig);
     this.$imageState.set(null);
     this.$lastProcessedHash.set('');

invokeai/frontend/web/src/features/controlLayers/store/filters.ts

@@ -456,14 +456,14 @@ const PROCESSOR_TO_FILTER_MAP: Record<string, FilterType> = {
  */
 export const getFilterForModel = (modelConfig: ControlNetModelConfig | T2IAdapterModelConfig | null) => {
   if (!modelConfig) {
-    // No model, use the default filter
-    return IMAGE_FILTERS.canny_edge_detection;
+    // No model
+    return null;
   }
 
   const preprocessor = modelConfig?.default_settings?.preprocessor;
   if (!preprocessor) {
-    // No preprocessor, use the default filter
-    return IMAGE_FILTERS.canny_edge_detection;
+    // No preprocessor
+    return null;
   }
 
   if (isFilterType(preprocessor)) {
@@ -473,8 +473,8 @@ export const getFilterForModel = (modelConfig: ControlNetModelConfig | T2IAdapte
 
   const filterName = PROCESSOR_TO_FILTER_MAP[preprocessor];
   if (!filterName) {
-    // No filter found, use the default filter
-    return IMAGE_FILTERS.canny_edge_detection;
+    // No filter found
+    return null;
   }
 
   // Found a filter, use it

invokeai/frontend/web/src/features/controlLayers/store/util.ts

@@ -78,8 +78,8 @@ export const initialT2IAdapter: T2IAdapterConfig = {
 export const initialControlNet: ControlNetConfig = {
   type: 'controlnet',
   model: null,
-  weight: 1,
-  beginEndStepPct: [0, 1],
+  weight: 0.75,
+  beginEndStepPct: [0, 0.75],
   controlMode: 'balanced',
 };
 

invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx

@@ -27,6 +27,8 @@ export const DeleteImageButton = memo((props: DeleteImageButtonProps) => {
       aria-label={labelMessage}
       isDisabled={isDisabled || !isConnected}
       colorScheme="error"
+      variant="link"
+      alignSelf="stretch"
     />
   );
 });

invokeai/frontend/web/src/features/gallery/components/ImageViewer/CompareToolbar.tsx

@@ -22,7 +22,7 @@ import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/us
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Trans, useTranslation } from 'react-i18next';
-import { PiArrowsOutBold, PiQuestion, PiSwapBold } from 'react-icons/pi';
+import { PiArrowsLeftRightBold, PiArrowsOutBold, PiQuestion } from 'react-icons/pi';
 
 export const CompareToolbar = memo(() => {
   const { t } = useTranslation();
@@ -60,14 +60,16 @@ export const CompareToolbar = memo(() => {
   useRegisteredHotkeys({ id: 'nextComparisonMode', category: 'viewer', callback: nextMode, dependencies: [nextMode] });
 
   return (
-    <Flex w="full" gap={2}>
+    <Flex w="full" px={2} gap={2} bg="base.750" borderTopRadius="base" h={12}>
       <Flex flex={1} justifyContent="center">
-        <Flex gap={2} marginInlineEnd="auto">
+        <Flex marginInlineEnd="auto" alignItems="center">
           <IconButton
-            icon={<PiSwapBold />}
+            icon={<PiArrowsLeftRightBold />}
             aria-label={`${t('gallery.swapImages')} (C)`}
             tooltip={`${t('gallery.swapImages')} (C)`}
             onClick={swapImages}
+            variant="link"
+            alignSelf="stretch"
           />
           {comparisonMode !== 'side-by-side' && (
             <IconButton
@@ -75,14 +77,15 @@ export const CompareToolbar = memo(() => {
               tooltip={t('gallery.stretchToFit')}
               onClick={toggleComparisonFit}
               colorScheme={comparisonFit === 'fill' ? 'invokeBlue' : 'base'}
-              variant="outline"
+              variant="link"
+              alignSelf="stretch"
               icon={<PiArrowsOutBold />}
             />
           )}
         </Flex>
       </Flex>
-      <Flex flex={1} gap={4} justifyContent="center">
-        <ButtonGroup variant="outline">
+      <Flex flex={1} justifyContent="center">
+        <ButtonGroup variant="outline" alignItems="center">
           <Button
             flexShrink={0}
             onClick={setComparisonModeSlider}
@@ -110,11 +113,13 @@ export const CompareToolbar = memo(() => {
         <Flex gap={2} marginInlineStart="auto" alignItems="center">
           <Tooltip label={<CompareHelp />}>
             <Flex alignItems="center">
-              <Icon boxSize={6} color="base.500" as={PiQuestion} lineHeight={0} />
+              <Icon boxSize={6} color="base.300" as={PiQuestion} lineHeight={0} />
             </Flex>
           </Tooltip>
           <Button
-            variant="ghost"
+            variant="link"
+            alignSelf="stretch"
+            px={2}
             aria-label={`${t('gallery.exitCompare')} (Esc)`}
             tooltip={`${t('gallery.exitCompare')} (Esc)`}
             onClick={exitCompare}

invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx

@@ -1,4 +1,4 @@
-import { ButtonGroup, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
+import { Divider, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppSelector } from 'app/store/storeHooks';
@@ -46,73 +46,81 @@ const CurrentImageButtonsContent = memo(({ imageDTO }: { imageDTO: ImageDTO }) =
 
   return (
     <>
-      <ButtonGroup>
-        <Menu isLazy>
-          <MenuButton
-            as={IconButton}
-            aria-label={t('parameters.imageActions')}
-            tooltip={t('parameters.imageActions')}
-            isDisabled={!imageDTO}
-            icon={<PiDotsThreeOutlineFill />}
-          />
-          <MenuList>{imageDTO && <SingleSelectionMenuItems imageDTO={imageDTO} />}</MenuList>
-        </Menu>
-      </ButtonGroup>
+      <Menu isLazy>
+        <MenuButton
+          as={IconButton}
+          aria-label={t('parameters.imageActions')}
+          tooltip={t('parameters.imageActions')}
+          isDisabled={!imageDTO}
+          variant="link"
+          alignSelf="stretch"
+          icon={<PiDotsThreeOutlineFill />}
+        />
+        <MenuList>{imageDTO && <SingleSelectionMenuItems imageDTO={imageDTO} />}</MenuList>
+      </Menu>
 
-      <ButtonGroup>
-        <IconButton
-          icon={<PiFlowArrowBold />}
-          tooltip={`${t('nodes.loadWorkflow')} (W)`}
-          aria-label={`${t('nodes.loadWorkflow')} (W)`}
-          isDisabled={!imageActions.hasWorkflow || !hasTemplates}
-          onClick={imageActions.loadWorkflow}
-        />
-        <IconButton
-          icon={<PiArrowsCounterClockwiseBold />}
-          tooltip={`${t('parameters.remixImage')} (R)`}
-          aria-label={`${t('parameters.remixImage')} (R)`}
-          isDisabled={!imageActions.hasMetadata}
-          onClick={imageActions.remix}
-        />
-        <IconButton
-          icon={<PiQuotesBold />}
-          tooltip={`${t('parameters.usePrompt')} (P)`}
-          aria-label={`${t('parameters.usePrompt')} (P)`}
-          isDisabled={!imageActions.hasPrompts}
-          onClick={imageActions.recallPrompts}
-        />
-        <IconButton
-          icon={<PiPlantBold />}
-          tooltip={`${t('parameters.useSeed')} (S)`}
-          aria-label={`${t('parameters.useSeed')} (S)`}
-          isDisabled={!imageActions.hasSeed}
-          onClick={imageActions.recallSeed}
-        />
-        <IconButton
-          icon={<PiRulerBold />}
-          tooltip={`${t('parameters.useSize')} (D)`}
-          aria-label={`${t('parameters.useSize')} (D)`}
-          onClick={imageActions.recallSize}
-          isDisabled={isStaging}
-        />
-        <IconButton
-          icon={<PiAsteriskBold />}
-          tooltip={`${t('parameters.useAll')} (A)`}
-          aria-label={`${t('parameters.useAll')} (A)`}
-          isDisabled={!imageActions.hasMetadata}
-          onClick={imageActions.recallAll}
-        />
-      </ButtonGroup>
+      <Divider orientation="vertical" h={8} mx={2} />
 
-      {isUpscalingEnabled && (
-        <ButtonGroup>
-          <PostProcessingPopover imageDTO={imageDTO} />
-        </ButtonGroup>
-      )}
+      <IconButton
+        icon={<PiFlowArrowBold />}
+        tooltip={`${t('nodes.loadWorkflow')} (W)`}
+        aria-label={`${t('nodes.loadWorkflow')} (W)`}
+        isDisabled={!imageActions.hasWorkflow || !hasTemplates}
+        variant="link"
+        alignSelf="stretch"
+        onClick={imageActions.loadWorkflow}
+      />
+      <IconButton
+        icon={<PiArrowsCounterClockwiseBold />}
+        tooltip={`${t('parameters.remixImage')} (R)`}
+        aria-label={`${t('parameters.remixImage')} (R)`}
+        isDisabled={!imageActions.hasMetadata}
+        variant="link"
+        alignSelf="stretch"
+        onClick={imageActions.remix}
+      />
+      <IconButton
+        icon={<PiQuotesBold />}
+        tooltip={`${t('parameters.usePrompt')} (P)`}
+        aria-label={`${t('parameters.usePrompt')} (P)`}
+        isDisabled={!imageActions.hasPrompts}
+        variant="link"
+        alignSelf="stretch"
+        onClick={imageActions.recallPrompts}
+      />
+      <IconButton
+        icon={<PiPlantBold />}
+        tooltip={`${t('parameters.useSeed')} (S)`}
+        aria-label={`${t('parameters.useSeed')} (S)`}
+        isDisabled={!imageActions.hasSeed}
+        variant="link"
+        alignSelf="stretch"
+        onClick={imageActions.recallSeed}
+      />
+      <IconButton
+        icon={<PiRulerBold />}
+        tooltip={`${t('parameters.useSize')} (D)`}
+        aria-label={`${t('parameters.useSize')} (D)`}
+        variant="link"
+        alignSelf="stretch"
+        onClick={imageActions.recallSize}
+        isDisabled={isStaging}
+      />
+      <IconButton
+        icon={<PiAsteriskBold />}
+        tooltip={`${t('parameters.useAll')} (A)`}
+        aria-label={`${t('parameters.useAll')} (A)`}
+        isDisabled={!imageActions.hasMetadata}
+        variant="link"
+        alignSelf="stretch"
+        onClick={imageActions.recallAll}
+      />
 
-      <ButtonGroup>
-        <DeleteImageButton onClick={imageActions.delete} />
-      </ButtonGroup>
+      {isUpscalingEnabled && <PostProcessingPopover imageDTO={imageDTO} />}
+
+      <Divider orientation="vertical" h={8} mx={2} />
+
+      <DeleteImageButton onClick={imageActions.delete} />
     </>
   );
 });

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx

@@ -37,7 +37,6 @@ export const ImageViewer = memo(({ closeButton }: Props) => {
       ref={ref}
       tabIndex={-1}
       layerStyle="first"
-      p={2}
       borderRadius="base"
       position="absolute"
       flexDirection="column"
@@ -51,7 +50,7 @@ export const ImageViewer = memo(({ closeButton }: Props) => {
     >
       {hasImageToCompare && <CompareToolbar />}
       {!hasImageToCompare && <ViewerToolbar closeButton={closeButton} />}
-      <Box ref={containerRef} w="full" h="full">
+      <Box ref={containerRef} w="full" h="full" p={2}>
         {!hasImageToCompare && <CurrentImagePreview />}
         {hasImageToCompare && <ImageComparison containerDims={containerDims} />}
       </Box>
@@ -84,7 +83,8 @@ const ImageViewerCloseButton = memo(() => {
       tooltip={t('gallery.closeViewer')}
       aria-label={t('gallery.closeViewer')}
       icon={<PiXBold />}
-      variant="ghost"
+      variant="link"
+      alignSelf="stretch"
       onClick={imageViewer.close}
     />
   );

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx

@@ -38,7 +38,8 @@ export const ToggleMetadataViewerButton = memo(() => {
       aria-label={`${t('parameters.info')} (I)`}
       onClick={toggleMetadataViewer}
       isDisabled={!imageDTO}
-      variant="outline"
+      variant="link"
+      alignSelf="stretch"
       colorScheme={shouldShowImageDetails ? 'invokeBlue' : 'base'}
       data-testid="toggle-show-metadata-button"
     />

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx

@@ -21,7 +21,8 @@ export const ToggleProgressButton = memo(() => {
       tooltip={t('settings.displayInProgress')}
       icon={<PiHourglassHighBold />}
       onClick={onClick}
-      variant="outline"
+      variant="link"
+      alignSelf="stretch"
       colorScheme={shouldShowProgressInViewer ? 'invokeBlue' : 'base'}
       data-testid="toggle-show-progress-button"
     />

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToolbar.tsx

@@ -12,18 +12,18 @@ type Props = {
 
 export const ViewerToolbar = memo(({ closeButton }: Props) => {
   return (
-    <Flex w="full" gap={2}>
+    <Flex w="full" px={2} gap={2} bg="base.750" borderTopRadius="base" h={12}>
       <Flex flex={1} justifyContent="center">
-        <Flex gap={2} marginInlineEnd="auto">
+        <Flex marginInlineEnd="auto" alignItems="center">
           <ToggleProgressButton />
           <ToggleMetadataViewerButton />
         </Flex>
       </Flex>
-      <Flex flex={1} gap={2} justifyContent="center">
+      <Flex flex={1} justifyContent="center" alignItems="center">
         <CurrentImageButtons />
       </Flex>
       <Flex flex={1} justifyContent="center">
-        <Flex gap={2} marginInlineStart="auto">
+        <Flex marginInlineStart="auto" alignItems="center">
           {closeButton}
         </Flex>
       </Flex>

invokeai/frontend/web/src/features/parameters/components/Core/ParamDenoisingStrength.tsx

@@ -1,53 +0,0 @@
-import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { selectImg2imgStrength, setImg2imgStrength } from 'features/controlLayers/store/paramsSlice';
-import { selectImg2imgStrengthConfig } from 'features/system/store/configSlice';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const marks = [0, 0.5, 1];
-
-export const ParamDenoisingStrength = memo(() => {
-  const img2imgStrength = useAppSelector(selectImg2imgStrength);
-  const dispatch = useAppDispatch();
-
-  const onChange = useCallback(
-    (v: number) => {
-      dispatch(setImg2imgStrength(v));
-    },
-    [dispatch]
-  );
-
-  const config = useAppSelector(selectImg2imgStrengthConfig);
-  const { t } = useTranslation();
-
-  return (
-    <FormControl>
-      <InformationalPopover feature="paramDenoisingStrength">
-        <FormLabel>{`${t('parameters.denoisingStrength')}`}</FormLabel>
-      </InformationalPopover>
-      <CompositeSlider
-        step={config.coarseStep}
-        fineStep={config.fineStep}
-        min={config.sliderMin}
-        max={config.sliderMax}
-        defaultValue={config.initial}
-        onChange={onChange}
-        value={img2imgStrength}
-        marks={marks}
-      />
-      <CompositeNumberInput
-        step={config.coarseStep}
-        fineStep={config.fineStep}
-        min={config.numberInputMin}
-        max={config.numberInputMax}
-        defaultValue={config.initial}
-        onChange={onChange}
-        value={img2imgStrength}
-      />
-    </FormControl>
-  );
-});
-
-ParamDenoisingStrength.displayName = 'ParamDenoisingStrength';

invokeai/frontend/web/src/features/parameters/components/PostProcessing/PostProcessingPopover.tsx

@@ -47,6 +47,8 @@ export const PostProcessingPopover = memo((props: Props) => {
           onClick={onOpen}
           icon={<PiFrameCornersBold />}
           aria-label={t('parameters.postProcessing')}
+          variant="link"
+          alignSelf="stretch"
         />
       </PopoverTrigger>
       <PopoverContent>

invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts

@@ -15,88 +15,87 @@ import { z } from 'zod';
  * simply be the zod schema's safeParse function
  */
 
+/**
+ * Helper to create a type guard from a zod schema. The type guard will infer the schema's TS type.
+ * @param schema The zod schema to create a type guard from.
+ * @returns A type guard function for the schema.
+ */
+const buildTypeGuard = <T extends z.ZodTypeAny>(schema: T) => {
+  return (val: unknown): val is z.infer<T> => schema.safeParse(val).success;
+};
+
+/**
+ * Helper to create a zod schema and a type guard from it.
+ * @param schema The zod schema to create a type guard from.
+ * @returns A tuple containing the zod schema and the type guard function.
+ */
+const buildParameter = <T extends z.ZodTypeAny>(schema: T) => [schema, buildTypeGuard(schema)] as const;
+
 // #region Positive prompt
-export const zParameterPositivePrompt = z.string();
+export const [zParameterPositivePrompt, isParameterPositivePrompt] = buildParameter(z.string());
 export type ParameterPositivePrompt = z.infer<typeof zParameterPositivePrompt>;
-export const isParameterPositivePrompt = (val: unknown): val is ParameterPositivePrompt =>
-  zParameterPositivePrompt.safeParse(val).success;
 // #endregion
 
 // #region Negative prompt
-export const zParameterNegativePrompt = z.string();
+export const [zParameterNegativePrompt, isParameterNegativePrompt] = buildParameter(z.string());
 export type ParameterNegativePrompt = z.infer<typeof zParameterNegativePrompt>;
-export const isParameterNegativePrompt = (val: unknown): val is ParameterNegativePrompt =>
-  zParameterNegativePrompt.safeParse(val).success;
 // #endregion
 
 // #region Positive style prompt (SDXL)
-const zParameterPositiveStylePromptSDXL = z.string();
+export const [zParameterPositiveStylePromptSDXL, isParameterPositiveStylePromptSDXL] = buildParameter(z.string());
 export type ParameterPositiveStylePromptSDXL = z.infer<typeof zParameterPositiveStylePromptSDXL>;
-export const isParameterPositiveStylePromptSDXL = (val: unknown): val is ParameterPositiveStylePromptSDXL =>
-  zParameterPositiveStylePromptSDXL.safeParse(val).success;
 // #endregion
 
 // #region Positive style prompt (SDXL)
-const zParameterNegativeStylePromptSDXL = z.string();
+export const [zParameterNegativeStylePromptSDXL, isParameterNegativeStylePromptSDXL] = buildParameter(z.string());
 export type ParameterNegativeStylePromptSDXL = z.infer<typeof zParameterNegativeStylePromptSDXL>;
-export const isParameterNegativeStylePromptSDXL = (val: unknown): val is ParameterNegativeStylePromptSDXL =>
-  zParameterNegativeStylePromptSDXL.safeParse(val).success;
 // #endregion
 
 // #region Steps
-const zParameterSteps = z.number().int().min(1);
+export const [zParameterSteps, isParameterSteps] = buildParameter(z.number().int().min(1));
 export type ParameterSteps = z.infer<typeof zParameterSteps>;
-export const isParameterSteps = (val: unknown): val is ParameterSteps => zParameterSteps.safeParse(val).success;
 // #endregion
 
 // #region CFG scale parameter
-const zParameterCFGScale = z.number().min(1);
+export const [zParameterCFGScale, isParameterCFGScale] = buildParameter(z.number().min(1));
 export type ParameterCFGScale = z.infer<typeof zParameterCFGScale>;
-export const isParameterCFGScale = (val: unknown): val is ParameterCFGScale =>
-  zParameterCFGScale.safeParse(val).success;
 // #endregion
 
 // #region Guidance parameter
-const zParameterGuidance = z.number().min(1);
+export const [zParameterGuidance, isParameterGuidance] = buildParameter(z.number().min(1));
 export type ParameterGuidance = z.infer<typeof zParameterGuidance>;
-export const isParameterGuidance = (val: unknown): val is ParameterGuidance =>
-  zParameterGuidance.safeParse(val).success;
 // #endregion
 
 // #region CFG Rescale Multiplier
-const zParameterCFGRescaleMultiplier = z.number().gte(0).lt(1);
+export const [zParameterCFGRescaleMultiplier, isParameterCFGRescaleMultiplier] = buildParameter(
+  z.number().gte(0).lt(1)
+);
 export type ParameterCFGRescaleMultiplier = z.infer<typeof zParameterCFGRescaleMultiplier>;
-export const isParameterCFGRescaleMultiplier = (val: unknown): val is ParameterCFGRescaleMultiplier =>
-  zParameterCFGRescaleMultiplier.safeParse(val).success;
 // #endregion
 
 // #region Scheduler
-const zParameterScheduler = zSchedulerField;
+export const [zParameterScheduler, isParameterScheduler] = buildParameter(zSchedulerField);
 export type ParameterScheduler = z.infer<typeof zParameterScheduler>;
-export const isParameterScheduler = (val: unknown): val is ParameterScheduler =>
-  zParameterScheduler.safeParse(val).success;
 // #endregion
 
 // #region seed
-const zParameterSeed = z.number().int().min(0).max(NUMPY_RAND_MAX);
+export const [zParameterSeed, isParameterSeed] = buildParameter(z.number().int().min(0).max(NUMPY_RAND_MAX));
 export type ParameterSeed = z.infer<typeof zParameterSeed>;
-export const isParameterSeed = (val: unknown): val is ParameterSeed => zParameterSeed.safeParse(val).success;
 // #endregion
 
 // #region Width
-export const zParameterImageDimension = z
-  .number()
-  .min(64)
-  .transform((val) => roundToMultiple(val, 8));
+export const [zParameterImageDimension, isParameterImageDimension] = buildParameter(
+  z
+    .number()
+    .min(64)
+    .transform((val) => roundToMultiple(val, 8))
+);
 export type ParameterWidth = z.infer<typeof zParameterImageDimension>;
-export const isParameterWidth = (val: unknown): val is ParameterWidth =>
-  zParameterImageDimension.safeParse(val).success;
-// #endregion
+export const isParameterWidth = isParameterImageDimension;
 
 // #region Height
 export type ParameterHeight = z.infer<typeof zParameterImageDimension>;
-export const isParameterHeight = (val: unknown): val is ParameterHeight =>
-  zParameterImageDimension.safeParse(val).success;
+export const isParameterHeight = isParameterImageDimension;
 // #endregion
 
 // #region Model
@@ -135,70 +134,50 @@ export type ParameterSpandrelImageToImageModel = z.infer<typeof zParameterSpandr
 // #endregion
 
 // #region Strength (l2l strength)
-const zParameterStrength = z.number().min(0).max(1);
+export const [zParameterStrength, isParameterStrength] = buildParameter(z.number().min(0).max(1));
 export type ParameterStrength = z.infer<typeof zParameterStrength>;
-export const isParameterStrength = (val: unknown): val is ParameterStrength =>
-  zParameterStrength.safeParse(val).success;
 // #endregion
 
 // #region SeamlessX
-const zParameterSeamlessX = z.boolean();
+export const [zParameterSeamlessX, isParameterSeamlessX] = buildParameter(z.boolean());
 export type ParameterSeamlessX = z.infer<typeof zParameterSeamlessX>;
-export const isParameterSeamlessX = (val: unknown): val is ParameterSeamlessX =>
-  zParameterSeamlessX.safeParse(val).success;
 // #endregion
 
 // #region SeamlessY
-const zParameterSeamlessY = z.boolean();
+export const [zParameterSeamlessY, isParameterSeamlessY] = buildParameter(z.boolean());
 export type ParameterSeamlessY = z.infer<typeof zParameterSeamlessY>;
-export const isParameterSeamlessY = (val: unknown): val is ParameterSeamlessY =>
-  zParameterSeamlessY.safeParse(val).success;
 // #endregion
 
 // #region Precision
-const zParameterPrecision = z.enum(['fp16', 'fp32']);
+export const [zParameterPrecision, isParameterPrecision] = buildParameter(z.enum(['fp16', 'fp32']));
 export type ParameterPrecision = z.infer<typeof zParameterPrecision>;
-export const isParameterPrecision = (val: unknown): val is ParameterPrecision =>
-  zParameterPrecision.safeParse(val).success;
 // #endregion
 
 // #region HRF Method
-const zParameterHRFMethod = z.enum(['ESRGAN', 'bilinear']);
+export const [zParameterHRFMethod, isParameterHRFMethod] = buildParameter(z.enum(['ESRGAN', 'bilinear']));
 export type ParameterHRFMethod = z.infer<typeof zParameterHRFMethod>;
-export const isParameterHRFMethod = (val: unknown): val is ParameterHRFMethod =>
-  zParameterHRFMethod.safeParse(val).success;
 // #endregion
 
 // #region HRF Enabled
-const zParameterHRFEnabled = z.boolean();
+export const [zParameterHRFEnabled, isParameterHRFEnabled] = buildParameter(z.boolean());
 export type ParameterHRFEnabled = z.infer<typeof zParameterHRFEnabled>;
-export const isParameterHRFEnabled = (val: unknown): val is boolean =>
-  zParameterHRFEnabled.safeParse(val).success && val !== null && val !== undefined;
 // #endregion
 
 // #region SDXL Refiner Positive Aesthetic Score
-const zParameterSDXLRefinerPositiveAestheticScore = z.number().min(1).max(10);
+export const [zParameterSDXLRefinerPositiveAestheticScore, isParameterSDXLRefinerPositiveAestheticScore] =
+  buildParameter(z.number().min(1).max(10));
 export type ParameterSDXLRefinerPositiveAestheticScore = z.infer<typeof zParameterSDXLRefinerPositiveAestheticScore>;
-export const isParameterSDXLRefinerPositiveAestheticScore = (
-  val: unknown
-): val is ParameterSDXLRefinerPositiveAestheticScore =>
-  zParameterSDXLRefinerPositiveAestheticScore.safeParse(val).success;
 // #endregion
 
 // #region SDXL Refiner Negative Aesthetic Score
-const zParameterSDXLRefinerNegativeAestheticScore = zParameterSDXLRefinerPositiveAestheticScore;
+export const [zParameterSDXLRefinerNegativeAestheticScore, isParameterSDXLRefinerNegativeAestheticScore] =
+  buildParameter(zParameterSDXLRefinerPositiveAestheticScore);
 export type ParameterSDXLRefinerNegativeAestheticScore = z.infer<typeof zParameterSDXLRefinerNegativeAestheticScore>;
-export const isParameterSDXLRefinerNegativeAestheticScore = (
-  val: unknown
-): val is ParameterSDXLRefinerNegativeAestheticScore =>
-  zParameterSDXLRefinerNegativeAestheticScore.safeParse(val).success;
 // #endregion
 
 // #region SDXL Refiner Start
-const zParameterSDXLRefinerStart = z.number().min(0).max(1);
+export const [zParameterSDXLRefinerStart, isParameterSDXLRefinerStart] = buildParameter(z.number().min(0).max(1));
 export type ParameterSDXLRefinerStart = z.infer<typeof zParameterSDXLRefinerStart>;
-export const isParameterSDXLRefinerStart = (val: unknown): val is ParameterSDXLRefinerStart =>
-  zParameterSDXLRefinerStart.safeParse(val).success;
 // #endregion
 
 // #region Mask Blur Method
@@ -207,14 +186,13 @@ export type ParameterMaskBlurMethod = z.infer<typeof zParameterMaskBlurMethod>;
 // #endregion
 
 // #region Canvas Coherence Mode
-const zParameterCanvasCoherenceMode = z.enum(['Gaussian Blur', 'Box Blur', 'Staged']);
+export const [zParameterCanvasCoherenceMode, isParameterCanvasCoherenceMode] = buildParameter(
+  z.enum(['Gaussian Blur', 'Box Blur', 'Staged'])
+);
 export type ParameterCanvasCoherenceMode = z.infer<typeof zParameterCanvasCoherenceMode>;
-export const isParameterCanvasCoherenceMode = (val: unknown): val is ParameterCanvasCoherenceMode =>
-  zParameterCanvasCoherenceMode.safeParse(val).success;
 // #endregion
 
 // #region LoRA weight
-const zLoRAWeight = z.number();
-type ParameterLoRAWeight = z.infer<typeof zLoRAWeight>;
-export const isParameterLoRAWeight = (val: unknown): val is ParameterLoRAWeight => zLoRAWeight.safeParse(val).success;
+export const [zLoRAWeight, isParameterLoRAWeight] = buildParameter(z.number());
+export type ParameterLoRAWeight = z.infer<typeof zLoRAWeight>;
 // #endregion

invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx

@@ -10,7 +10,6 @@ import BboxScaledHeight from 'features/parameters/components/Bbox/BboxScaledHeig
 import BboxScaledWidth from 'features/parameters/components/Bbox/BboxScaledWidth';
 import BboxScaleMethod from 'features/parameters/components/Bbox/BboxScaleMethod';
 import { BboxSettings } from 'features/parameters/components/Bbox/BboxSettings';
-import { ParamDenoisingStrength } from 'features/parameters/components/Core/ParamDenoisingStrength';
 import { ParamSeedNumberInput } from 'features/parameters/components/Seed/ParamSeedNumberInput';
 import { ParamSeedRandomize } from 'features/parameters/components/Seed/ParamSeedRandomize';
 import { ParamSeedShuffle } from 'features/parameters/components/Seed/ParamSeedShuffle';
@@ -76,7 +75,6 @@ export const ImageSettingsAccordion = memo(() => {
           <ParamSeedShuffle />
           <ParamSeedRandomize />
         </Flex>
-        <ParamDenoisingStrength />
         <Expander label={t('accordions.advanced.options')} isOpen={isOpenExpander} onToggle={onToggleExpander}>
           <Flex gap={4} pb={4} flexDir="column">
             {isFLUX && <ParamOptimizedDenoisingToggle />}

invokeai/frontend/web/src/features/ui/components/WhatsNew.tsx

@@ -2,27 +2,44 @@ import { ExternalLink, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectConfigSlice } from 'features/system/store/configSlice';
+import { useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
 
 const selectIsLocal = createSelector(selectConfigSlice, (config) => config.isLocal);
 
 export const WhatsNew = () => {
   const { t } = useTranslation();
+  const { data } = useGetAppVersionQuery();
   const isLocal = useAppSelector(selectIsLocal);
 
+  const highlights = useMemo(() => (data?.highlights ? data.highlights : []), [data]);
+
   return (
     <Flex gap={4} flexDir="column">
       <UnorderedList fontSize="sm">
-        <ListItem>
-          <Trans
-            i18nKey="whatsNew.line1"
-            components={{
-              ItalicComponent: <Text as="span" color="white" fontSize="sm" fontStyle="italic" />,
-            }}
-          />
-        </ListItem>
-        <ListItem>{t('whatsNew.line2')}</ListItem>
-        <ListItem>{t('whatsNew.line3')}</ListItem>
+        {highlights.length ? (
+          highlights.map((highlight, index) => <ListItem key={index}>{highlight}</ListItem>)
+        ) : (
+          <>
+            <ListItem>
+              <Trans
+                i18nKey="whatsNew.line1"
+                components={{
+                  StrongComponent: <Text as="span" color="white" fontSize="sm" fontWeight="semibold" />,
+                }}
+              />
+            </ListItem>
+            <ListItem>
+              <Trans
+                i18nKey="whatsNew.line2"
+                components={{
+                  StrongComponent: <Text as="span" color="white" fontSize="sm" fontWeight="semibold" />,
+                }}
+              />
+            </ListItem>
+          </>
+        )}
       </UnorderedList>
       <Flex flexDir="column" gap={1}>
         <ExternalLink
@@ -31,7 +48,7 @@ export const WhatsNew = () => {
           label={t('whatsNew.readReleaseNotes')}
           href={
             isLocal
-              ? 'https://github.com/invoke-ai/InvokeAI/releases/tag/v5.0.0'
+              ? `https://github.com/invoke-ai/InvokeAI/releases/tag/v${data?.version}`
               : 'https://support.invoke.ai/support/solutions/articles/151000178246'
           }
         />

invokeai/frontend/web/src/services/api/schema.ts

@@ -1687,6 +1687,11 @@ export type components = {
              * @description App version
              */
             version: string;
+            /**
+             * Highlights
+             * @description Highlights of release
+             */
+            highlights?: string[] | null;
         };
         /**
          * Apply Tensor Mask to Image

invokeai/version/invokeai_version.py

@@ -1 +1 @@
-__version__ = "5.4.0"
+__version__ = "5.4.1rc1"