Merge branch 'main' into lstein/new-model-manager

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -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'));
@@ -25,6 +26,7 @@ interface Props extends PropsWithChildren {
   config?: PartialAppConfig;
   headerComponent?: ReactNode;
   setIsReady?: (isReady: boolean) => void;
+  middleware?: Middleware[];
 }
 
 const InvokeAIUI = ({
@@ -33,6 +35,7 @@ const InvokeAIUI = ({
   config,
   headerComponent,
   setIsReady,
+  middleware,
 }: Props) => {
   useEffect(() => {
     // configure API client token
@@ -54,8 +57,12 @@ const InvokeAIUI = ({
     // the `apiUrl`/`token` dynamically.
 
     // rebuild socket middleware with token and apiUrl
+    if (middleware && middleware.length > 0) {
+      addMiddleware(socketMiddleware(), ...middleware);
+    } else {
       addMiddleware(socketMiddleware());
-  }, [apiUrl, token]);
+    }
+  }, [apiUrl, token, middleware]);
 
   return (
     <React.StrictMode>

invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx

@@ -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';
@@ -252,6 +256,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
   useHotkeys('p', handleUsePrompt, [image]);
 
   const handleSendToImageToImage = useCallback(() => {
+    dispatch(sentImageToImg2Img());
     dispatch(initialImageSelected(image));
   }, [dispatch, image]);
 
@@ -327,6 +332,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
 
   const handleSendToCanvas = useCallback(() => {
     if (!image) return;
+    dispatch(sentImageToCanvas());
     if (isLightboxOpen) dispatch(setIsLightboxOpen(false));
 
     // dispatch(setInitialCanvasImage(selectedImage));
@@ -417,6 +423,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
                 size="sm"
                 onClick={handleSendToImageToImage}
                 leftIcon={<FaShare />}
+                id="send-to-img2img"
               >
                 {t('parameters.sendToImg2Img')}
               </IAIButton>
@@ -425,6 +432,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
                   size="sm"
                   onClick={handleSendToCanvas}
                   leftIcon={<FaShare />}
+                  id="send-to-canvas"
                 >
                   {t('parameters.sendToUnifiedCanvas')}
                 </IAIButton>

invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx

@@ -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(
@@ -157,6 +161,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   }, [image, recallSeed]);
 
   const handleSendToImageToImage = useCallback(() => {
+    dispatch(sentImageToImg2Img());
     dispatch(initialImageSelected(image));
   }, [dispatch, image]);
 
@@ -168,6 +173,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
    * TODO: the rest of these
    */
   const handleSendToCanvas = () => {
+    dispatch(sentImageToCanvas());
     dispatch(setInitialCanvasImage(image));
 
     dispatch(resizeAndScaleCanvas());
@@ -250,11 +256,16 @@ const HoverableImage = memo((props: HoverableImageProps) => {
             <MenuItem
               icon={<FaShare />}
               onClickCapture={handleSendToImageToImage}
+              id="send-to-img2img"
             >
               {t('parameters.sendToImg2Img')}
             </MenuItem>
             {isCanvasEnabled && (
-              <MenuItem icon={<FaShare />} onClickCapture={handleSendToCanvas}>
+              <MenuItem
+                icon={<FaShare />}
+                onClickCapture={handleSendToCanvas}
+                id="send-to-canvas"
+              >
                 {t('parameters.sendToUnifiedCanvas')}
               </MenuItem>
             )}

invokeai/frontend/web/src/features/gallery/store/actions.ts

@@ -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');

invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx

@@ -132,6 +132,7 @@ const CancelButton = (
         isDisabled={!isConnected || !isProcessing || !isCancelable}
         onClick={handleClickCancel}
         colorScheme="error"
+        id="cancel-button"
         {...rest}
       />
       <Menu closeOnSelect={false}>

invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx

@@ -56,6 +56,7 @@ export default function InvokeButton(props: InvokeButton) {
           tooltip={t('parameters.invoke')}
           tooltipProps={{ placement: 'bottom' }}
           colorScheme="accent"
+          id="invoke-button"
           {...rest}
         />
       ) : (
@@ -67,6 +68,7 @@ export default function InvokeButton(props: InvokeButton) {
           flexGrow={1}
           w="100%"
           colorScheme="accent"
+          id="invoke-button"
           fontWeight={700}
           {...rest}
         >