Merge branch 'main' into feat/ruff

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

@@ -583,6 +583,7 @@
         "strength": "Image to image strength",
         "Threshold": "Noise Threshold",
         "variations": "Seed-weight pairs",
+        "vae": "VAE", 
         "width": "Width",
         "workflow": "Workflow"
     },

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

@@ -1,9 +1,12 @@
-import { Box, ChakraProps } from '@chakra-ui/react';
+import { ChakraProps, Flex } from '@chakra-ui/react';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { RgbaColorPicker } from 'react-colorful';
 import { ColorPickerBaseProps, RgbaColor } from 'react-colorful/dist/types';
+import IAINumberInput from './IAINumberInput';
 
-type IAIColorPickerProps = ColorPickerBaseProps<RgbaColor>;
+type IAIColorPickerProps = ColorPickerBaseProps<RgbaColor> & {
+  withNumberInput?: boolean;
+};
 
 const colorPickerStyles: NonNullable<ChakraProps['sx']> = {
   width: 6,
@@ -11,17 +14,84 @@ const colorPickerStyles: NonNullable<ChakraProps['sx']> = {
   borderColor: 'base.100',
 };
 
-const sx = {
+const sx: ChakraProps['sx'] = {
   '.react-colorful__hue-pointer': colorPickerStyles,
   '.react-colorful__saturation-pointer': colorPickerStyles,
   '.react-colorful__alpha-pointer': colorPickerStyles,
+  gap: 2,
+  flexDir: 'column',
 };
 
+const numberInputWidth: ChakraProps['w'] = '4.2rem';
+
 const IAIColorPicker = (props: IAIColorPickerProps) => {
+  const { color, onChange, withNumberInput, ...rest } = props;
+  const handleChangeR = useCallback(
+    (r: number) => onChange({ ...color, r }),
+    [color, onChange]
+  );
+  const handleChangeG = useCallback(
+    (g: number) => onChange({ ...color, g }),
+    [color, onChange]
+  );
+  const handleChangeB = useCallback(
+    (b: number) => onChange({ ...color, b }),
+    [color, onChange]
+  );
+  const handleChangeA = useCallback(
+    (a: number) => onChange({ ...color, a }),
+    [color, onChange]
+  );
   return (
-    <Box sx={sx}>
+    <Flex sx={sx}>
-      <RgbaColorPicker {...props} />
+      <RgbaColorPicker
-    </Box>
+        color={color}
+        onChange={onChange}
+        style={{ width: '100%' }}
+        {...rest}
+      />
+      {withNumberInput && (
+        <Flex>
+          <IAINumberInput
+            value={color.r}
+            onChange={handleChangeR}
+            min={0}
+            max={255}
+            step={1}
+            label="Red"
+            w={numberInputWidth}
+          />
+          <IAINumberInput
+            value={color.g}
+            onChange={handleChangeG}
+            min={0}
+            max={255}
+            step={1}
+            label="Green"
+            w={numberInputWidth}
+          />
+          <IAINumberInput
+            value={color.b}
+            onChange={handleChangeB}
+            min={0}
+            max={255}
+            step={1}
+            label="Blue"
+            w={numberInputWidth}
+          />
+          <IAINumberInput
+            value={color.a}
+            onChange={handleChangeA}
+            step={0.1}
+            min={0}
+            max={1}
+            label="Alpha"
+            w={numberInputWidth}
+            isInteger={false}
+          />
+        </Flex>
+      )}
+    </Flex>
   );
 };
 

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

@@ -245,6 +245,7 @@ const IAICanvasToolChooserOptions = () => {
             }}
           >
             <IAIColorPicker
+              withNumberInput={true}
               color={brushColor}
               onChange={(newColor) => dispatch(setBrushColor(newColor))}
             />

invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx

@@ -31,6 +31,7 @@ const ImageMetadataActions = (props: Props) => {
     recallCfgScale,
     recallModel,
     recallScheduler,
+    recallVaeModel,
     recallSteps,
     recallWidth,
     recallHeight,
@@ -72,6 +73,10 @@ const ImageMetadataActions = (props: Props) => {
     recallScheduler(metadata?.scheduler);
   }, [metadata?.scheduler, recallScheduler]);
 
+  const handleRecallVaeModel = useCallback(() => {
+    recallVaeModel(metadata?.vae);
+  }, [metadata?.vae, recallVaeModel]);
+
   const handleRecallSteps = useCallback(() => {
     recallSteps(metadata?.steps);
   }, [metadata?.steps, recallSteps]);
@@ -219,6 +224,11 @@ const ImageMetadataActions = (props: Props) => {
           onClick={handleRecallScheduler}
         />
       )}
+      <ImageMetadataItem
+        label={t('metadata.vae')}
+        value={metadata.vae?.model_name ?? 'Default'}
+        onClick={handleRecallVaeModel}
+      />
       {metadata.steps && (
         <ImageMetadataItem
           label={t('metadata.steps')}

invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts

@@ -36,6 +36,7 @@ import {
   setRefinerStart,
   setRefinerSteps,
 } from 'features/sdxl/store/sdxlSlice';
+import { isNil } from 'lodash-es';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ImageDTO } from 'services/api/types';
@@ -65,8 +66,10 @@ import {
   setSeed,
   setSteps,
   setWidth,
+  vaeSelected,
 } from '../store/generationSlice';
 import {
+  isValidBoolean,
   isValidCfgScale,
   isValidControlNetModel,
   isValidHeight,
@@ -86,8 +89,8 @@ import {
   isValidSeed,
   isValidSteps,
   isValidStrength,
+  isValidVaeModel,
   isValidWidth,
-  isValidBoolean,
 } from '../types/parameterSchemas';
 
 const selector = createSelector(
@@ -306,6 +309,25 @@ export const useRecallParameters = () => {
     [dispatch, parameterSetToast, parameterNotSetToast]
   );
 
+  /**
+   * Recall vae model
+   */
+  const recallVaeModel = useCallback(
+    (vae: unknown) => {
+      if (!isValidVaeModel(vae) && !isNil(vae)) {
+        parameterNotSetToast();
+        return;
+      }
+      if (isNil(vae)) {
+        dispatch(vaeSelected(null));
+      } else {
+        dispatch(vaeSelected(vae));
+      }
+      parameterSetToast();
+    },
+    [dispatch, parameterSetToast, parameterNotSetToast]
+  );
+
   /**
    * Recall steps with toast
    */
@@ -757,6 +779,7 @@ export const useRecallParameters = () => {
         positive_prompt,
         negative_prompt,
         scheduler,
+        vae,
         seed,
         steps,
         width,
@@ -798,6 +821,13 @@ export const useRecallParameters = () => {
       if (isValidScheduler(scheduler)) {
         dispatch(setScheduler(scheduler));
       }
+      if (isValidVaeModel(vae) || isNil(vae)) {
+        if (isNil(vae)) {
+          dispatch(vaeSelected(null));
+        } else {
+          dispatch(vaeSelected(vae));
+        }
+      }
 
       if (isValidSeed(seed)) {
         dispatch(setSeed(seed));
@@ -932,6 +962,7 @@ export const useRecallParameters = () => {
     recallCfgScale,
     recallModel,
     recallScheduler,
+    recallVaeModel,
     recallSteps,
     recallWidth,
     recallHeight,