feat: ✨ "Remix Image" option on images (#5553)

* feat: ✨ "Remix Image" option on images

Adds a new "remix image" option where applicable, recalls all metadata except the seed

* refactor: 🚨 lint code

* feat: ✨ "Remix Image" option on images

Adds a new "remix image" option where applicable, recalls all metadata except the seed

* refactor: 🚨 lint code

* feat: ✨ add new remix hotkey to hotkeys modal

---------

Co-authored-by: psychedelicious <[email protected]>

Author: joshistoast

invokeai/frontend/web/public/locales/en.json

@@ -600,6 +600,10 @@
             "desc": "Send current image to Image to Image",
             "title": "Send To Image To Image"
         },
+        "remixImage": {
+            "desc": "Use all parameters except seed from the current image",
+            "title": "Remix image"
+        },
         "setParameters": {
             "desc": "Use all parameters of the current image",
             "title": "Set Parameters"
@@ -1216,6 +1220,7 @@
         "useCpuNoise": "Use CPU Noise",
         "cpuNoise": "CPU Noise",
         "gpuNoise": "GPU Noise",
+        "remixImage": "Remix Image",
         "useInitImg": "Use Initial Image",
         "usePrompt": "Use Prompt",
         "useSeed": "Use Seed",

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

@@ -32,6 +32,7 @@ import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import {
+  PiArrowsCounterClockwiseBold,
   PiAsteriskBold,
   PiDotsThreeOutlineFill,
   PiFlowArrowBold,
@@ -129,6 +130,16 @@ const CurrentImageButtons = () => {
 
   useHotkeys('p', handleUsePrompt, [metadata]);
 
+  const handleRemixImage = useCallback(() => {
+    // Recalls all metadata parameters except seed
+    recallAllParameters({
+      ...metadata,
+      seed: undefined,
+    });
+  }, [metadata, recallAllParameters]);
+
+  useHotkeys('r', handleRemixImage, [metadata]);
+
   const handleUseSize = useCallback(() => {
     recallWidthAndHeight(metadata?.width, metadata?.height);
   }, [metadata?.width, metadata?.height, recallWidthAndHeight]);
@@ -231,6 +242,14 @@ const CurrentImageButtons = () => {
             onClick={handleLoadWorkflow}
             isLoading={getAndLoadEmbeddedWorkflowResult.isLoading}
           />
+          <IconButton
+            isLoading={isLoadingMetadata}
+            icon={<PiArrowsCounterClockwiseBold />}
+            tooltip={`${t('parameters.remixImage')} (R)`}
+            aria-label={`${t('parameters.remixImage')} (R)`}
+            isDisabled={!metadata?.positive_prompt}
+            onClick={handleRemixImage}
+          />
           <IconButton
             isLoading={isLoadingMetadata}
             icon={<PiQuotesBold />}

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

@@ -24,6 +24,7 @@ import { memo, useCallback } from 'react';
 import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import {
+  PiArrowsCounterClockwiseBold,
   PiAsteriskBold,
   PiCopyBold,
   PiDownloadSimpleBold,
@@ -127,6 +128,14 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
     recallAllParameters(metadata);
   }, [metadata, recallAllParameters]);
 
+  const handleRemixImage = useCallback(() => {
+    // Recalls all metadata parameters except seed
+    recallAllParameters({
+      ...metadata,
+      seed: undefined,
+    });
+  }, [metadata, recallAllParameters]);
+
   const handleChangeBoard = useCallback(() => {
     dispatch(imagesToChangeSelected([imageDTO]));
     dispatch(isModalOpenChanged(true));
@@ -187,6 +196,19 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
       >
         {t('nodes.loadWorkflow')}
       </MenuItem>
+      <MenuItem
+        icon={
+          isLoadingMetadata ? <SpinnerIcon /> : <PiArrowsCounterClockwiseBold />
+        }
+        onClickCapture={handleRemixImage}
+        isDisabled={
+          isLoadingMetadata ||
+          (metadata?.positive_prompt === undefined &&
+            metadata?.negative_prompt === undefined)
+        }
+      >
+        {t('parameters.remixImage')}
+      </MenuItem>
       <MenuItem
         icon={isLoadingMetadata ? <SpinnerIcon /> : <PiQuotesBold />}
         onClickCapture={handleRecallPrompt}

invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts

@@ -81,6 +81,11 @@ export const useHotkeyData = (): HotkeyGroup[] => {
     () => ({
       title: t('hotkeys.generalHotkeys'),
       hotkeyListItems: [
+        {
+          title: t('hotkeys.remixImage.title'),
+          desc: t('hotkeys.remixImage.desc'),
+          hotkeys: [['R']],
+        },
         {
           title: t('hotkeys.setPrompt.title'),
           desc: t('hotkeys.setPrompt.desc'),