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

feat(ui): add createLruSelector

Browse Source 
This uses the previous implementation of the memoization function in reselect. It's possible for the new weakmap-based memoization to cause memory leaks in certain scenarios, so we will avoid it for now.
This commit is contained in:
psychedelicious 2023-12-30 23:44:59 +11:00 committed by Kent Keirsey
parent ee2529f3fd
commit bd92a31d15
2 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
invokeai/frontend/web/src/app/store/createMemoizedSelector.ts
View File

@ -10,3 +10,10 @@ export const createMemoizedSelector = createSelectorCreator({
resultEqualityCheck: isEqual,
},
});
/**
* A memoized selector creator that uses LRU cache default shallow equality check.
*/
export const createLruSelector = createSelectorCreator({
memoize: lruMemoize,
});

46
invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx
View File

@ -1,29 +1,32 @@
import { createSelector } from '@reduxjs/toolkit';
import {
createLruSelector,
createMemoizedSelector,
} from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import type { ImageConfig } from 'konva/lib/shapes/Image';
import { memo, useEffect, useState } from 'react';
import { Image as KonvaImage } from 'react-konva';
const selector = createSelector([stateSelector], ({ system, canvas }) => {
const { denoiseProgress } = system;
const { boundingBox } = canvas.layerState.stagingArea;
const { batchIds } = canvas;
const progressImageSelector = createLruSelector(
[stateSelector],
({ system, canvas }) => {
const { denoiseProgress } = system;
const { batchIds } = canvas;
return {
boundingBox,
progressImage:
denoiseProgress && batchIds.includes(denoiseProgress.batch_id)
? denoiseProgress.progress_image
: undefined,
};
});
return denoiseProgress && batchIds.includes(denoiseProgress.batch_id)
? denoiseProgress.progress_image
: undefined;
}
);
type Props = Omit<ImageConfig, 'image'>;
const boundingBoxSelector = createMemoizedSelector(
[stateSelector],
({ canvas }) => canvas.layerState.stagingArea.boundingBox
);
const IAICanvasIntermediateImage = (props: Props) => {
const { ...rest } = props;
const { progressImage, boundingBox } = useAppSelector(selector);
const IAICanvasIntermediateImage = () => {
const progressImage = useAppSelector(progressImageSelector);
const boundingBox = useAppSelector(boundingBoxSelector);
const [loadedImageElement, setLoadedImageElement] =
useState<HTMLImageElement | null>(null);
@ -41,11 +44,11 @@ const IAICanvasIntermediateImage = (props: Props) => {
tempImage.src = progressImage.dataURL;
}, [progressImage]);
if (!(progressImage && boundingBox)) {
if (!(progressImage && boundingBox) || !loadedImageElement) {
return null;
}
return loadedImageElement ? (
return (
<KonvaImage
x={boundingBox.x}
y={boundingBox.y}
@ -53,9 +56,8 @@ const IAICanvasIntermediateImage = (props: Props) => {
height={boundingBox.height}
image={loadedImageElement}
listening={false}
{...rest}
/>
) : null;
);
};
export default memo(IAICanvasIntermediateImage);