feat(ui): allow recall of prompt and seed on upscaling tab

Author: psychedelicious

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemMetadataRecallActions.tsx renamed to invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemMetadataRecallActionsCanvasGenerateTabs.tsx

@@ -17,7 +17,7 @@ import {
   PiRulerBold,
 } from 'react-icons/pi';
 
-export const ImageMenuItemMetadataRecallActions = memo(() => {
+export const ImageMenuItemMetadataRecallActionsCanvasGenerateTabs = memo(() => {
   const { t } = useTranslation();
   const subMenu = useSubMenu();
 
@@ -61,4 +61,5 @@ export const ImageMenuItemMetadataRecallActions = memo(() => {
   );
 });
 
-ImageMenuItemMetadataRecallActions.displayName = 'ImageMenuItemMetadataRecallActions';
+ImageMenuItemMetadataRecallActionsCanvasGenerateTabs.displayName =
+  'ImageMenuItemMetadataRecallActionsCanvasGenerateTabs';

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemMetadataRecallActionsUpscaleTab.tsx

@@ -0,0 +1,38 @@
+import { Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
+import { SubMenuButtonContent, useSubMenu } from 'common/hooks/useSubMenu';
+import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
+import { useRecallPrompts } from 'features/gallery/hooks/useRecallPrompts';
+import { useRecallSeed } from 'features/gallery/hooks/useRecallSeed';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiArrowBendUpLeftBold, PiPlantBold, PiQuotesBold } from 'react-icons/pi';
+
+export const ImageMenuItemMetadataRecallActionsUpscaleTab = memo(() => {
+  const { t } = useTranslation();
+  const subMenu = useSubMenu();
+
+  const imageDTO = useImageDTOContext();
+
+  const recallPrompts = useRecallPrompts(imageDTO);
+  const recallSeed = useRecallSeed(imageDTO);
+
+  return (
+    <MenuItem {...subMenu.parentMenuItemProps} icon={<PiArrowBendUpLeftBold />}>
+      <Menu {...subMenu.menuProps}>
+        <MenuButton {...subMenu.menuButtonProps}>
+          <SubMenuButtonContent label={t('parameters.recallMetadata')} />
+        </MenuButton>
+        <MenuList {...subMenu.menuListProps}>
+          <MenuItem icon={<PiQuotesBold />} onClick={recallPrompts.recall} isDisabled={!recallPrompts.isEnabled}>
+            {t('parameters.usePrompt')}
+          </MenuItem>
+          <MenuItem icon={<PiPlantBold />} onClick={recallSeed.recall} isDisabled={!recallSeed.isEnabled}>
+            {t('parameters.useSeed')}
+          </MenuItem>
+        </MenuList>
+      </Menu>
+    </MenuItem>
+  );
+});
+
+ImageMenuItemMetadataRecallActionsUpscaleTab.displayName = 'ImageMenuItemMetadataRecallActionsUpscaleTab';

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx

@@ -6,7 +6,7 @@ import { ImageMenuItemCopy } from 'features/gallery/components/ImageContextMenu/
 import { ImageMenuItemDelete } from 'features/gallery/components/ImageContextMenu/ImageMenuItemDelete';
 import { ImageMenuItemDownload } from 'features/gallery/components/ImageContextMenu/ImageMenuItemDownload';
 import { ImageMenuItemLoadWorkflow } from 'features/gallery/components/ImageContextMenu/ImageMenuItemLoadWorkflow';
-import { ImageMenuItemMetadataRecallActions } from 'features/gallery/components/ImageContextMenu/ImageMenuItemMetadataRecallActions';
+import { ImageMenuItemMetadataRecallActionsCanvasGenerateTabs } from 'features/gallery/components/ImageContextMenu/ImageMenuItemMetadataRecallActionsCanvasGenerateTabs';
 import { ImageMenuItemNewCanvasFromImageSubMenu } from 'features/gallery/components/ImageContextMenu/ImageMenuItemNewCanvasFromImageSubMenu';
 import { ImageMenuItemNewLayerFromImageSubMenu } from 'features/gallery/components/ImageContextMenu/ImageMenuItemNewLayerFromImageSubMenu';
 import { ImageMenuItemOpenInNewTab } from 'features/gallery/components/ImageContextMenu/ImageMenuItemOpenInNewTab';
@@ -21,6 +21,7 @@ import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo } from 'react';
 import type { ImageDTO } from 'services/api/types';
 
+import { ImageMenuItemMetadataRecallActionsUpscaleTab } from './ImageMenuItemMetadataRecallActionsUpscaleTab';
 import { ImageMenuItemUseAsPromptTemplate } from './ImageMenuItemUseAsPromptTemplate';
 
 type SingleSelectionMenuItemsProps = {
@@ -42,7 +43,8 @@ const SingleSelectionMenuItems = ({ imageDTO }: SingleSelectionMenuItemsProps) =
       </IconMenuItemGroup>
       <MenuDivider />
       <ImageMenuItemLoadWorkflow />
-      {(tab === 'canvas' || tab === 'generate') && <ImageMenuItemMetadataRecallActions />}
+      {(tab === 'canvas' || tab === 'generate') && <ImageMenuItemMetadataRecallActionsCanvasGenerateTabs />}
+      {tab === 'upscaling' && <ImageMenuItemMetadataRecallActionsUpscaleTab />}
       <MenuDivider />
       <ImageMenuItemSendToUpscale />
       <ImageMenuItemUseForPromptGeneration />

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

@@ -31,6 +31,7 @@ export const CurrentImageButtons = memo(({ imageDTO }: { imageDTO: ImageDTO }) =
   const { t } = useTranslation();
   const tab = useAppSelector(selectActiveTab);
   const isCanvasOrGenerateTab = tab === 'canvas' || tab === 'generate';
+  const isCanvasOrGenerateOrUpscalingTab = tab === 'canvas' || tab === 'generate' || tab === 'upscaling';
 
   const isUpscalingEnabled = useFeatureStatus('upscaling');
 
@@ -94,7 +95,7 @@ export const CurrentImageButtons = memo(({ imageDTO }: { imageDTO: ImageDTO }) =
           onClick={recallRemix.recall}
         />
       )}
-      {isCanvasOrGenerateTab && (
+      {isCanvasOrGenerateOrUpscalingTab && (
         <IconButton
           icon={<PiQuotesBold />}
           tooltip={`${t('parameters.usePrompt')} (P)`}
@@ -105,7 +106,7 @@ export const CurrentImageButtons = memo(({ imageDTO }: { imageDTO: ImageDTO }) =
           onClick={recallPrompts.recall}
         />
       )}
-      {isCanvasOrGenerateTab && (
+      {isCanvasOrGenerateOrUpscalingTab && (
         <IconButton
           icon={<PiPlantBold />}
           tooltip={`${t('parameters.useSeed')} (S)`}

invokeai/frontend/web/src/features/gallery/hooks/useRecallPrompts.ts

@@ -1,12 +1,15 @@
 import { useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { MetadataHandlers, MetadataUtils } from 'features/metadata/parsing';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import type { TabName } from 'features/ui/store/uiTypes';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
 import type { ImageDTO } from 'services/api/types';
 
 import { useClearStylePresetWithToast } from './useClearStylePresetWithToast';
 
+const ALLOWED_TABS: TabName[] = ['canvas', 'generate', 'upscaling'];
+
 export const useRecallPrompts = (imageDTO: ImageDTO) => {
   const store = useAppStore();
   const tab = useAppSelector(selectActiveTab);
@@ -43,7 +46,7 @@ export const useRecallPrompts = (imageDTO: ImageDTO) => {
       return false;
     }
 
-    if (tab !== 'canvas' && tab !== 'generate') {
+    if (!ALLOWED_TABS.includes(tab)) {
       return false;
     }
 

invokeai/frontend/web/src/features/gallery/hooks/useRecallSeed.ts

@@ -1,10 +1,13 @@
 import { useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { MetadataHandlers, MetadataUtils } from 'features/metadata/parsing';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import type { TabName } from 'features/ui/store/uiTypes';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
 import type { ImageDTO } from 'services/api/types';
 
+const ALLOWED_TABS: TabName[] = ['canvas', 'generate', 'upscaling'];
+
 export const useRecallSeed = (imageDTO: ImageDTO) => {
   const store = useAppStore();
   const tab = useAppSelector(selectActiveTab);
@@ -30,7 +33,7 @@ export const useRecallSeed = (imageDTO: ImageDTO) => {
       return false;
     }
 
-    if (tab !== 'canvas' && tab !== 'generate') {
+    if (!ALLOWED_TABS.includes(tab)) {
       return false;
     }