Skip to content

added optional middleware prop and new actions needed #3437

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 22, 2023
Merged

added optional middleware prop and new actions needed #3437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eab1e81
added optional middleware prop and new actions needed
May 19, 2023
15c093a
accidental import
May 19, 2023
a2ea166
make middleware an array
May 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { PartialAppConfig } from 'app/types/invokeai';

import '../../i18n';
import { socketMiddleware } from 'services/events/middleware';
import { Middleware } from '@reduxjs/toolkit';

const App = lazy(() => import('./App'));
const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
Expand All @@ -25,6 +26,7 @@ interface Props extends PropsWithChildren {
config?: PartialAppConfig;
headerComponent?: ReactNode;
setIsReady?: (isReady: boolean) => void;
middleware?: Middleware[];
}

const InvokeAIUI = ({
Expand All @@ -33,6 +35,7 @@ const InvokeAIUI = ({
config,
headerComponent,
setIsReady,
middleware,
}: Props) => {
useEffect(() => {
// configure API client token
Expand All @@ -54,8 +57,12 @@ const InvokeAIUI = ({
// the `apiUrl`/`token` dynamically.

// rebuild socket middleware with token and apiUrl
addMiddleware(socketMiddleware());
}, [apiUrl, token]);
if (middleware && middleware.length > 0) {
addMiddleware(socketMiddleware(), ...middleware);
} else {
addMiddleware(socketMiddleware());
}
}, [apiUrl, token, middleware]);

return (
<React.StrictMode>
Expand Down
8 changes: 7 additions & 1 deletion invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,11 @@ import { useGetUrl } from 'common/util/getUrl';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { useParameters } from 'features/parameters/hooks/useParameters';
import { initialImageSelected } from 'features/parameters/store/actions';
import { requestedImageDeletion } from '../store/actions';
import {
requestedImageDeletion,
sentImageToCanvas,
sentImageToImg2Img,
} from '../store/actions';
import FaceRestoreSettings from 'features/parameters/components/Parameters/FaceRestore/FaceRestoreSettings';
import UpscaleSettings from 'features/parameters/components/Parameters/Upscale/UpscaleSettings';
import { allParametersSet } from 'features/parameters/store/generationSlice';
Expand Down Expand Up @@ -252,6 +256,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
useHotkeys('p', handleUsePrompt, [image]);

const handleSendToImageToImage = useCallback(() => {
dispatch(sentImageToImg2Img());
dispatch(initialImageSelected(image));
}, [dispatch, image]);

Expand Down Expand Up @@ -327,6 +332,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {

const handleSendToCanvas = useCallback(() => {
if (!image) return;
dispatch(sentImageToCanvas());
if (isLightboxOpen) dispatch(setIsLightboxOpen(false));

// dispatch(setInitialCanvasImage(selectedImage));
Expand Down
8 changes: 7 additions & 1 deletion invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,11 @@ import { isEqual } from 'lodash-es';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { useParameters } from 'features/parameters/hooks/useParameters';
import { initialImageSelected } from 'features/parameters/store/actions';
import { requestedImageDeletion } from '../store/actions';
import {
requestedImageDeletion,
sentImageToCanvas,
sentImageToImg2Img,
} from '../store/actions';
import { useAppToaster } from 'app/components/Toaster';

export const selector = createSelector(
Expand Down Expand Up @@ -157,6 +161,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
}, [image, recallSeed]);

const handleSendToImageToImage = useCallback(() => {
dispatch(sentImageToImg2Img());
dispatch(initialImageSelected(image));
}, [dispatch, image]);

Expand All @@ -168,6 +173,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
* TODO: the rest of these
*/
const handleSendToCanvas = () => {
dispatch(sentImageToCanvas());
dispatch(setInitialCanvasImage(image));

dispatch(resizeAndScaleCanvas());
Expand Down
4 changes: 4 additions & 0 deletions invokeai/frontend/web/src/features/gallery/store/actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,7 @@ import { SelectedImage } from 'features/parameters/store/actions';
export const requestedImageDeletion = createAction<
Image | SelectedImage | undefined
>('gallery/requestedImageDeletion');

export const sentImageToCanvas = createAction('gallery/sentImageToCanvas');

export const sentImageToImg2Img = createAction('gallery/sentImageToImg2Img');