Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): cleanup (#5084)

Browse Source 
## What type of PR is this? (check all applicable)

- [ ] Refactor
- [ ] Feature
- [ ] Bug Fix
- [x] Optimization
- [ ] Documentation Update
- [ ] Community Node Submission

## Description

Bit of a cleanup. 

[chore(ui): delete unused
files](5eaea9dd64)

[feat(ui): add eslint rule
react/jsx-no-bind](3a0ec635c9)

This rule enforces no arrow functions in component props. In practice,
it means all functions passed as component props must be wrapped in
`useCallback()`.

This is a performance optimization to prevent unnecessary rerenders.

The rule is added and all violations have been fixed, whew!

[chore(ui): move useCopyImageToClipboard to
common/hooks/](f2d26a3a3c)

[chore(ui): move MM components & store to
features/](bb52861896)

Somehow they had ended up in `features/ui/tabs` which isn't right

## QA Instructions, Screenshots, Recordings

UI should still work.

It builds successfully, and I tested things out - looks good to me.
This commit is contained in:
blessedcoolant 2023-11-13 13:22:41 +05:30 committed by GitHub
commit 7fcb8959fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
168 changed files with 944 additions and 3318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
invokeai/frontend/web/.eslintrc.js
View File

@ -24,6 +24,7 @@ module.exports = {
root: true,
rules: {
curly: 'error',
'react/jsx-no-bind': ['error', { allowBind: true }],
'react/jsx-curly-brace-presence': [
'error',
{ props: 'never', children: 'never' },

2
invokeai/frontend/web/src/app/store/store.ts
View File

@ -19,7 +19,7 @@ import sdxlReducer from 'features/sdxl/store/sdxlSlice';
import configReducer from 'features/system/store/configSlice';
import systemReducer from 'features/system/store/systemSlice';
import queueReducer from 'features/queue/store/queueSlice';
import modelmanagerReducer from 'features/ui/components/tabs/ModelManager/store/modelManagerSlice';
import modelmanagerReducer from 'features/modelManager/store/modelManagerSlice';
import hotkeysReducer from 'features/ui/store/hotkeysSlice';
import uiReducer from 'features/ui/store/uiSlice';
import dynamicMiddlewares from 'redux-dynamic-middlewares';

17
invokeai/frontend/web/src/common/components/IAIAlertDialog.tsx
View File

@ -8,7 +8,14 @@ import {
forwardRef,
useDisclosure,
} from '@chakra-ui/react';
import { cloneElement, memo, ReactElement, ReactNode, useRef } from 'react';
import {
cloneElement,
memo,
ReactElement,
ReactNode,
useCallback,
useRef,
} from 'react';
import { useTranslation } from 'react-i18next';
import IAIButton from './IAIButton';
@ -38,15 +45,15 @@ const IAIAlertDialog = forwardRef((props: Props, ref) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const cancelRef = useRef<HTMLButtonElement | null>(null);
const handleAccept = () => {
const handleAccept = useCallback(() => {
acceptCallback();
onClose();
};
}, [acceptCallback, onClose]);
const handleCancel = () => {
const handleCancel = useCallback(() => {
cancelCallback && cancelCallback();
onClose();
};
}, [cancelCallback, onClose]);
return (
<>

43
invokeai/frontend/web/src/common/components/IAIErrorLoadingImageFallback.tsx
View File

@ -1,43 +0,0 @@
import { Box, Flex, Icon } from '@chakra-ui/react';
import { memo } from 'react';
import { FaExclamation } from 'react-icons/fa';
const IAIErrorLoadingImageFallback = () => {
return (
<Box
sx={{
position: 'relative',
height: 'full',
width: 'full',
'::before': {
content: "''",
display: 'block',
pt: '100%',
},
}}
>
<Flex
sx={{
position: 'absolute',
top: 0,
insetInlineStart: 0,
height: 'full',
width: 'full',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 'base',
bg: 'base.100',
color: 'base.500',
_dark: {
color: 'base.700',
bg: 'base.850',
},
}}
>
<Icon as={FaExclamation} boxSize={16} opacity={0.7} />
</Flex>
</Box>
);
};
export default memo(IAIErrorLoadingImageFallback);

8
invokeai/frontend/web/src/common/components/IAIForm.tsx
View File

@ -1,8 +0,0 @@
import { chakra } from '@chakra-ui/react';
/**
* Chakra-enabled <form />
*/
const IAIForm = chakra.form;
export default IAIForm;

15
invokeai/frontend/web/src/common/components/IAIForms/IAIFormErrorMessage.tsx
View File

@ -1,15 +0,0 @@
import { FormErrorMessage, FormErrorMessageProps } from '@chakra-ui/react';
import { ReactNode } from 'react';
type IAIFormErrorMessageProps = FormErrorMessageProps & {
children: ReactNode | string;
};
export default function IAIFormErrorMessage(props: IAIFormErrorMessageProps) {
const { children, ...rest } = props;
return (
<FormErrorMessage color="error.400" {...rest}>
{children}
</FormErrorMessage>
);
}

15
invokeai/frontend/web/src/common/components/IAIForms/IAIFormHelperText.tsx
View File

@ -1,15 +0,0 @@
import { FormHelperText, FormHelperTextProps } from '@chakra-ui/react';
import { ReactNode } from 'react';
type IAIFormHelperTextProps = FormHelperTextProps & {
children: ReactNode | string;
};
export default function IAIFormHelperText(props: IAIFormHelperTextProps) {
const { children, ...rest } = props;
return (
<FormHelperText margin={0} color="base.400" {...rest}>
{children}
</FormHelperText>
);
}

25
invokeai/frontend/web/src/common/components/IAIForms/IAIFormItemWrapper.tsx
View File

@ -1,25 +0,0 @@
import { Flex, useColorMode } from '@chakra-ui/react';
import { ReactElement } from 'react';
import { mode } from 'theme/util/mode';
export function IAIFormItemWrapper({
children,
}: {
children: ReactElement | ReactElement[];
}) {
const { colorMode } = useColorMode();
return (
<Flex
sx={{
flexDirection: 'column',
padding: 4,
rowGap: 4,
borderRadius: 'base',
width: 'full',
bg: mode('base.100', 'base.900')(colorMode),
}}
>
{children}
</Flex>
);
}

25
invokeai/frontend/web/src/common/components/IAIFullCheckbox.tsx
View File

@ -1,25 +0,0 @@
import {
Checkbox,
CheckboxProps,
FormControl,
FormControlProps,
FormLabel,
} from '@chakra-ui/react';
import { memo, ReactNode } from 'react';
type IAIFullCheckboxProps = CheckboxProps & {
label: string | ReactNode;
formControlProps?: FormControlProps;
};
const IAIFullCheckbox = (props: IAIFullCheckboxProps) => {
const { label, formControlProps, ...rest } = props;
return (
<FormControl {...formControlProps}>
<FormLabel>{label}</FormLabel>
<Checkbox colorScheme="accent" {...rest} />
</FormControl>
);
};
export default memo(IAIFullCheckbox);

26
invokeai/frontend/web/src/common/components/IAIMantineInput.tsx
View File

@ -1,6 +1,7 @@
import { useColorMode } from '@chakra-ui/react';
import { TextInput, TextInputProps } from '@mantine/core';
import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
import { useCallback } from 'react';
import { mode } from 'theme/util/mode';
type IAIMantineTextInputProps = TextInputProps;
@ -20,9 +21,8 @@ export default function IAIMantineTextInput(props: IAIMantineTextInputProps) {
} = useChakraThemeTokens();
const { colorMode } = useColorMode();
return (
<TextInput
styles={() => ({
const stylesFunc = useCallback(
() => ({
input: {
color: mode(base900, base100)(colorMode),
backgroundColor: mode(base50, base900)(colorMode),
@ -35,11 +35,23 @@ export default function IAIMantineTextInput(props: IAIMantineTextInputProps) {
},
label: {
color: mode(base700, base300)(colorMode),
fontWeight: 'normal',
fontWeight: 'normal' as const,
marginBottom: 4,
},
})}
{...rest}
/>
}),
[
accent300,
accent500,
base100,
base200,
base300,
base50,
base700,
base800,
base900,
colorMode,
]
);
return <TextInput styles={stylesFunc} {...rest} />;
}

14
invokeai/frontend/web/src/common/components/IAINumberInput.tsx
View File

@ -98,20 +98,24 @@ const IAINumberInput = forwardRef((props: Props, ref) => {
}
}, [value, valueAsString]);
const handleOnChange = (v: string) => {
const handleOnChange = useCallback(
(v: string) => {
setValueAsString(v);
// This allows negatives and decimals e.g. '-123', `.5`, `-0.2`, etc.
if (!v.match(numberStringRegex)) {
// Cast the value to number. Floor it if it should be an integer.
onChange(isInteger ? Math.floor(Number(v)) : Number(v));
}
};
},
[isInteger, onChange]
);
/**
* Clicking the steppers allows the value to go outside bounds; we need to
* clamp it on blur and floor it if needed.
*/
const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
const handleBlur = useCallback(
(e: FocusEvent<HTMLInputElement>) => {
const clamped = clamp(
isInteger ? Math.floor(Number(e.target.value)) : Number(e.target.value),
min,
@ -119,7 +123,9 @@ const IAINumberInput = forwardRef((props: Props, ref) => {
);
setValueAsString(String(clamped));
onChange(clamped);
};
},
[isInteger, max, min, onChange]
);
const handleKeyDown = useCallback(
(e: KeyboardEvent<HTMLInputElement>) => {

13
invokeai/frontend/web/src/common/components/IAISelect.tsx
View File

@ -6,7 +6,7 @@ import {
Tooltip,
TooltipProps,
} from '@chakra-ui/react';
import { memo, MouseEvent } from 'react';
import { memo, MouseEvent, useCallback } from 'react';
import IAIOption from './IAIOption';
type IAISelectProps = SelectProps & {
@ -33,15 +33,16 @@ const IAISelect = (props: IAISelectProps) => {
spaceEvenly,
...rest
} = props;
return (
<FormControl
isDisabled={isDisabled}
onClick={(e: MouseEvent<HTMLDivElement>) => {
const handleClick = useCallback((e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
e.nativeEvent.stopPropagation();
e.nativeEvent.cancelBubble = true;
}}
}, []);
return (
<FormControl
isDisabled={isDisabled}
onClick={handleClick}
sx={
horizontal
? {

19
invokeai/frontend/web/src/common/components/IAISlider.tsx
View File

@ -186,6 +186,13 @@ const IAISlider = forwardRef((props: IAIFullSliderProps, ref) => {
[dispatch]
);
const handleMouseEnter = useCallback(() => setShowTooltip(true), []);
const handleMouseLeave = useCallback(() => setShowTooltip(false), []);
const handleStepperClick = useCallback(
() => onChange(Number(localInputValue)),
[localInputValue, onChange]
);
return (
<FormControl
ref={ref}
@ -219,8 +226,8 @@ const IAISlider = forwardRef((props: IAIFullSliderProps, ref) => {
max={max}
step={step}
onChange={handleSliderChange}
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
focusThumbOnChange={false}
isDisabled={isDisabled}
{...rest}
@ -332,12 +339,8 @@ const IAISlider = forwardRef((props: IAIFullSliderProps, ref) => {
{...sliderNumberInputFieldProps}
/>
<NumberInputStepper {...sliderNumberInputStepperProps}>
<NumberIncrementStepper
onClick={() => onChange(Number(localInputValue))}
/>
<NumberDecrementStepper
onClick={() => onChange(Number(localInputValue))}
/>
<NumberIncrementStepper onClick={handleStepperClick} />
<NumberDecrementStepper onClick={handleStepperClick} />
</NumberInputStepper>
</NumberInput>
)}

11
invokeai/frontend/web/src/common/components/ImageUploader.tsx
View File

@ -146,16 +146,15 @@ const ImageUploader = (props: ImageUploaderProps) => {
};
}, [inputRef]);
return (
<Box
{...getRootProps({ style: {} })}
onKeyDown={(e: KeyboardEvent) => {
const handleKeyDown = useCallback((e: KeyboardEvent) => {
// Bail out if user hits spacebar - do not open the uploader
if (e.key === ' ') {
return;
}
}}
>
}, []);
return (
<Box {...getRootProps({ style: {} })} onKeyDown={handleKeyDown}>
<input {...getInputProps()} />
{children}
<AnimatePresence>

23
invokeai/frontend/web/src/common/components/SelectImagePlaceholder.tsx
View File

@ -1,23 +0,0 @@
import { Flex, Icon } from '@chakra-ui/react';
import { memo } from 'react';
import { FaImage } from 'react-icons/fa';
const SelectImagePlaceholder = () => {
return (
<Flex
sx={{
w: 'full',
h: 'full',
// bg: 'base.800',
borderRadius: 'base',
alignItems: 'center',
justifyContent: 'center',
aspectRatio: '1/1',
}}
>
<Icon color="base.400" boxSize={32} as={FaImage}></Icon>
</Flex>
);
};
export default memo(SelectImagePlaceholder);

0
invokeai/frontend/web/src/features/ui/hooks/useCopyImageToClipboard.ts → invokeai/frontend/web/src/common/hooks/useCopyImageToClipboard.ts
View File

24
invokeai/frontend/web/src/common/hooks/useResolution.ts
View File

@ -1,24 +0,0 @@
import { useBreakpoint } from '@chakra-ui/react';
export default function useResolution():
| 'mobile'
| 'tablet'
| 'desktop'
| 'unknown' {
const breakpointValue = useBreakpoint();
const mobileResolutions = ['base', 'sm'];
const tabletResolutions = ['md', 'lg'];
const desktopResolutions = ['xl', '2xl'];
if (mobileResolutions.includes(breakpointValue)) {
return 'mobile';
}
if (tabletResolutions.includes(breakpointValue)) {
return 'tablet';
}
if (desktopResolutions.includes(breakpointValue)) {
return 'desktop';
}
return 'unknown';
}

7
invokeai/frontend/web/src/common/util/getTimestamp.ts
View File

@ -1,7 +0,0 @@
import dateFormat from 'dateformat';
/**
* Get a `now` timestamp with 1s precision, formatted as ISO datetime.
*/
export const getTimestamp = () =>
dateFormat(new Date(), `yyyy-mm-dd'T'HH:MM:ss:lo`);

71
invokeai/frontend/web/src/common/util/seedWeightPairs.ts
View File

@ -1,71 +0,0 @@
// TODO: Restore variations
// Support code from v2.3 in here.
// export const stringToSeedWeights = (
// string: string
// ): InvokeAI.SeedWeights | boolean => {
// const stringPairs = string.split(',');
// const arrPairs = stringPairs.map((p) => p.split(':'));
// const pairs = arrPairs.map((p: Array<string>): InvokeAI.SeedWeightPair => {
// return { seed: Number(p[0]), weight: Number(p[1]) };
// });
// if (!validateSeedWeights(pairs)) {
// return false;
// }
// return pairs;
// };
// export const validateSeedWeights = (
// seedWeights: InvokeAI.SeedWeights | string
// ): boolean => {
// return typeof seedWeights === 'string'
// ? Boolean(stringToSeedWeights(seedWeights))
// : Boolean(
// seedWeights.length &&
// !seedWeights.some((pair: InvokeAI.SeedWeightPair) => {
// const { seed, weight } = pair;
// const isSeedValid = !isNaN(parseInt(seed.toString(), 10));
// const isWeightValid =
// !isNaN(parseInt(weight.toString(), 10)) &&
// weight >= 0 &&
// weight <= 1;
// return !(isSeedValid && isWeightValid);
// })
// );
// };
// export const seedWeightsToString = (
// seedWeights: InvokeAI.SeedWeights
// ): string => {
// return seedWeights.reduce((acc, pair, i, arr) => {
// const { seed, weight } = pair;
// acc += `${seed}:${weight}`;
// if (i !== arr.length - 1) {
// acc += ',';
// }
// return acc;
// }, '');
// };
// export const seedWeightsToArray = (
// seedWeights: InvokeAI.SeedWeights
// ): Array<Array<number>> => {
// return seedWeights.map((pair: InvokeAI.SeedWeightPair) => [
// pair.seed,
// pair.weight,
// ]);
// };
// export const stringToSeedWeightsArray = (
// string: string
// ): Array<Array<number>> => {
// const stringPairs = string.split(',');
// const arrPairs = stringPairs.map((p) => p.split(':'));
// return arrPairs.map(
// (p: Array<string>): Array<number> => [parseInt(p[0], 10), parseFloat(p[1])]
// );
// };
export default {};

9
invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
View File

@ -5,17 +5,22 @@ import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';
import { useTranslation } from 'react-i18next';
import { FaTrash } from 'react-icons/fa';
import { isStagingSelector } from '../store/canvasSelectors';
import { memo } from 'react';
import { memo, useCallback } from 'react';
const ClearCanvasHistoryButtonModal = () => {
const isStaging = useAppSelector(isStagingSelector);
const dispatch = useAppDispatch();
const { t } = useTranslation();
const acceptCallback = useCallback(
() => dispatch(clearCanvasHistory()),
[dispatch]
);
return (
<IAIAlertDialog
title={t('unifiedCanvas.clearCanvasHistory')}
acceptCallback={() => dispatch(clearCanvasHistory())}
acceptCallback={acceptCallback}
acceptButtonText={t('unifiedCanvas.clearHistory')}
triggerComponent={
<IAIButton size="sm" leftIcon={<FaTrash />} isDisabled={isStaging}>

41
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
View File

@ -20,7 +20,8 @@ import {
} from 'features/canvas/store/canvasSlice';
import { rgbaColorToString } from 'features/canvas/util/colorToString';
import { isEqual } from 'lodash-es';
import { memo } from 'react';
import { ChangeEvent, memo, useCallback } from 'react';
import { RgbaColor } from 'react-colorful';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
@ -95,18 +96,35 @@ const IAICanvasMaskOptions = () => {
[isMaskEnabled]
);
const handleToggleMaskLayer = () => {
const handleToggleMaskLayer = useCallback(() => {
dispatch(setLayer(layer === 'mask' ? 'base' : 'mask'));
};
}, [dispatch, layer]);
const handleClearMask = () => dispatch(clearMask());
const handleClearMask = useCallback(() => {
dispatch(clearMask());
}, [dispatch]);
const handleToggleEnableMask = () =>
const handleToggleEnableMask = useCallback(() => {
dispatch(setIsMaskEnabled(!isMaskEnabled));
}, [dispatch, isMaskEnabled]);
const handleSaveMask = async () => {
const handleSaveMask = useCallback(async () => {
dispatch(canvasMaskSavedToGallery());
};
}, [dispatch]);
const handleChangePreserveMaskedArea = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
dispatch(setShouldPreserveMaskedArea(e.target.checked));
},
[dispatch]
);
const handleChangeMaskColor = useCallback(
(newColor: RgbaColor) => {
dispatch(setMaskColor(newColor));
},
[dispatch]
);
return (
<IAIPopover
@ -131,15 +149,10 @@ const IAICanvasMaskOptions = () => {
<IAISimpleCheckbox
label={t('unifiedCanvas.preserveMaskedArea')}
isChecked={shouldPreserveMaskedArea}
onChange={(e) =>
dispatch(setShouldPreserveMaskedArea(e.target.checked))
}
onChange={handleChangePreserveMaskedArea}
/>
<Box sx={{ paddingTop: 2, paddingBottom: 2 }}>
<IAIColorPicker
color={maskColor}
onChange={(newColor) => dispatch(setMaskColor(newColor))}
/>
<IAIColorPicker color={maskColor} onChange={handleChangeMaskColor} />
</Box>
<IAIButton size="sm" leftIcon={<FaSave />} onClick={handleSaveMask}>
Save Mask

5
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx
View File

@ -10,6 +10,7 @@ import { redo } from 'features/canvas/store/canvasSlice';
import { stateSelector } from 'app/store/store';
import { isEqual } from 'lodash-es';
import { useTranslation } from 'react-i18next';
import { useCallback } from 'react';
const canvasRedoSelector = createSelector(
[stateSelector, activeTabNameSelector],
@ -34,9 +35,9 @@ export default function IAICanvasRedoButton() {
const { t } = useTranslation();
const handleRedo = () => {
const handleRedo = useCallback(() => {
dispatch(redo());
};
}, [dispatch]);
useHotkeys(
['meta+shift+z', 'ctrl+shift+z', 'control+y', 'meta+y'],

76
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
View File

@ -18,7 +18,7 @@ import {
} from 'features/canvas/store/canvasSlice';
import { isEqual } from 'lodash-es';
import { ChangeEvent, memo } from 'react';
import { ChangeEvent, memo, useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import { FaWrench } from 'react-icons/fa';
@ -86,8 +86,52 @@ const IAICanvasSettingsButtonPopover = () => {
[shouldSnapToGrid]
);
const handleChangeShouldSnapToGrid = (e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldSnapToGrid(e.target.checked));
const handleChangeShouldSnapToGrid = useCallback(
(e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldSnapToGrid(e.target.checked)),
[dispatch]
);
const handleChangeShouldShowIntermediates = useCallback(
(e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldShowIntermediates(e.target.checked)),
[dispatch]
);
const handleChangeShouldShowGrid = useCallback(
(e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldShowGrid(e.target.checked)),
[dispatch]
);
const handleChangeShouldDarkenOutsideBoundingBox = useCallback(
(e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldDarkenOutsideBoundingBox(e.target.checked)),
[dispatch]
);
const handleChangeShouldAutoSave = useCallback(
(e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldAutoSave(e.target.checked)),
[dispatch]
);
const handleChangeShouldCropToBoundingBoxOnSave = useCallback(
(e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked)),
[dispatch]
);
const handleChangeShouldRestrictStrokesToBox = useCallback(
(e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldRestrictStrokesToBox(e.target.checked)),
[dispatch]
);
const handleChangeShouldShowCanvasDebugInfo = useCallback(
(e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldShowCanvasDebugInfo(e.target.checked)),
[dispatch]
);
const handleChangeShouldAntialias = useCallback(
(e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldAntialias(e.target.checked)),
[dispatch]
);
return (
<IAIPopover
@ -104,14 +148,12 @@ const IAICanvasSettingsButtonPopover = () => {
<IAISimpleCheckbox
label={t('unifiedCanvas.showIntermediates')}
isChecked={shouldShowIntermediates}
onChange={(e) =>
dispatch(setShouldShowIntermediates(e.target.checked))
}
onChange={handleChangeShouldShowIntermediates}
/>
<IAISimpleCheckbox
label={t('unifiedCanvas.showGrid')}
isChecked={shouldShowGrid}
onChange={(e) => dispatch(setShouldShowGrid(e.target.checked))}
onChange={handleChangeShouldShowGrid}
/>
<IAISimpleCheckbox
label={t('unifiedCanvas.snapToGrid')}
@ -121,41 +163,33 @@ const IAICanvasSettingsButtonPopover = () => {
<IAISimpleCheckbox
label={t('unifiedCanvas.darkenOutsideSelection')}
isChecked={shouldDarkenOutsideBoundingBox}
onChange={(e) =>
dispatch(setShouldDarkenOutsideBoundingBox(e.target.checked))
}
onChange={handleChangeShouldDarkenOutsideBoundingBox}
/>
<IAISimpleCheckbox
label={t('unifiedCanvas.autoSaveToGallery')}
isChecked={shouldAutoSave}
onChange={(e) => dispatch(setShouldAutoSave(e.target.checked))}
onChange={handleChangeShouldAutoSave}
/>
<IAISimpleCheckbox
label={t('unifiedCanvas.saveBoxRegionOnly')}
isChecked={shouldCropToBoundingBoxOnSave}
onChange={(e) =>
dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked))
}
onChange={handleChangeShouldCropToBoundingBoxOnSave}
/>
<IAISimpleCheckbox
label={t('unifiedCanvas.limitStrokesToBox')}
isChecked={shouldRestrictStrokesToBox}
onChange={(e) =>
dispatch(setShouldRestrictStrokesToBox(e.target.checked))
}
onChange={handleChangeShouldRestrictStrokesToBox}
/>
<IAISimpleCheckbox
label={t('unifiedCanvas.showCanvasDebugInfo')}
isChecked={shouldShowCanvasDebugInfo}
onChange={(e) =>
dispatch(setShouldShowCanvasDebugInfo(e.target.checked))
}
onChange={handleChangeShouldShowCanvasDebugInfo}
/>
<IAISimpleCheckbox
label={t('unifiedCanvas.antialiasing')}
isChecked={shouldAntialias}
onChange={(e) => dispatch(setShouldAntialias(e.target.checked))}
onChange={handleChangeShouldAntialias}
/>
<ClearCanvasHistoryButtonModal />
</Flex>

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

@ -15,7 +15,8 @@ import {
setTool,
} from 'features/canvas/store/canvasSlice';
import { clamp, isEqual } from 'lodash-es';
import { memo } from 'react';
import { memo, useCallback } from 'react';
import { RgbaColor } from 'react-colorful';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
@ -172,11 +173,33 @@ const IAICanvasToolChooserOptions = () => {
[brushColor]
);
const handleSelectBrushTool = () => dispatch(setTool('brush'));
const handleSelectEraserTool = () => dispatch(setTool('eraser'));
const handleSelectColorPickerTool = () => dispatch(setTool('colorPicker'));
const handleFillRect = () => dispatch(addFillRect());
const handleEraseBoundingBox = () => dispatch(addEraseRect());
const handleSelectBrushTool = useCallback(() => {
dispatch(setTool('brush'));
}, [dispatch]);
const handleSelectEraserTool = useCallback(() => {
dispatch(setTool('eraser'));
}, [dispatch]);
const handleSelectColorPickerTool = useCallback(() => {
dispatch(setTool('colorPicker'));
}, [dispatch]);
const handleFillRect = useCallback(() => {
dispatch(addFillRect());
}, [dispatch]);
const handleEraseBoundingBox = useCallback(() => {
dispatch(addEraseRect());
}, [dispatch]);
const handleChangeBrushSize = useCallback(
(newSize: number) => {
dispatch(setBrushSize(newSize));
},
[dispatch]
);
const handleChangeBrushColor = useCallback(
(newColor: RgbaColor) => {
dispatch(setBrushColor(newColor));
},
[dispatch]
);
return (
<ButtonGroup isAttached>
@ -233,7 +256,7 @@ const IAICanvasToolChooserOptions = () => {
label={t('unifiedCanvas.brushSize')}
value={brushSize}
withInput
onChange={(newSize) => dispatch(setBrushSize(newSize))}
onChange={handleChangeBrushSize}
sliderNumberInputProps={{ max: 500 }}
/>
</Flex>
@ -247,7 +270,7 @@ const IAICanvasToolChooserOptions = () => {
<IAIColorPicker
withNumberInput={true}
color={brushColor}
onChange={(newColor) => dispatch(setBrushColor(newColor))}
onChange={handleChangeBrushColor}
/>
</Box>
</Flex>

35
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
View File

@ -25,9 +25,9 @@ import {
LAYER_NAMES_DICT,
} from 'features/canvas/store/canvasTypes';
import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
import { useCopyImageToClipboard } from 'features/ui/hooks/useCopyImageToClipboard';
import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
import { isEqual } from 'lodash-es';
import { memo } from 'react';
import { memo, useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import {
@ -151,7 +151,9 @@ const IAICanvasToolbar = () => {
[canvasBaseLayer]
);
const handleSelectMoveTool = () => dispatch(setTool('move'));
const handleSelectMoveTool = useCallback(() => {
dispatch(setTool('move'));
}, [dispatch]);
const handleClickResetCanvasView = useSingleAndDoubleClick(
() => handleResetCanvasView(false),
@ -174,36 +176,39 @@ const IAICanvasToolbar = () => {
);
};
const handleResetCanvas = () => {
const handleResetCanvas = useCallback(() => {
dispatch(resetCanvas());
};
}, [dispatch]);
const handleMergeVisible = () => {
const handleMergeVisible = useCallback(() => {
dispatch(canvasMerged());
};
}, [dispatch]);
const handleSaveToGallery = () => {
const handleSaveToGallery = useCallback(() => {
dispatch(canvasSavedToGallery());
};
}, [dispatch]);
const handleCopyImageToClipboard = () => {
const handleCopyImageToClipboard = useCallback(() => {
if (!isClipboardAPIAvailable) {
return;
}
dispatch(canvasCopiedToClipboard());
};
}, [dispatch, isClipboardAPIAvailable]);
const handleDownloadAsImage = () => {
const handleDownloadAsImage = useCallback(() => {
dispatch(canvasDownloadedAsImage());
};
}, [dispatch]);
const handleChangeLayer = (v: string) => {
const handleChangeLayer = useCallback(
(v: string) => {
const newLayer = v as CanvasLayer;
dispatch(setLayer(newLayer));
if (newLayer === 'mask' && !isMaskEnabled) {
dispatch(setIsMaskEnabled(true));
}
};
},
[dispatch, isMaskEnabled]
);
return (
<Flex

5
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx
View File

@ -10,6 +10,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash-es';
import { useTranslation } from 'react-i18next';
import { stateSelector } from 'app/store/store';
import { useCallback } from 'react';
const canvasUndoSelector = createSelector(
[stateSelector, activeTabNameSelector],
@ -35,9 +36,9 @@ export default function IAICanvasUndoButton() {
const { canUndo, activeTabName } = useAppSelector(canvasUndoSelector);
const handleUndo = () => {
const handleUndo = useCallback(() => {
dispatch(undo());
};
}, [dispatch]);
useHotkeys(
['meta+z', 'ctrl+z'],

16
invokeai/frontend/web/src/features/canvas/util/konvaNodeToDataURL.ts
View File

@ -1,16 +0,0 @@
import Konva from 'konva';
import { IRect } from 'konva/lib/types';
/**
* Converts a Konva node to a dataURL
* @param node - The Konva node to convert to a dataURL
* @param boundingBox - The bounding box to crop to
* @returns A dataURL of the node cropped to the bounding box
*/
export const konvaNodeToDataURL = (
node: Konva.Node,
boundingBox: IRect
): string => {
// get a dataURL of the bbox'd region
return node.toDataURL(boundingBox);
};

7
invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx
View File

@ -87,6 +87,11 @@ const ChangeBoardModal = () => {
selectedBoard,
]);
const handleSetSelectedBoard = useCallback(
(v: string | null) => setSelectedBoard(v),
[]
);
const cancelRef = useRef<HTMLButtonElement>(null);
return (
@ -113,7 +118,7 @@ const ChangeBoardModal = () => {
isFetching ? t('boards.loading') : t('boards.selectBoard')
}
disabled={isFetching}
onChange={(v) => setSelectedBoard(v)}
onChange={handleSetSelectedBoard}
value={selectedBoard}
data={data}
/>

36
invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterPreprocessButton.tsx
View File

@ -1,36 +0,0 @@
import { useAppDispatch } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton';
import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
import { memo, useCallback } from 'react';
import { useControlAdapterControlImage } from '../hooks/useControlAdapterControlImage';
import { controlAdapterImageProcessed } from '../store/actions';
type Props = {
id: string;
};
const ControlAdapterPreprocessButton = ({ id }: Props) => {
const controlImage = useControlAdapterControlImage(id);
const dispatch = useAppDispatch();
const isReady = useIsReadyToEnqueue();
const handleProcess = useCallback(() => {
dispatch(
controlAdapterImageProcessed({
id,
})
);
}, [id, dispatch]);
return (
<IAIButton
size="sm"
onClick={handleProcess}
isDisabled={Boolean(!controlImage) || !isReady}
>
Preprocess
</IAIButton>
);
};
export default memo(ControlAdapterPreprocessButton);

1
invokeai/frontend/web/src/features/dynamicPrompts/store/selectors.ts
View File

@ -1 +0,0 @@
//

16
invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx
View File

@ -14,9 +14,9 @@ import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectI
import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { forEach } from 'lodash-es';
import { PropsWithChildren, memo, useCallback, useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useGetTextualInversionModelsQuery } from 'services/api/endpoints/models';
import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
import { useTranslation } from 'react-i18next';
type Props = PropsWithChildren & {
onSelect: (v: string) => void;
@ -78,6 +78,13 @@ const ParamEmbeddingPopover = (props: Props) => {
[onSelect]
);
const filterFunc = useCallback(
(value: string, item: SelectItem) =>
item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
item.value.toLowerCase().includes(value.toLowerCase().trim()),
[]
);
return (
<Popover
initialFocusRef={inputRef}
@ -127,12 +134,7 @@ const ParamEmbeddingPopover = (props: Props) => {
itemComponent={IAIMantineSelectItemWithTooltip}
disabled={data.length === 0}
onDropdownClose={onClose}
filter={(value, item: SelectItem) =>
item.label
?.toLowerCase()
.includes(value.toLowerCase().trim()) ||
item.value.toLowerCase().includes(value.toLowerCase().trim())
}
filter={filterFunc}
onChange={handleChange}
/>
)}

0
invokeai/frontend/web/src/features/embedding/store/embeddingSlice.ts
View File

12
invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx
View File

@ -60,6 +60,13 @@ const BoardAutoAddSelect = () => {
[dispatch]
);
const filterFunc = useCallback(
(value: string, item: SelectItem) =>
item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
item.value.toLowerCase().includes(value.toLowerCase().trim()),
[]
);
return (
<IAIMantineSearchableSelect
label={t('boards.autoAddBoard')}
@ -71,10 +78,7 @@ const BoardAutoAddSelect = () => {
nothingFound={t('boards.noMatching')}
itemComponent={IAIMantineSelectItemWithTooltip}
disabled={!hasBoards || autoAssignBoardOnClick}
filter={(value, item: SelectItem) =>
item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
item.value.toLowerCase().includes(value.toLowerCase().trim())
}
filter={filterFunc}
onChange={handleChange}
/>
);

39
invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
View File

@ -90,14 +90,8 @@ const BoardContextMenu = ({
e.preventDefault();
}, []);
return (
<IAIContextMenu<HTMLDivElement>
menuProps={{ size: 'sm', isLazy: true }}
menuButtonProps={{
bg: 'transparent',
_hover: { bg: 'transparent' },
}}
renderMenu={() => (
const renderMenuFunc = useCallback(
() => (
<MenuList
sx={{ visibility: 'visible !important' }}
motionProps={menuListMotionProps}
@ -112,10 +106,7 @@ const BoardContextMenu = ({
{t('boards.menuItemAutoAdd')}
</MenuItem>
{isBulkDownloadEnabled && (
<MenuItem
icon={<FaDownload />}
onClickCapture={handleBulkDownload}
>
<MenuItem icon={<FaDownload />} onClickCapture={handleBulkDownload}>
{t('boards.downloadBoard')}
</MenuItem>
)}
@ -128,7 +119,29 @@ const BoardContextMenu = ({
)}
</MenuGroup>
</MenuList>
)}
),
[
autoAssignBoardOnClick,
board,
boardName,
handleBulkDownload,
handleSetAutoAdd,
isAutoAdd,
isBulkDownloadEnabled,
setBoardToDelete,
skipEvent,
t,
]
);
return (
<IAIContextMenu<HTMLDivElement>
menuProps={{ size: 'sm', isLazy: true }}
menuButtonProps={{
bg: 'transparent',
_hover: { bg: 'transparent' },
}}
renderMenu={renderMenuFunc}
>
{children}
</IAIContextMenu>

108
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GenericBoard.tsx
View File

@ -1,108 +0,0 @@
import { As, Badge, Flex } from '@chakra-ui/react';
import IAIDroppable from 'common/components/IAIDroppable';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import { TypesafeDroppableData } from 'features/dnd/types';
import { BoardId } from 'features/gallery/store/types';
import { ReactNode, memo } from 'react';
import BoardContextMenu from '../BoardContextMenu';
type GenericBoardProps = {
board_id: BoardId;
droppableData?: TypesafeDroppableData;
onClick: () => void;
isSelected: boolean;
icon: As;
label: string;
dropLabel?: ReactNode;
badgeCount?: number;
};
export const formatBadgeCount = (count: number) =>
Intl.NumberFormat('en-US', {
notation: 'compact',
maximumFractionDigits: 1,
}).format(count);
const GenericBoard = (props: GenericBoardProps) => {
const {
board_id,
droppableData,
onClick,
isSelected,
icon,
label,
badgeCount,
dropLabel,
} = props;
return (
<BoardContextMenu board_id={board_id}>
{(ref) => (
<Flex
ref={ref}
sx={{
flexDir: 'column',
justifyContent: 'space-between',
alignItems: 'center',
cursor: 'pointer',
w: 'full',
h: 'full',
borderRadius: 'base',
}}
>
<Flex
onClick={onClick}
sx={{
position: 'relative',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 'base',
w: 'full',
aspectRatio: '1/1',
overflow: 'hidden',
shadow: isSelected ? 'selected.light' : undefined,
_dark: { shadow: isSelected ? 'selected.dark' : undefined },
flexShrink: 0,
}}
>
<IAINoContentFallback
boxSize={8}
icon={icon}
sx={{
border: '2px solid var(--invokeai-colors-base-200)',
_dark: { border: '2px solid var(--invokeai-colors-base-800)' },
}}
/>
<Flex
sx={{
position: 'absolute',
insetInlineEnd: 0,
top: 0,
p: 1,
}}
>
{badgeCount !== undefined && (
<Badge variant="solid">{formatBadgeCount(badgeCount)}</Badge>
)}
</Flex>
<IAIDroppable data={droppableData} dropLabel={dropLabel} />
</Flex>
<Flex
sx={{
h: 'full',
alignItems: 'center',
fontWeight: isSelected ? 600 : undefined,
fontSize: 'sm',
color: isSelected ? 'base.900' : 'base.700',
_dark: { color: isSelected ? 'base.50' : 'base.200' },
}}
>
{label}
</Flex>
</Flex>
)}
</BoardContextMenu>
);
};
export default memo(GenericBoard);

53
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/SystemBoardButton.tsx
View File

@ -1,53 +0,0 @@
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIButton from 'common/components/IAIButton';
import { boardIdSelected } from 'features/gallery/store/gallerySlice';
import { memo, useCallback, useMemo } from 'react';
import { useBoardName } from 'services/api/hooks/useBoardName';
type Props = {
board_id: 'images' | 'assets' | 'no_board';
};
const SystemBoardButton = ({ board_id }: Props) => {
const dispatch = useAppDispatch();
const selector = useMemo(
() =>
createSelector(
[stateSelector],
({ gallery }) => {
const { selectedBoardId } = gallery;
return { isSelected: selectedBoardId === board_id };
},
defaultSelectorOptions
),
[board_id]
);
const { isSelected } = useAppSelector(selector);
const boardName = useBoardName(board_id);
const handleClick = useCallback(() => {
dispatch(boardIdSelected({ boardId: board_id }));
}, [board_id, dispatch]);
return (
<IAIButton
onClick={handleClick}
size="sm"
isChecked={isSelected}
sx={{
flexGrow: 1,
borderRadius: 'base',
}}
>
{boardName}
</IAIButton>
);
};
export default memo(SystemBoardButton);

22
invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageHidden.tsx
View File

@ -1,22 +0,0 @@
import { Flex } from '@chakra-ui/react';
import { memo } from 'react';
import { FaEyeSlash } from 'react-icons/fa';
const CurrentImageHidden = () => {
return (
<Flex
sx={{
w: 'full',
h: 'full',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
color: 'base.400',
}}
>
<FaEyeSlash fontSize="25vh" />
</Flex>
);
};
export default memo(CurrentImageHidden);

10
invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
View File

@ -61,6 +61,12 @@ const GallerySettingsPopover = () => {
[dispatch]
);
const handleChangeAutoAssignBoardOnClick = useCallback(
(e: ChangeEvent<HTMLInputElement>) =>
dispatch(autoAssignBoardOnClickChanged(e.target.checked)),
[dispatch]
);
return (
<IAIPopover
triggerComponent={
@ -91,9 +97,7 @@ const GallerySettingsPopover = () => {
<IAISimpleCheckbox
label={t('gallery.autoAssignBoardOnClick')}
isChecked={autoAssignBoardOnClick}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
dispatch(autoAssignBoardOnClickChanged(e.target.checked))
}
onChange={handleChangeAutoAssignBoardOnClick}
/>
<BoardAutoAddSelect />
</Flex>

18
invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx
View File

@ -35,14 +35,7 @@ const ImageContextMenu = ({ imageDTO, children }: Props) => {
e.preventDefault();
}, []);
return (
<IAIContextMenu<HTMLDivElement>
menuProps={{ size: 'sm', isLazy: true }}
menuButtonProps={{
bg: 'transparent',
_hover: { bg: 'transparent' },
}}
renderMenu={() => {
const renderMenuFunc = useCallback(() => {
if (!imageDTO) {
return null;
}
@ -68,7 +61,16 @@ const ImageContextMenu = ({ imageDTO, children }: Props) => {
<SingleSelectionMenuItems imageDTO={imageDTO} />
</MenuList>
);
}, [imageDTO, selectionCount, skipEvent]);
return (
<IAIContextMenu<HTMLDivElement>
menuProps={{ size: 'sm', isLazy: true }}
menuButtonProps={{
bg: 'transparent',
_hover: { bg: 'transparent' },
}}
renderMenu={renderMenuFunc}
>
{children}
</IAIContextMenu>

2
invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
View File

@ -13,7 +13,7 @@ import { workflowLoadRequested } from 'features/nodes/store/actions';
import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
import { initialImageSelected } from 'features/parameters/store/actions';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { useCopyImageToClipboard } from 'features/ui/hooks/useCopyImageToClipboard';
import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
import { setActiveTab } from 'features/ui/store/uiSlice';
import { memo, useCallback } from 'react';
import { flushSync } from 'react-dom';

27
invokeai/frontend/web/src/features/gallery/components/ImageFallbackSpinner.tsx
View File

@ -1,27 +0,0 @@
import { Flex, Spinner, SpinnerProps } from '@chakra-ui/react';
import { memo } from 'react';
type ImageFallbackSpinnerProps = SpinnerProps;
const ImageFallbackSpinner = (props: ImageFallbackSpinnerProps) => {
const { size = 'xl', ...rest } = props;
return (
<Flex
sx={{
w: 'full',
h: 'full',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
color: 'base.400',
minH: 36,
minW: 36,
}}
>
<Spinner size={size} {...rest} />
</Flex>
);
};
export default memo(ImageFallbackSpinner);

12
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
View File

@ -20,6 +20,7 @@ import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
import GalleryImage from './GalleryImage';
import ImageGridItemContainer from './ImageGridItemContainer';
import ImageGridListContainer from './ImageGridListContainer';
import { EntityId } from '@reduxjs/toolkit';
const overlayScrollbarsConfig: UseOverlayScrollbarsParams = {
defer: true,
@ -71,6 +72,13 @@ const GalleryImageGrid = () => {
});
}, [areMoreAvailable, listImages, queryArgs, currentData?.ids.length]);
const itemContentFunc = useCallback(
(index: number, imageName: EntityId) => (
<GalleryImage key={imageName} imageName={imageName as string} />
),
[]
);
useEffect(() => {
// Initialize the gallery's custom scrollbar
const { current: root } = rootRef;
@ -131,9 +139,7 @@ const GalleryImageGrid = () => {
List: ImageGridListContainer,
}}
scrollerRef={setScroller}
itemContent={(index, imageName) => (
<GalleryImage key={imageName} imageName={imageName as string} />
)}
itemContent={itemContentFunc}
/>
</Box>
<IAIButton

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

@ -279,7 +279,7 @@ const ImageMetadataActions = (props: Props) => {
key={index}
label="LoRA"
value={`${lora.lora.model_name} - ${lora.weight}`}
onClick={() => handleRecallLoRA(lora)}
onClick={handleRecallLoRA.bind(null, lora)}
/>
);
}
@ -289,7 +289,7 @@ const ImageMetadataActions = (props: Props) => {
key={index}
label="ControlNet"
value={`${controlnet.control_model?.model_name} - ${controlnet.control_weight}`}
onClick={() => handleRecallControlNet(controlnet)}
onClick={handleRecallControlNet.bind(null, controlnet)}
/>
))}
{validIPAdapters.map((ipAdapter, index) => (
@ -297,7 +297,7 @@ const ImageMetadataActions = (props: Props) => {
key={index}
label="IP Adapter"
value={`${ipAdapter.ip_adapter_model?.model_name} - ${ipAdapter.weight}`}
onClick={() => handleRecallIPAdapter(ipAdapter)}
onClick={handleRecallIPAdapter.bind(null, ipAdapter)}
/>
))}
{validT2IAdapters.map((t2iAdapter, index) => (
@ -305,7 +305,7 @@ const ImageMetadataActions = (props: Props) => {
key={index}
label="T2I Adapter"
value={`${t2iAdapter.t2i_adapter_model?.model_name} - ${t2iAdapter.weight}`}
onClick={() => handleRecallT2IAdapter(t2iAdapter)}
onClick={handleRecallT2IAdapter.bind(null, t2iAdapter)}
/>
))}
</>

9
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx
View File

@ -1,6 +1,6 @@
import { ExternalLinkIcon } from '@chakra-ui/icons';
import { Flex, IconButton, Link, Text, Tooltip } from '@chakra-ui/react';
import { memo } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FaCopy } from 'react-icons/fa';
import { IoArrowUndoCircleOutline } from 'react-icons/io5';
@ -27,6 +27,11 @@ const ImageMetadataItem = ({
}: MetadataItemProps) => {
const { t } = useTranslation();
const handleCopy = useCallback(
() => navigator.clipboard.writeText(value.toString()),
[value]
);
if (!value) {
return null;
}
@ -53,7 +58,7 @@ const ImageMetadataItem = ({
size="xs"
variant="ghost"
fontSize={14}
onClick={() => navigator.clipboard.writeText(value.toString())}
onClick={handleCopy}
/>
</Tooltip>
)}

12
invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx
View File

@ -76,6 +76,13 @@ const ParamLoRASelect = () => {
[dispatch, loraModels?.entities]
);
const filterFunc = useCallback(
(value: string, item: SelectItem) =>
item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
item.value.toLowerCase().includes(value.toLowerCase().trim()),
[]
);
if (loraModels?.ids.length === 0) {
return (
<Flex sx={{ justifyContent: 'center', p: 2 }}>
@ -94,10 +101,7 @@ const ParamLoRASelect = () => {
nothingFound="No matching LoRAs"
itemComponent={IAIMantineSelectItemWithTooltip}
disabled={data.length === 0}
filter={(value, item: SelectItem) =>
item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
item.value.toLowerCase().includes(value.toLowerCase().trim())
}
filter={filterFunc}
onChange={handleChange}
data-testid="add-lora"
/>

0
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/store/modelManagerSlice.ts → invokeai/frontend/web/src/features/modelManager/store/modelManagerSlice.ts
View File

11
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AddModels.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
View File

@ -1,6 +1,6 @@
import { ButtonGroup, Flex } from '@chakra-ui/react';
import IAIButton from 'common/components/IAIButton';
import { useState } from 'react';
import { useCallback, useState } from 'react';
import AdvancedAddModels from './AdvancedAddModels';
import SimpleAddModels from './SimpleAddModels';
@ -8,6 +8,11 @@ export default function AddModels() {
const [addModelMode, setAddModelMode] = useState<'simple' | 'advanced'>(
'simple'
);
const handleAddModelSimple = useCallback(() => setAddModelMode('simple'), []);
const handleAddModelAdvanced = useCallback(
() => setAddModelMode('advanced'),
[]
);
return (
<Flex
flexDirection="column"
@ -20,14 +25,14 @@ export default function AddModels() {
<IAIButton
size="sm"
isChecked={addModelMode == 'simple'}
onClick={() => setAddModelMode('simple')}
onClick={handleAddModelSimple}
>
Simple
</IAIButton>
<IAIButton
size="sm"
isChecked={addModelMode == 'advanced'}
onClick={() => setAddModelMode('advanced')}
onClick={handleAddModelAdvanced}
>
Advanced
</IAIButton>

37
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx
View File

@ -6,7 +6,7 @@ import IAIMantineTextInput from 'common/components/IAIMantineInput';
import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast';
import { useState } from 'react';
import { FocusEventHandler, useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useAddMainModelsMutation } from 'services/api/endpoints/models';
import { CheckpointModelConfig } from 'services/api/types';
@ -83,6 +83,27 @@ export default function AdvancedAddCheckpoint(
});
};
const handleBlurModelLocation: FocusEventHandler<HTMLInputElement> =
useCallback(
(e) => {
if (advancedAddCheckpointForm.values['model_name'] === '') {
const modelName = getModelName(e.currentTarget.value);
if (modelName) {
advancedAddCheckpointForm.setFieldValue(
'model_name',
modelName as string
);
}
}
},
[advancedAddCheckpointForm]
);
const handleChangeUseCustomConfig = useCallback(
() => setUseCustomConfig((prev) => !prev),
[]
);
return (
<form
onSubmit={advancedAddCheckpointForm.onSubmit((v) =>
@ -104,17 +125,7 @@ export default function AdvancedAddCheckpoint(
label={t('modelManager.modelLocation')}
required
{...advancedAddCheckpointForm.getInputProps('path')}
onBlur={(e) => {
if (advancedAddCheckpointForm.values['model_name'] === '') {
const modelName = getModelName(e.currentTarget.value);
if (modelName) {
advancedAddCheckpointForm.setFieldValue(
'model_name',
modelName as string
);
}
}
}}
onBlur={handleBlurModelLocation}
/>
<IAIMantineTextInput
label={t('modelManager.description')}
@ -144,7 +155,7 @@ export default function AdvancedAddCheckpoint(
)}
<IAISimpleCheckbox
isChecked={useCustomConfig}
onChange={() => setUseCustomConfig(!useCustomConfig)}
onChange={handleChangeUseCustomConfig}
label={t('modelManager.useCustomConfig')}
/>
<IAIButton mt={2} type="submit">

29
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx
View File

@ -12,6 +12,7 @@ import { setAdvancedAddScanModel } from '../../store/modelManagerSlice';
import BaseModelSelect from '../shared/BaseModelSelect';
import ModelVariantSelect from '../shared/ModelVariantSelect';
import { getModelName } from './util';
import { FocusEventHandler, useCallback } from 'react';
type AdvancedAddDiffusersProps = {
model_path?: string;
@ -74,6 +75,22 @@ export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) {
});
};
const handleBlurModelLocation: FocusEventHandler<HTMLInputElement> =
useCallback(
(e) => {
if (advancedAddDiffusersForm.values['model_name'] === '') {
const modelName = getModelName(e.currentTarget.value, false);
if (modelName) {
advancedAddDiffusersForm.setFieldValue(
'model_name',
modelName as string
);
}
}
},
[advancedAddDiffusersForm]
);
return (
<form
onSubmit={advancedAddDiffusersForm.onSubmit((v) =>
@ -96,17 +113,7 @@ export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) {
label={t('modelManager.modelLocation')}
placeholder={t('modelManager.modelLocationValidationMsg')}
{...advancedAddDiffusersForm.getInputProps('path')}
onBlur={(e) => {
if (advancedAddDiffusersForm.values['model_name'] === '') {
const modelName = getModelName(e.currentTarget.value, false);
if (modelName) {
advancedAddDiffusersForm.setFieldValue(
'model_name',
modelName as string
);
}
}
}}
onBlur={handleBlurModelLocation}
/>
<IAIMantineTextInput
label={t('modelManager.description')}

15
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx
View File

@ -1,7 +1,7 @@
import { Flex } from '@chakra-ui/react';
import { SelectItem } from '@mantine/core';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { useState } from 'react';
import { useCallback, useState } from 'react';
import AdvancedAddCheckpoint from './AdvancedAddCheckpoint';
import AdvancedAddDiffusers from './AdvancedAddDiffusers';
import { useTranslation } from 'react-i18next';
@ -18,6 +18,12 @@ export default function AdvancedAddModels() {
useState<ManualAddMode>('diffusers');
const { t } = useTranslation();
const handleChange = useCallback((v: string | null) => {
if (!v) {
return;
}
setAdvancedAddMode(v as ManualAddMode);
}, []);
return (
<Flex flexDirection="column" gap={4} width="100%">
@ -25,12 +31,7 @@ export default function AdvancedAddModels() {
label={t('modelManager.modelType')}
value={advancedAddMode}
data={advancedAddModeData}
onChange={(v) => {
if (!v) {
return;
}
setAdvancedAddMode(v as ManualAddMode);
}}
onChange={handleChange}
/>
<Flex

7
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/FoundModelsList.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
View File

@ -92,6 +92,11 @@ export default function FoundModelsList() {
setNameFilter(e.target.value);
}, []);
const handleClickSetAdvanced = useCallback(
(model: string) => dispatch(setAdvancedAddScanModel(model)),
[dispatch]
);
const renderModels = ({
models,
showActions = true,
@ -140,7 +145,7 @@ export default function FoundModelsList() {
{t('modelManager.quickAdd')}
</IAIButton>
<IAIButton
onClick={() => dispatch(setAdvancedAddScanModel(model))}
onClick={handleClickSetAdvanced.bind(null, model)}
isLoading={isLoading}
>
{t('modelManager.advanced')}

33
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx
View File

@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { FaTimes } from 'react-icons/fa';
import { setAdvancedAddScanModel } from '../../store/modelManagerSlice';
import AdvancedAddCheckpoint from './AdvancedAddCheckpoint';
@ -35,6 +35,23 @@ export default function ScanAdvancedAddModels() {
const dispatch = useAppDispatch();
const handleClickSetAdvanced = useCallback(
() => dispatch(setAdvancedAddScanModel(null)),
[dispatch]
);
const handleChangeAddMode = useCallback((v: string | null) => {
if (!v) {
return;
}
setAdvancedAddMode(v as ManualAddMode);
if (v === 'checkpoint') {
setIsCheckpoint(true);
} else {
setIsCheckpoint(false);
}
}, []);
if (!advancedAddScanModel) {
return null;
}
@ -68,7 +85,7 @@ export default function ScanAdvancedAddModels() {
<IAIIconButton
icon={<FaTimes />}
aria-label={t('modelManager.closeAdvanced')}
onClick={() => dispatch(setAdvancedAddScanModel(null))}
onClick={handleClickSetAdvanced}
size="sm"
/>
</Flex>
@ -76,17 +93,7 @@ export default function ScanAdvancedAddModels() {
label={t('modelManager.modelType')}
value={advancedAddMode}
data={advancedAddModeData}
onChange={(v) => {
if (!v) {
return;
}
setAdvancedAddMode(v as ManualAddMode);
if (v === 'checkpoint') {
setIsCheckpoint(true);
} else {
setIsCheckpoint(false);
}
}}
onChange={handleChangeAddMode}
/>
{isCheckpoint ? (
<AdvancedAddCheckpoint

0
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanModels.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx
View File

14
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
View File

@ -42,9 +42,14 @@ function SearchFolderForm() {
[dispatch]
);
const scanAgainHandler = () => {
const scanAgainHandler = useCallback(() => {
refetchFoundModels();
};
}, [refetchFoundModels]);
const handleClickClearCheckpointFolder = useCallback(() => {
dispatch(setSearchFolder(null));
dispatch(setAdvancedAddScanModel(null));
}, [dispatch]);
return (
<form
@ -123,10 +128,7 @@ function SearchFolderForm() {
tooltip={t('modelManager.clearCheckpointFolder')}
icon={<FaTrash />}
size="sm"
onClick={() => {
dispatch(setSearchFolder(null));
dispatch(setAdvancedAddScanModel(null));
}}
onClick={handleClickClearCheckpointFolder}
isDisabled={!searchFolder}
colorScheme="red"
/>

0
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx
View File

0
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/util.ts → invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/util.ts
View File

9
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ImportModelsPanel.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx
View File

@ -1,6 +1,6 @@
import { ButtonGroup, Flex } from '@chakra-ui/react';
import IAIButton from 'common/components/IAIButton';
import { useState } from 'react';
import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import AddModels from './AddModelsPanel/AddModels';
import ScanModels from './AddModelsPanel/ScanModels';
@ -11,11 +11,14 @@ export default function ImportModelsPanel() {
const [addModelTab, setAddModelTab] = useState<AddModelTabs>('add');
const { t } = useTranslation();
const handleClickAddTab = useCallback(() => setAddModelTab('add'), []);
const handleClickScanTab = useCallback(() => setAddModelTab('scan'), []);
return (
<Flex flexDirection="column" gap={4}>
<ButtonGroup isAttached>
<IAIButton
onClick={() => setAddModelTab('add')}
onClick={handleClickAddTab}
isChecked={addModelTab == 'add'}
size="sm"
width="100%"
@ -23,7 +26,7 @@ export default function ImportModelsPanel() {
{t('modelManager.addModel')}
</IAIButton>
<IAIButton
onClick={() => setAddModelTab('scan')}
onClick={handleClickScanTab}
isChecked={addModelTab == 'scan'}
size="sm"
width="100%"

100
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/MergeModelsPanel.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx
View File

@ -9,7 +9,7 @@ import IAISlider from 'common/components/IAISlider';
import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast';
import { pickBy } from 'lodash-es';
import { useMemo, useState } from 'react';
import { ChangeEvent, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ALL_BASE_MODELS } from 'services/api/constants';
import {
@ -94,13 +94,58 @@ export default function MergeModelsPanel() {
modelsMap[baseModel as keyof typeof modelsMap]
).filter((model) => model !== modelOne && model !== modelTwo);
const handleBaseModelChange = (v: string) => {
const handleBaseModelChange = useCallback((v: string) => {
setBaseModel(v as BaseModelType);
setModelOne(null);
setModelTwo(null);
};
}, []);
const mergeModelsHandler = () => {
const handleChangeModelOne = useCallback((v: string) => {
setModelOne(v);
}, []);
const handleChangeModelTwo = useCallback((v: string) => {
setModelTwo(v);
}, []);
const handleChangeModelThree = useCallback((v: string) => {
if (!v) {
setModelThree(null);
setModelMergeInterp('add_difference');
} else {
setModelThree(v);
setModelMergeInterp('weighted_sum');
}
}, []);
const handleChangeMergedModelName = useCallback(
(e: ChangeEvent<HTMLInputElement>) => setMergedModelName(e.target.value),
[]
);
const handleChangeModelMergeAlpha = useCallback(
(v: number) => setModelMergeAlpha(v),
[]
);
const handleResetModelMergeAlpha = useCallback(
() => setModelMergeAlpha(0.5),
[]
);
const handleChangeMergeInterp = useCallback(
(v: MergeInterpolationMethods) => setModelMergeInterp(v),
[]
);
const handleChangeMergeSaveLocType = useCallback(
(v: 'root' | 'custom') => setModelMergeSaveLocType(v),
[]
);
const handleChangeMergeCustomSaveLoc = useCallback(
(e: ChangeEvent<HTMLInputElement>) =>
setModelMergeCustomSaveLoc(e.target.value),
[]
);
const handleChangeModelMergeForce = useCallback(
(e: ChangeEvent<HTMLInputElement>) => setModelMergeForce(e.target.checked),
[]
);
const mergeModelsHandler = useCallback(() => {
const models_names: string[] = [];
let modelsToMerge: (string | null)[] = [modelOne, modelTwo, modelThree];
@ -150,7 +195,21 @@ export default function MergeModelsPanel() {
);
}
});
};
}, [
baseModel,
dispatch,
mergeModels,
mergedModelName,
modelMergeAlpha,
modelMergeCustomSaveLoc,
modelMergeForce,
modelMergeInterp,
modelMergeSaveLocType,
modelOne,
modelThree,
modelTwo,
t,
]);
return (
<Flex flexDirection="column" rowGap={4}>
@ -180,7 +239,7 @@ export default function MergeModelsPanel() {
value={modelOne}
placeholder={t('modelManager.selectModel')}
data={modelOneList}
onChange={(v) => setModelOne(v)}
onChange={handleChangeModelOne}
/>
<IAIMantineSearchableSelect
label={t('modelManager.modelTwo')}
@ -188,7 +247,7 @@ export default function MergeModelsPanel() {
placeholder={t('modelManager.selectModel')}
value={modelTwo}
data={modelTwoList}
onChange={(v) => setModelTwo(v)}
onChange={handleChangeModelTwo}
/>
<IAIMantineSearchableSelect
label={t('modelManager.modelThree')}
@ -196,22 +255,14 @@ export default function MergeModelsPanel() {
w="100%"
placeholder={t('modelManager.selectModel')}
clearable
onChange={(v) => {
if (!v) {
setModelThree(null);
setModelMergeInterp('add_difference');
} else {
setModelThree(v);
setModelMergeInterp('weighted_sum');
}
}}
onChange={handleChangeModelThree}
/>
</Flex>
<IAIInput
label={t('modelManager.mergedModelName')}
value={mergedModelName}
onChange={(e) => setMergedModelName(e.target.value)}
onChange={handleChangeMergedModelName}
/>
<Flex
@ -232,10 +283,10 @@ export default function MergeModelsPanel() {
max={0.99}
step={0.01}
value={modelMergeAlpha}
onChange={(v) => setModelMergeAlpha(v)}
onChange={handleChangeModelMergeAlpha}
withInput
withReset
handleReset={() => setModelMergeAlpha(0.5)}
handleReset={handleResetModelMergeAlpha}
withSliderMarks
/>
<Text variant="subtext" fontSize="sm">
@ -257,10 +308,7 @@ export default function MergeModelsPanel() {
<Text fontWeight={500} fontSize="sm" variant="subtext">
{t('modelManager.interpolationType')}
</Text>
<RadioGroup
value={modelMergeInterp}
onChange={(v: MergeInterpolationMethods) => setModelMergeInterp(v)}
>
<RadioGroup value={modelMergeInterp} onChange={handleChangeMergeInterp}>
<Flex columnGap={4}>
{modelThree === null ? (
<>
@ -305,7 +353,7 @@ export default function MergeModelsPanel() {
</Text>
<RadioGroup
value={modelMergeSaveLocType}
onChange={(v: 'root' | 'custom') => setModelMergeSaveLocType(v)}
onChange={handleChangeMergeSaveLocType}
>
<Flex columnGap={4}>
<Radio value="root">
@ -323,7 +371,7 @@ export default function MergeModelsPanel() {
<IAIInput
label={t('modelManager.mergedModelCustomSaveLocation')}
value={modelMergeCustomSaveLoc}
onChange={(e) => setModelMergeCustomSaveLoc(e.target.value)}
onChange={handleChangeMergeCustomSaveLoc}
/>
)}
</Flex>
@ -331,7 +379,7 @@ export default function MergeModelsPanel() {
<IAISimpleCheckbox
label={t('modelManager.ignoreMismatch')}
isChecked={modelMergeForce}
onChange={(e) => setModelMergeForce(e.target.checked)}
onChange={handleChangeModelMergeForce}
fontWeight="500"
/>

0
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx
View File

7
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx
View File

@ -59,6 +59,11 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
},
});
const handleChangeUseCustomConfig = useCallback(
() => setUseCustomConfig((prev) => !prev),
[]
);
const editModelFormSubmitHandler = useCallback(
(values: CheckpointModelConfig) => {
const responseBody = {
@ -181,7 +186,7 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
)}
<IAISimpleCheckbox
isChecked={useCustomConfig}
onChange={() => setUseCustomConfig(!useCustomConfig)}
onChange={handleChangeUseCustomConfig}
label="Use Custom Config"
/>
</Flex>

0
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx
View File

0
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx
View File

37
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelConvert.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx
View File

@ -14,7 +14,7 @@ import IAIAlertDialog from 'common/components/IAIAlertDialog';
import IAIButton from 'common/components/IAIButton';
import IAIInput from 'common/components/IAIInput';
import { addToast } from 'features/system/store/systemSlice';
import { useEffect, useState } from 'react';
import { ChangeEvent, useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useConvertMainModelsMutation } from 'services/api/endpoints/models';
@ -42,11 +42,21 @@ export default function ModelConvert(props: ModelConvertProps) {
setSaveLocation('InvokeAIRoot');
}, [model]);
const modelConvertCancelHandler = () => {
const modelConvertCancelHandler = useCallback(() => {
setSaveLocation('InvokeAIRoot');
};
}, []);
const modelConvertHandler = () => {
const handleChangeSaveLocation = useCallback((v: string) => {
setSaveLocation(v as SaveLocation);
}, []);
const handleChangeCustomSaveLocation = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
setCustomSaveLocation(e.target.value);
},
[]
);
const modelConvertHandler = useCallback(() => {
const queryArg = {
base_model: model.base_model,
model_name: model.model_name,
@ -101,7 +111,15 @@ export default function ModelConvert(props: ModelConvertProps) {
)
);
});
};
}, [
convertModel,
customSaveLocation,
dispatch,
model.base_model,
model.model_name,
saveLocation,
t,
]);
return (
<IAIAlertDialog
@ -137,10 +155,7 @@ export default function ModelConvert(props: ModelConvertProps) {
<Text fontWeight="600">
{t('modelManager.convertToDiffusersSaveLocation')}
</Text>
<RadioGroup
value={saveLocation}
onChange={(v) => setSaveLocation(v as SaveLocation)}
>
<RadioGroup value={saveLocation} onChange={handleChangeSaveLocation}>
<Flex gap={4}>
<Radio value="InvokeAIRoot">
<Tooltip label="Save converted model in the InvokeAI root folder">
@ -162,9 +177,7 @@ export default function ModelConvert(props: ModelConvertProps) {
</Text>
<IAIInput
value={customSaveLocation}
onChange={(e) => {
setCustomSaveLocation(e.target.value);
}}
onChange={handleChangeCustomSaveLocation}
width="full"
/>
</Flex>

12
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx
View File

@ -100,7 +100,7 @@ const ModelList = (props: ModelListProps) => {
<Flex flexDirection="column" gap={4} paddingInlineEnd={4}>
<ButtonGroup isAttached>
<IAIButton
onClick={() => setModelFormatFilter('all')}
onClick={setModelFormatFilter.bind(null, 'all')}
isChecked={modelFormatFilter === 'all'}
size="sm"
>
@ -108,35 +108,35 @@ const ModelList = (props: ModelListProps) => {
</IAIButton>
<IAIButton
size="sm"
onClick={() => setModelFormatFilter('diffusers')}
onClick={setModelFormatFilter.bind(null, 'diffusers')}
isChecked={modelFormatFilter === 'diffusers'}
>
{t('modelManager.diffusersModels')}
</IAIButton>
<IAIButton
size="sm"
onClick={() => setModelFormatFilter('checkpoint')}
onClick={setModelFormatFilter.bind(null, 'checkpoint')}
isChecked={modelFormatFilter === 'checkpoint'}
>
{t('modelManager.checkpointModels')}
</IAIButton>
<IAIButton
size="sm"
onClick={() => setModelFormatFilter('onnx')}
onClick={setModelFormatFilter.bind(null, 'onnx')}
isChecked={modelFormatFilter === 'onnx'}
>
{t('modelManager.onnxModels')}
</IAIButton>
<IAIButton
size="sm"
onClick={() => setModelFormatFilter('olive')}
onClick={setModelFormatFilter.bind(null, 'olive')}
isChecked={modelFormatFilter === 'olive'}
>
{t('modelManager.oliveModels')}
</IAIButton>
<IAIButton
size="sm"
onClick={() => setModelFormatFilter('lora')}
onClick={setModelFormatFilter.bind(null, 'lora')}
isChecked={modelFormatFilter === 'lora'}
>
{t('modelManager.loraModels')}

0
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
View File

0
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx
View File

0
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx
View File

5
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton.tsx
View File

@ -4,6 +4,7 @@ import IAIButton from 'common/components/IAIButton';
import IAIIconButton from 'common/components/IAIIconButton';
import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FaSync } from 'react-icons/fa';
import { useSyncModelsMutation } from 'services/api/endpoints/models';
@ -19,7 +20,7 @@ export default function SyncModelsButton(props: SyncModelsButtonProps) {
const [syncModels, { isLoading }] = useSyncModelsMutation();
const syncModelsHandler = () => {
const syncModelsHandler = useCallback(() => {
syncModels()
.unwrap()
.then((_) => {
@ -44,7 +45,7 @@ export default function SyncModelsButton(props: SyncModelsButtonProps) {
);
}
});
};
}, [dispatch, syncModels, t]);
return !iconMode ? (
<IAIButton

0
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/shared/BaseModelSelect.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx
View File

0
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/shared/CheckpointConfigsSelect.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx
View File

0
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/shared/ModelVariantSelect.tsx → invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx
View File

10
invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
View File

@ -1,4 +1,4 @@
import { useState, PropsWithChildren, memo } from 'react';
import { useState, PropsWithChildren, memo, useCallback } from 'react';
import { useSelector } from 'react-redux';
import { createSelector } from '@reduxjs/toolkit';
import { Flex, Image, Text } from '@chakra-ui/react';
@ -59,13 +59,13 @@ export default memo(CurrentImageNode);
const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => {
const [isHovering, setIsHovering] = useState(false);
const handleMouseEnter = () => {
const handleMouseEnter = useCallback(() => {
setIsHovering(true);
};
}, []);
const handleMouseLeave = () => {
const handleMouseLeave = useCallback(() => {
setIsHovering(false);
};
}, []);
return (
<NodeWrapper

30
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
View File

@ -104,17 +104,8 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
nodeId,
]);
return (
<IAIContextMenu<HTMLDivElement>
menuProps={{
size: 'sm',
isLazy: true,
}}
menuButtonProps={{
bg: 'transparent',
_hover: { bg: 'transparent' },
}}
renderMenu={() =>
const renderMenuFunc = useCallback(
() =>
!menuItems.length ? null : (
<MenuList
sx={{ visibility: 'visible !important' }}
@ -127,8 +118,21 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
{menuItems}
</MenuGroup>
</MenuList>
)
}
),
[fieldTemplateTitle, label, menuItems, skipEvent, t]
);
return (
<IAIContextMenu<HTMLDivElement>
menuProps={{
size: 'sm',
isLazy: true,
}}
menuButtonProps={{
bg: 'transparent',
_hover: { bg: 'transparent' },
}}
renderMenu={renderMenuFunc}
>
{children}
</IAIContextMenu>

14
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ClipInputField.tsx
View File

@ -1,14 +0,0 @@
import {
ClipInputFieldTemplate,
ClipInputFieldValue,
FieldComponentProps,
} from 'features/nodes/types/types';
import { memo } from 'react';
const ClipInputFieldComponent = (
_props: FieldComponentProps<ClipInputFieldValue, ClipInputFieldTemplate>
) => {
return null;
};
export default memo(ClipInputFieldComponent);

17
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/CollectionInputField.tsx
View File

@ -1,17 +0,0 @@
import {
CollectionInputFieldTemplate,
CollectionInputFieldValue,
FieldComponentProps,
} from 'features/nodes/types/types';
import { memo } from 'react';
const CollectionInputFieldComponent = (
_props: FieldComponentProps<
CollectionInputFieldValue,
CollectionInputFieldTemplate
>
) => {
return null;
};
export default memo(CollectionInputFieldComponent);

17
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/CollectionItemInputField.tsx
View File

@ -1,17 +0,0 @@
import {
CollectionItemInputFieldTemplate,
CollectionItemInputFieldValue,
FieldComponentProps,
} from 'features/nodes/types/types';
import { memo } from 'react';
const CollectionItemInputFieldComponent = (
_props: FieldComponentProps<
CollectionItemInputFieldValue,
CollectionItemInputFieldTemplate
>
) => {
return null;
};
export default memo(CollectionItemInputFieldComponent);

17
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ConditioningInputField.tsx
View File

@ -1,17 +0,0 @@
import {
ConditioningInputFieldTemplate,
ConditioningInputFieldValue,
FieldComponentProps,
} from 'features/nodes/types/types';
import { memo } from 'react';
const ConditioningInputFieldComponent = (
_props: FieldComponentProps<
ConditioningInputFieldValue,
ConditioningInputFieldTemplate
>
) => {
return null;
};
export default memo(ConditioningInputFieldComponent);

19
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ControlInputField.tsx
View File

@ -1,19 +0,0 @@
import {
ControlInputFieldTemplate,
ControlInputFieldValue,
ControlPolymorphicInputFieldTemplate,
ControlPolymorphicInputFieldValue,
FieldComponentProps,
} from 'features/nodes/types/types';
import { memo } from 'react';
const ControlInputFieldComponent = (
_props: FieldComponentProps<
ControlInputFieldValue | ControlPolymorphicInputFieldValue,
ControlInputFieldTemplate | ControlPolymorphicInputFieldTemplate
>
) => {
return null;
};
export default memo(ControlInputFieldComponent);

17
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/DenoiseMaskInputField.tsx
View File

@ -1,17 +0,0 @@
import {
DenoiseMaskInputFieldTemplate,
DenoiseMaskInputFieldValue,
FieldComponentProps,
} from 'features/nodes/types/types';
import { memo } from 'react';
const DenoiseMaskInputFieldComponent = (
_props: FieldComponentProps<
DenoiseMaskInputFieldValue,
DenoiseMaskInputFieldTemplate
>
) => {
return null;
};
export default memo(DenoiseMaskInputFieldComponent);

19
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterInputField.tsx
View File

@ -1,19 +0,0 @@
import {
IPAdapterInputFieldTemplate,
IPAdapterInputFieldValue,
FieldComponentProps,
IPAdapterPolymorphicInputFieldValue,
IPAdapterPolymorphicInputFieldTemplate,
} from 'features/nodes/types/types';
import { memo } from 'react';
const IPAdapterInputFieldComponent = (
_props: FieldComponentProps<
IPAdapterInputFieldValue | IPAdapterPolymorphicInputFieldValue,
IPAdapterInputFieldTemplate | IPAdapterPolymorphicInputFieldTemplate
>
) => {
return null;
};
export default memo(IPAdapterInputFieldComponent);

94
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageCollectionInputField.tsx
View File

@ -1,94 +0,0 @@
import {
ImageCollectionInputFieldTemplate,
ImageCollectionInputFieldValue,
FieldComponentProps,
} from 'features/nodes/types/types';
import { memo } from 'react';
import { Flex } from '@chakra-ui/react';
import IAIDndImage from 'common/components/IAIDndImage';
import IAIDropOverlay from 'common/components/IAIDropOverlay';
import { useDroppableTypesafe } from 'features/dnd/hooks/typesafeHooks';
import { NodesMultiImageDropData } from 'features/dnd/types';
import { isValidDrop } from 'features/dnd/util/isValidDrop';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
const ImageCollectionInputFieldComponent = (
props: FieldComponentProps<
ImageCollectionInputFieldValue,
ImageCollectionInputFieldTemplate
>
) => {
const { nodeId, field } = props;
// const dispatch = useAppDispatch();
// const handleDrop = useCallback(
// ({ image_name }: ImageDTO) => {
// dispatch(
// fieldValueChanged({
// nodeId,
// fieldName: field.name,
// value: uniqBy([...(field.value ?? []), { image_name }], 'image_name'),
// })
// );
// },
// [dispatch, field.name, field.value, nodeId]
// );
const droppableData: NodesMultiImageDropData = {
id: `node-${nodeId}-${field.name}`,
actionType: 'SET_MULTI_NODES_IMAGE',
context: { nodeId: nodeId, fieldName: field.name },
};
const {
isOver,
setNodeRef: setDroppableRef,
active,
} = useDroppableTypesafe({
id: `node_${nodeId}`,
data: droppableData,
});
// const handleReset = useCallback(() => {
// dispatch(
// fieldValueChanged({
// nodeId,
// fieldName: field.name,
// value: undefined,
// })
// );
// }, [dispatch, field.name, nodeId]);
return (
<Flex
ref={setDroppableRef}
sx={{
w: 'full',
h: 'full',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
minH: '10rem',
}}
>
{field.value?.map(({ image_name }) => (
<ImageSubField key={image_name} imageName={image_name} />
))}
{isValidDrop(droppableData, active) && <IAIDropOverlay isOver={isOver} />}
</Flex>
);
};
export default memo(ImageCollectionInputFieldComponent);
type ImageSubFieldProps = { imageName: string };
const ImageSubField = (props: ImageSubFieldProps) => {
const { currentData: image } = useGetImageDTOQuery(props.imageName);
return (
<IAIDndImage imageDTO={image} isDropDisabled={true} isDragDisabled={true} />
);
};

19
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LatentsInputField.tsx
View File

@ -1,19 +0,0 @@
import {
LatentsInputFieldTemplate,
LatentsInputFieldValue,
FieldComponentProps,
LatentsPolymorphicInputFieldValue,
LatentsPolymorphicInputFieldTemplate,
} from 'features/nodes/types/types';
import { memo } from 'react';
const LatentsInputFieldComponent = (
_props: FieldComponentProps<
LatentsInputFieldValue | LatentsPolymorphicInputFieldValue,
LatentsInputFieldTemplate | LatentsPolymorphicInputFieldTemplate
>
) => {
return null;
};
export default memo(LatentsInputFieldComponent);

12
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelInputField.tsx
View File

@ -80,6 +80,13 @@ const LoRAModelInputFieldComponent = (
[dispatch, field.name, nodeId]
);
const filterFunc = useCallback(
(value: string, item: SelectItem) =>
item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
item.value.toLowerCase().includes(value.toLowerCase().trim()),
[]
);
if (loraModels?.ids.length === 0) {
return (
<Flex sx={{ justifyContent: 'center', p: 2 }}>
@ -101,10 +108,7 @@ const LoRAModelInputFieldComponent = (
nothingFound={t('models.noMatchingLoRAs')}
itemComponent={IAIMantineSelectItemWithTooltip}
disabled={data.length === 0}
filter={(value, item: SelectItem) =>
item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
item.value.toLowerCase().includes(value.toLowerCase().trim())
}
filter={filterFunc}
error={!selectedLoRAModel}
onChange={handleChange}
sx={{

2
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelInputField.tsx
View File

@ -11,7 +11,7 @@ import {
import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { modelIdToMainModelParam } from 'features/parameters/util/modelIdToMainModelParam';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import SyncModelsButton from 'features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton';
import SyncModelsButton from 'features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton';
import { forEach } from 'lodash-es';
import { memo, useCallback, useMemo } from 'react';
import { NON_SDXL_MAIN_MODELS } from 'services/api/constants';

9
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberInputField.tsx
View File

@ -19,7 +19,7 @@ import {
IntegerPolymorphicInputFieldTemplate,
IntegerPolymorphicInputFieldValue,
} from 'features/nodes/types/types';
import { memo, useEffect, useMemo, useState } from 'react';
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
const NumberInputFieldComponent = (
props: FieldComponentProps<
@ -43,7 +43,8 @@ const NumberInputFieldComponent = (
[fieldTemplate.type]
);
const handleValueChanged = (v: string) => {
const handleValueChanged = useCallback(
(v: string) => {
setValueAsString(v);
// This allows negatives and decimals e.g. '-123', `.5`, `-0.2`, etc.
if (!v.match(numberStringRegex)) {
@ -56,7 +57,9 @@ const NumberInputFieldComponent = (
})
);
}
};
},
[dispatch, field.name, isIntegerField, nodeId]
);
useEffect(() => {
if (

2
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelInputField.tsx
View File

@ -11,7 +11,7 @@ import {
import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { modelIdToMainModelParam } from 'features/parameters/util/modelIdToMainModelParam';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import SyncModelsButton from 'features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton';
import SyncModelsButton from 'features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton';
import { forEach } from 'lodash-es';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';

2
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelInputField.tsx
View File

@ -11,7 +11,7 @@ import {
import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { modelIdToMainModelParam } from 'features/parameters/util/modelIdToMainModelParam';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import SyncModelsButton from 'features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton';
import SyncModelsButton from 'features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton';
import { forEach } from 'lodash-es';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';

19
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterInputField.tsx
View File

@ -1,19 +0,0 @@
import {
T2IAdapterInputFieldTemplate,
T2IAdapterInputFieldValue,
T2IAdapterPolymorphicInputFieldTemplate,
T2IAdapterPolymorphicInputFieldValue,
FieldComponentProps,
} from 'features/nodes/types/types';
import { memo } from 'react';
const T2IAdapterInputFieldComponent = (
_props: FieldComponentProps<
T2IAdapterInputFieldValue | T2IAdapterPolymorphicInputFieldValue,
T2IAdapterInputFieldTemplate | T2IAdapterPolymorphicInputFieldTemplate
>
) => {
return null;
};
export default memo(T2IAdapterInputFieldComponent);

14
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/UnetInputField.tsx
View File

@ -1,14 +0,0 @@
import {
UNetInputFieldTemplate,
UNetInputFieldValue,
FieldComponentProps,
} from 'features/nodes/types/types';
import { memo } from 'react';
const UNetInputFieldComponent = (
_props: FieldComponentProps<UNetInputFieldValue, UNetInputFieldTemplate>
) => {
return null;
};
export default memo(UNetInputFieldComponent);

14
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VaeInputField.tsx
View File

@ -1,14 +0,0 @@
import {
VaeInputFieldTemplate,
VaeInputFieldValue,
FieldComponentProps,
} from 'features/nodes/types/types';
import { memo } from 'react';
const VaeInputFieldComponent = (
_props: FieldComponentProps<VaeInputFieldValue, VaeInputFieldTemplate>
) => {
return null;
};
export default memo(VaeInputFieldComponent);

27
invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeResizer.tsx
View File

@ -1,27 +0,0 @@
import { NODE_MIN_WIDTH } from 'features/nodes/types/constants';
import { memo } from 'react';
import { NodeResizeControl, NodeResizerProps } from 'reactflow';
// this causes https://github.com/invoke-ai/InvokeAI/issues/4140
// not using it for now
const NodeResizer = (props: NodeResizerProps) => {
const { ...rest } = props;
return (
<NodeResizeControl
style={{
position: 'absolute',
border: 'none',
background: 'transparent',
width: 15,
height: 15,
bottom: 0,
right: 0,
}}
minWidth={NODE_MIN_WIDTH}
{...rest}
></NodeResizeControl>
);
};
export default memo(NodeResizer);

78
invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
View File

@ -1,78 +0,0 @@
import { Box, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import { InvocationTemplate, NodeData } from 'features/nodes/types/types';
import { memo } from 'react';
import NotesTextarea from '../../flow/nodes/Invocation/NotesTextarea';
import NodeTitle from '../../flow/nodes/common/NodeTitle';
import ScrollableContent from '../ScrollableContent';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
({ nodes }) => {
const lastSelectedNodeId =
nodes.selectedNodes[nodes.selectedNodes.length - 1];
const lastSelectedNode = nodes.nodes.find(
(node) => node.id === lastSelectedNodeId
);
const lastSelectedNodeTemplate = lastSelectedNode
? nodes.nodeTemplates[lastSelectedNode.data.type]
: undefined;
return {
data: lastSelectedNode?.data,
template: lastSelectedNodeTemplate,
};
},
defaultSelectorOptions
);
const InspectorDetailsTab = () => {
const { data, template } = useAppSelector(selector);
const { t } = useTranslation();
if (!template || !data) {
return (
<IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />
);
}
return <Content data={data} template={template} />;
};
export default memo(InspectorDetailsTab);
const Content = (props: { data: NodeData; template: InvocationTemplate }) => {
const { data } = props;
return (
<Box
sx={{
position: 'relative',
w: 'full',
h: 'full',
}}
>
<ScrollableContent>
<Flex
sx={{
flexDir: 'column',
position: 'relative',
p: 1,
gap: 2,
w: 'full',
}}
>
<NodeTitle nodeId={data.id} />
<NotesTextarea nodeId={data.id} />
</Flex>
</ScrollableContent>
</Box>
);
};

51
invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowNotesTab.tsx
View File

@ -1,51 +0,0 @@
import { Box, Text } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAITextarea from 'common/components/IAITextarea';
import { workflowNotesChanged } from 'features/nodes/store/nodesSlice';
import { ChangeEvent, memo, useCallback } from 'react';
const selector = createSelector(stateSelector, ({ nodes }) => {
const { notes } = nodes.workflow;
return {
notes,
};
});
const WorkflowNotesTab = () => {
const { notes } = useAppSelector(selector);
const dispatch = useAppDispatch();
const handleChangeNotes = useCallback(
(e: ChangeEvent<HTMLTextAreaElement>) => {
dispatch(workflowNotesChanged(e.target.value));
},
[dispatch]
);
return (
<Box sx={{ pos: 'relative', h: 'full' }}>
<IAITextarea
onChange={handleChangeNotes}
value={notes}
fontSize="sm"
sx={{ h: 'full', resize: 'none' }}
/>
<Box sx={{ pos: 'absolute', bottom: 2, right: 2 }}>
<Text
sx={{
fontSize: 'xs',
opacity: 0.5,
userSelect: 'none',
}}
>
{notes.length}
</Text>
</Box>
</Box>
);
};
export default memo(WorkflowNotesTab);

11
invokeai/frontend/web/src/features/nodes/store/util/makeTemplateSelector.ts
View File

@ -1,11 +0,0 @@
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { AnyInvocationType } from 'services/events/types';
export const makeTemplateSelector = (type: AnyInvocationType) =>
createSelector(
stateSelector,
({ nodes }) => nodes.nodeTemplates[type],
defaultSelectorOptions
);

21
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxCollapse.tsx
View File

@ -1,21 +0,0 @@
import { Flex } from '@chakra-ui/react';
import IAICollapse from 'common/components/IAICollapse';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import ParamBoundingBoxHeight from './ParamBoundingBoxHeight';
import ParamBoundingBoxWidth from './ParamBoundingBoxWidth';
const ParamBoundingBoxCollapse = () => {
const { t } = useTranslation();
return (
<IAICollapse label={t('parameters.boundingBoxHeader')}>
<Flex sx={{ gap: 2, flexDirection: 'column' }}>
<ParamBoundingBoxWidth />
<ParamBoundingBoxHeight />
</Flex>
</IAICollapse>
);
};
export default memo(ParamBoundingBoxCollapse);

13
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
View File

@ -6,7 +6,7 @@ import IAISlider from 'common/components/IAISlider';
import { roundToMultiple } from 'common/util/roundDownToMultiple';
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
import { memo } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -36,7 +36,8 @@ const ParamBoundingBoxWidth = () => {
? 1024
: 512;
const handleChangeHeight = (v: number) => {
const handleChangeHeight = useCallback(
(v: number) => {
dispatch(
setBoundingBoxDimensions({
...boundingBoxDimensions,
@ -52,9 +53,11 @@ const ParamBoundingBoxWidth = () => {
})
);
}
};
},
[aspectRatio, boundingBoxDimensions, dispatch]
);
const handleResetHeight = () => {
const handleResetHeight = useCallback(() => {
dispatch(
setBoundingBoxDimensions({
...boundingBoxDimensions,
@ -70,7 +73,7 @@ const ParamBoundingBoxWidth = () => {
})
);
}
};
}, [aspectRatio, boundingBoxDimensions, dispatch, initial]);
return (
<IAISlider

13
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
View File

@ -6,7 +6,7 @@ import IAISlider from 'common/components/IAISlider';
import { roundToMultiple } from 'common/util/roundDownToMultiple';
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
import { memo } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -36,7 +36,8 @@ const ParamBoundingBoxWidth = () => {
const { t } = useTranslation();
const handleChangeWidth = (v: number) => {
const handleChangeWidth = useCallback(
(v: number) => {
dispatch(
setBoundingBoxDimensions({
...boundingBoxDimensions,
@ -52,9 +53,11 @@ const ParamBoundingBoxWidth = () => {
})
);
}
};
},
[aspectRatio, boundingBoxDimensions, dispatch]
);
const handleResetWidth = () => {
const handleResetWidth = useCallback(() => {
dispatch(
setBoundingBoxDimensions({
...boundingBoxDimensions,
@ -70,7 +73,7 @@ const ParamBoundingBoxWidth = () => {
})
);
}
};
}, [aspectRatio, boundingBoxDimensions, dispatch, initial]);
return (
<IAISlider

9
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceMode.tsx
View File

@ -6,7 +6,7 @@ import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { setCanvasCoherenceMode } from 'features/parameters/store/generationSlice';
import { CanvasCoherenceModeParam } from 'features/parameters/types/parameterSchemas';
import { memo } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const coherenceModeSelectData: IAISelectDataType[] = [
@ -22,13 +22,16 @@ const ParamCanvasCoherenceMode = () => {
);
const { t } = useTranslation();
const handleCoherenceModeChange = (v: string | null) => {
const handleCoherenceModeChange = useCallback(
(v: string | null) => {
if (!v) {
return;
}
dispatch(setCanvasCoherenceMode(v as CanvasCoherenceModeParam));
};
},
[dispatch]
);
return (
<IAIInformationalPopover feature="compositingCoherenceMode">

21
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
View File

@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover';
import IAISlider from 'common/components/IAISlider';
import { setCanvasCoherenceSteps } from 'features/parameters/store/generationSlice';
import { memo } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const ParamCanvasCoherenceSteps = () => {
@ -13,6 +13,17 @@ const ParamCanvasCoherenceSteps = () => {
);
const { t } = useTranslation();
const handleChange = useCallback(
(v: number) => {
dispatch(setCanvasCoherenceSteps(v));
},
[dispatch]
);
const handleReset = useCallback(() => {
dispatch(setCanvasCoherenceSteps(20));
}, [dispatch]);
return (
<IAIInformationalPopover feature="compositingCoherenceSteps">
<IAISlider
@ -22,15 +33,11 @@ const ParamCanvasCoherenceSteps = () => {
step={1}
sliderNumberInputProps={{ max: 999 }}
value={canvasCoherenceSteps}
onChange={(v) => {
dispatch(setCanvasCoherenceSteps(v));
}}
onChange={handleChange}
withInput
withSliderMarks
withReset
handleReset={() => {
dispatch(setCanvasCoherenceSteps(20));
}}
handleReset={handleReset}
/>
</IAIInformationalPopover>
);

20
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
View File

@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover';
import IAISlider from 'common/components/IAISlider';
import { setCanvasCoherenceStrength } from 'features/parameters/store/generationSlice';
import { memo } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const ParamCanvasCoherenceStrength = () => {
@ -13,6 +13,16 @@ const ParamCanvasCoherenceStrength = () => {
);
const { t } = useTranslation();
const handleChange = useCallback(
(v: number) => {
dispatch(setCanvasCoherenceStrength(v));
},
[dispatch]
);
const handleReset = useCallback(() => {
dispatch(setCanvasCoherenceStrength(0.3));
}, [dispatch]);
return (
<IAIInformationalPopover feature="compositingStrength">
<IAISlider
@ -22,15 +32,11 @@ const ParamCanvasCoherenceStrength = () => {
step={0.01}
sliderNumberInputProps={{ max: 999 }}
value={canvasCoherenceStrength}
onChange={(v) => {
dispatch(setCanvasCoherenceStrength(v));
}}
onChange={handleChange}
withInput
withSliderMarks
withReset
handleReset={() => {
dispatch(setCanvasCoherenceStrength(0.3));
}}
handleReset={handleReset}
/>
</IAIInformationalPopover>
);

Some files were not shown because too many files have changed in this diff Show More