Merge branch 'main' into feat/ruff

This commit is contained in:
Millun Atluri 2023-11-13 10:32:23 +11:00 committed by GitHub
commit ab1ec3720a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 121 additions and 8 deletions

View File

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

View File

@ -1,9 +1,12 @@
import { Box, ChakraProps } from '@chakra-ui/react';
import { memo } from 'react';
import { ChakraProps, Flex } from '@chakra-ui/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}>
<RgbaColorPicker {...props} />
</Box>
<Flex sx={sx}>
<RgbaColorPicker
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>
);
};

View File

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

View File

@ -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')}

View File

@ -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,