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

fix circular dep with recallAllParameters (#4640)

Browse Source 
* break out separate functions for preselected images, remove recallAllParameters dep as it causes circular logic with model being set

* lint

---------

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
This commit is contained in:
Mary Hipp Rogers 2023-09-21 15:08:32 -04:00 committed by GitHub
parent ca7a7b57bb
commit 14ce7cf09c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
invokeai/frontend/web/src/app/components/App.tsx
View File

@ -36,7 +36,8 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
const logger = useLogger('system'); const logger = useLogger('system');
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { handlePreselectedImage } = usePreselectedImage(); const { handleSendToCanvas, handleSendToImg2Img, handleUseAllMetadata } =
usePreselectedImage(selectedImage?.imageName);
const handleReset = useCallback(() => { const handleReset = useCallback(() => {
localStorage.clear(); localStorage.clear();
location.reload(); location.reload();
@ -59,8 +60,22 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
}, [dispatch]); }, [dispatch]);
useEffect(() => { useEffect(() => {
handlePreselectedImage(selectedImage); if (selectedImage && selectedImage.action === 'sendToCanvas') {
}, [handlePreselectedImage, selectedImage]); handleSendToCanvas();
}
}, [selectedImage, handleSendToCanvas]);
useEffect(() => {
if (selectedImage && selectedImage.action === 'sendToImg2Img') {
handleSendToImg2Img();
}
}, [selectedImage, handleSendToImg2Img]);
useEffect(() => {
if (selectedImage && selectedImage.action === 'useAllParameters') {
handleUseAllMetadata();
}
}, [selectedImage, handleUseAllMetadata]);
const headerComponent = useStore($headerComponent); const headerComponent = useStore($headerComponent);

84
invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts
View File

@ -1,7 +1,7 @@
import { skipToken } from '@reduxjs/toolkit/dist/query'; import { skipToken } from '@reduxjs/toolkit/dist/query';
import { CoreMetadata } from 'features/nodes/types/types'; import { CoreMetadata } from 'features/nodes/types/types';
import { t } from 'i18next'; import { t } from 'i18next';
import { useCallback, useState } from 'react'; import { useCallback } from 'react';
import { useAppToaster } from '../../../app/components/Toaster'; import { useAppToaster } from '../../../app/components/Toaster';
import { useAppDispatch } from '../../../app/store/storeHooks'; import { useAppDispatch } from '../../../app/store/storeHooks';
import { import {
@ -13,70 +13,46 @@ import { setActiveTab } from '../../ui/store/uiSlice';
import { initialImageSelected } from '../store/actions'; import { initialImageSelected } from '../store/actions';
import { useRecallParameters } from './useRecallParameters'; import { useRecallParameters } from './useRecallParameters';
type SelectedImage = { export const usePreselectedImage = (imageName?: string) => {
imageName: string;
action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
};
export const usePreselectedImage = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const [imageNameForDto, setImageNameForDto] = useState<string | undefined>();
const [imageNameForMetadata, setImageNameForMetadata] = useState<
string | undefined
>();
const { recallAllParameters } = useRecallParameters(); const { recallAllParameters } = useRecallParameters();
const toaster = useAppToaster(); const toaster = useAppToaster();
const { currentData: selectedImageDto } = useGetImageDTOQuery( const { currentData: selectedImageDto } = useGetImageDTOQuery(
imageNameForDto ?? skipToken imageName ?? skipToken
); );
const { currentData: selectedImageMetadata } = useGetImageMetadataQuery( const { currentData: selectedImageMetadata } = useGetImageMetadataQuery(
imageNameForMetadata ?? skipToken imageName ?? skipToken
); );
const handlePreselectedImage = useCallback( const handleSendToCanvas = useCallback(() => {
(selectedImage?: SelectedImage) => { if (selectedImageDto) {
if (!selectedImage) { dispatch(setInitialCanvasImage(selectedImageDto));
return; dispatch(setActiveTab('unifiedCanvas'));
} toaster({
title: t('toast.sentToUnifiedCanvas'),
status: 'info',
duration: 2500,
isClosable: true,
});
}
}, [dispatch, toaster, selectedImageDto]);
if (selectedImage.action === 'sendToCanvas') { const handleSendToImg2Img = useCallback(() => {
setImageNameForDto(selectedImage?.imageName); if (selectedImageDto) {
if (selectedImageDto) { dispatch(initialImageSelected(selectedImageDto));
dispatch(setInitialCanvasImage(selectedImageDto)); }
dispatch(setActiveTab('unifiedCanvas')); }, [dispatch, selectedImageDto]);
toaster({
title: t('toast.sentToUnifiedCanvas'),
status: 'info',
duration: 2500,
isClosable: true,
});
}
}
if (selectedImage.action === 'sendToImg2Img') { const handleUseAllMetadata = useCallback(() => {
setImageNameForDto(selectedImage?.imageName); if (selectedImageMetadata) {
if (selectedImageDto) { recallAllParameters(selectedImageMetadata.metadata as CoreMetadata);
dispatch(initialImageSelected(selectedImageDto)); }
} // disabled because `recallAllParameters` changes the model, but its dep to prepare LoRAs has model as a dep. this introduces circular logic that causes infinite re-renders
} // eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedImageMetadata]);
if (selectedImage.action === 'useAllParameters') { return { handleSendToCanvas, handleSendToImg2Img, handleUseAllMetadata };
setImageNameForMetadata(selectedImage?.imageName);
if (selectedImageMetadata) {
recallAllParameters(selectedImageMetadata.metadata as CoreMetadata);
}
}
},
[
dispatch,
selectedImageDto,
selectedImageMetadata,
recallAllParameters,
toaster,
]
);
return { handlePreselectedImage };
}; };