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