diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx
index 2d878d96e7..a91f24f544 100644
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@@ -16,6 +16,7 @@ import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterM
import { configChanged } from 'features/system/store/configSlice';
import { languageSelector } from 'features/system/store/systemSelectors';
import InvokeTabs from 'features/ui/components/InvokeTabs';
+import type { InvokeTabName } from 'features/ui/store/tabMap';
import { AnimatePresence } from 'framer-motion';
import i18n from 'i18n';
import { size } from 'lodash-es';
@@ -24,6 +25,7 @@ import { ErrorBoundary } from 'react-error-boundary';
import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
import AppErrorBoundaryFallback from './AppErrorBoundaryFallback';
+import Destination from './Destination';
import PreselectedImage from './PreselectedImage';
const DEFAULT_CONFIG = {};
@@ -34,9 +36,10 @@ interface Props {
imageName: string;
action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
};
+ destination?: InvokeTabName | undefined;
}
-const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
+const App = ({ config = DEFAULT_CONFIG, selectedImage, destination }: Props) => {
const language = useAppSelector(languageSelector);
const logger = useLogger('system');
const dispatch = useAppDispatch();
@@ -96,6 +99,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
+
);
};
diff --git a/invokeai/frontend/web/src/app/components/Destination.tsx b/invokeai/frontend/web/src/app/components/Destination.tsx
new file mode 100644
index 0000000000..dd174ef8e8
--- /dev/null
+++ b/invokeai/frontend/web/src/app/components/Destination.tsx
@@ -0,0 +1,14 @@
+import { useDestination } from 'features/parameters/hooks/useDestination';
+import type { InvokeTabName } from 'features/ui/store/tabMap';
+import { memo } from 'react';
+
+type Props = {
+ destination: InvokeTabName | undefined;
+};
+
+const Destination = (props: Props) => {
+ useDestination(props.destination);
+ return null;
+};
+
+export default memo(Destination);
diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
index 1dd1a265fb..8b5dc4babc 100644
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
@@ -43,6 +43,7 @@ interface Props extends PropsWithChildren {
imageName: string;
action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
};
+ destination?: 'canvas' | 'workflows';
customStarUi?: CustomStarUi;
socketOptions?: Partial;
isDebugging?: boolean;
@@ -62,6 +63,7 @@ const InvokeAIUI = ({
projectUrl,
queueId,
selectedImage,
+ destination,
customStarUi,
socketOptions,
isDebugging = false,
@@ -218,7 +220,7 @@ const InvokeAIUI = ({
}>
-
+
diff --git a/invokeai/frontend/web/src/features/parameters/hooks/useDestination.ts b/invokeai/frontend/web/src/features/parameters/hooks/useDestination.ts
new file mode 100644
index 0000000000..159b96033a
--- /dev/null
+++ b/invokeai/frontend/web/src/features/parameters/hooks/useDestination.ts
@@ -0,0 +1,20 @@
+import { useAppDispatch } from 'app/store/storeHooks';
+import type { InvokeTabName } from 'features/ui/store/tabMap';
+import { setActiveTab } from 'features/ui/store/uiSlice';
+import { useCallback, useEffect } from 'react';
+
+export const useDestination = (destination: InvokeTabName | undefined) => {
+ const dispatch = useAppDispatch();
+
+ const handleSendToDestination = useCallback(() => {
+ if (destination) {
+ dispatch(setActiveTab(destination));
+ }
+ }, [dispatch, destination]);
+
+ useEffect(() => {
+ handleSendToDestination();
+ }, [destination, handleSendToDestination]);
+
+ return { handleSendToDestination };
+};