enable preselected image actions

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

@@ -14,6 +14,7 @@ import i18n from 'i18n';
 import { size } from 'lodash-es';
 import { ReactNode, memo, useCallback, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { usePreselectedImage } from '../../features/parameters/hooks/usePreselectedImage';
 import AppErrorBoundaryFallback from './AppErrorBoundaryFallback';
 import GlobalHotkeys from './GlobalHotkeys';
 import Toaster from './Toaster';
@@ -23,13 +24,22 @@ const DEFAULT_CONFIG = {};
 interface Props {
   config?: PartialAppConfig;
   headerComponent?: ReactNode;
+  selectedImage?: {
+    imageName: string;
+    action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
+  };
 }
 
-const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
+const App = ({
+  config = DEFAULT_CONFIG,
+  headerComponent,
+  selectedImage,
+}: Props) => {
   const language = useAppSelector(languageSelector);
 
   const logger = useLogger('system');
   const dispatch = useAppDispatch();
+  const { handlePreselectedImage } = usePreselectedImage();
   const handleReset = useCallback(() => {
     localStorage.clear();
     location.reload();
@@ -51,6 +61,10 @@ const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
     dispatch(appStarted());
   }, [dispatch]);
 
+  useEffect(() => {
+    handlePreselectedImage(selectedImage);
+  }, [handlePreselectedImage, selectedImage]);
+
   return (
     <ErrorBoundary
       onReset={handleReset}

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

@@ -26,6 +26,10 @@ interface Props extends PropsWithChildren {
   headerComponent?: ReactNode;
   middleware?: Middleware[];
   projectId?: string;
+  selectedImage?: {
+    imageName: string;
+    action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
+  };
 }
 
 const InvokeAIUI = ({
@@ -35,6 +39,7 @@ const InvokeAIUI = ({
   headerComponent,
   middleware,
   projectId,
+  selectedImage,
 }: Props) => {
   useEffect(() => {
     // configure API client token
@@ -81,7 +86,11 @@ const InvokeAIUI = ({
         <React.Suspense fallback={<Loading />}>
           <ThemeLocaleProvider>
             <AppDndContext>
-              <App config={config} headerComponent={headerComponent} />
+              <App
+                config={config}
+                headerComponent={headerComponent}
+                selectedImage={selectedImage}
+              />
             </AppDndContext>
           </ThemeLocaleProvider>
         </React.Suspense>

invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts

@@ -0,0 +1,81 @@
+import { skipToken } from '@reduxjs/toolkit/dist/query';
+import { t } from 'i18next';
+import { useCallback, useState } from 'react';
+import { useAppToaster } from '../../../app/components/Toaster';
+import { useAppDispatch } from '../../../app/store/storeHooks';
+import {
+  useGetImageDTOQuery,
+  useGetImageMetadataQuery,
+} from '../../../services/api/endpoints/images';
+import { setInitialCanvasImage } from '../../canvas/store/canvasSlice';
+import { setActiveTab } from '../../ui/store/uiSlice';
+import { initialImageSelected } from '../store/actions';
+import { useRecallParameters } from './useRecallParameters';
+
+type SelectedImage = {
+  imageName: string;
+  action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
+};
+
+export const usePreselectedImage = () => {
+  const dispatch = useAppDispatch();
+  const [imageNameForDto, setImageNameForDto] = useState<string | undefined>();
+  const [imageNameForMetadata, setImageNameForMetadata] = useState<
+    string | undefined
+  >();
+  const { recallAllParameters } = useRecallParameters();
+  const toaster = useAppToaster();
+
+  const { currentData: selectedImageDto } = useGetImageDTOQuery(
+    imageNameForDto ?? skipToken
+  );
+
+  const { currentData: selectedImageMetadata } = useGetImageMetadataQuery(
+    imageNameForMetadata ?? skipToken
+  );
+
+  const handlePreselectedImage = useCallback(
+    (selectedImage?: SelectedImage) => {
+      if (!selectedImage) {
+        return;
+      }
+
+      if (selectedImage.action === 'sendToCanvas') {
+        setImageNameForDto(selectedImage?.imageName);
+        if (selectedImageDto) {
+          dispatch(setInitialCanvasImage(selectedImageDto));
+          dispatch(setActiveTab('unifiedCanvas'));
+          toaster({
+            title: t('toast.sentToUnifiedCanvas'),
+            status: 'info',
+            duration: 2500,
+            isClosable: true,
+          });
+        }
+      }
+
+      if (selectedImage.action === 'sendToImg2Img') {
+        setImageNameForDto(selectedImage?.imageName);
+        if (selectedImageDto) {
+          dispatch(initialImageSelected(selectedImageDto));
+        }
+      }
+
+      if (selectedImage.action === 'useAllParameters') {
+        setImageNameForMetadata(selectedImage?.imageName);
+        if (selectedImageMetadata) {
+          recallAllParameters(selectedImageMetadata.metadata);
+        }
+      }
+    },
+    [
+      dispatch,
+      selectedImageDto,
+      selectedImageMetadata,
+      recallAllParameters,
+      toaster,
+    ]
+  );
+
+  return { handlePreselectedImage };
+};