feat(ui): add button ref image layer empty state to pull bbox

Author: psychedelicious

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

@@ -1911,7 +1911,7 @@
         "resetGenerationSettings": "Reset Generation Settings",
         "replaceCurrent": "Replace Current",
         "controlLayerEmptyState": "<UploadButton>Upload an image</UploadButton>, drag an image from the <GalleryButton>gallery</GalleryButton> onto this layer, or draw on the canvas to get started.",
-        "referenceImageEmptyState": "<UploadButton>Upload an image</UploadButton> or drag an image from the <GalleryButton>gallery</GalleryButton> onto this layer to get started.",
+        "referenceImageEmptyState": "<UploadButton>Upload an image</UploadButton>, drag an image from the <GalleryButton>gallery</GalleryButton> onto this layer, or <PullBboxButton>pull the bounding box into this layer</PullBboxButton> to get started.",
         "warnings": {
             "problemsFound": "Problems found",
             "unsupportedModel": "layer not supported for selected base model",

invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterSettingsEmptyState.tsx

@@ -2,6 +2,7 @@ import { Button, Flex, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { usePullBboxIntoGlobalReferenceImage } from 'features/controlLayers/hooks/saveCanvasHooks';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import type { SetGlobalReferenceImageDndTargetData } from 'features/dnd/dnd';
 import { setGlobalReferenceImageDndTarget } from 'features/dnd/dnd';
@@ -27,6 +28,7 @@ export const IPAdapterSettingsEmptyState = memo(() => {
   const onClickGalleryButton = useCallback(() => {
     dispatch(activeTabCanvasRightPanelChanged('gallery'));
   }, [dispatch]);
+  const pullBboxIntoIPAdapter = usePullBboxIntoGlobalReferenceImage(entityIdentifier);
 
   const dndTargetData = useMemo<SetGlobalReferenceImageDndTargetData>(
     () => setGlobalReferenceImageDndTarget.getData({ entityIdentifier }),
@@ -41,8 +43,11 @@ export const IPAdapterSettingsEmptyState = memo(() => {
       GalleryButton: (
         <Button onClick={onClickGalleryButton} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
       ),
+      PullBboxButton: (
+        <Button onClick={pullBboxIntoIPAdapter} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
+      ),
     }),
-    [isBusy, onClickGalleryButton, uploadApi]
+    [isBusy, onClickGalleryButton, pullBboxIntoIPAdapter, uploadApi]
   );
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettingsEmptyState.tsx

@@ -2,6 +2,7 @@ import { Button, Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { usePullBboxIntoRegionalGuidanceReferenceImage } from 'features/controlLayers/hooks/saveCanvasHooks';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { rgIPAdapterDeleted } from 'features/controlLayers/store/canvasSlice';
 import type { SetRegionalGuidanceReferenceImageDndTargetData } from 'features/dnd/dnd';
@@ -36,6 +37,7 @@ export const RegionalGuidanceIPAdapterSettingsEmptyState = memo(({ referenceImag
   const onDeleteIPAdapter = useCallback(() => {
     dispatch(rgIPAdapterDeleted({ entityIdentifier, referenceImageId }));
   }, [dispatch, entityIdentifier, referenceImageId]);
+  const pullBboxIntoIPAdapter = usePullBboxIntoRegionalGuidanceReferenceImage(entityIdentifier, referenceImageId);
 
   const dndTargetData = useMemo<SetRegionalGuidanceReferenceImageDndTargetData>(
     () =>
@@ -46,6 +48,21 @@ export const RegionalGuidanceIPAdapterSettingsEmptyState = memo(({ referenceImag
     [entityIdentifier, referenceImageId]
   );
 
+  const components = useMemo(
+    () => ({
+      UploadButton: (
+        <Button isDisabled={isBusy} size="sm" variant="link" color="base.300" {...uploadApi.getUploadButtonProps()} />
+      ),
+      GalleryButton: (
+        <Button onClick={onClickGalleryButton} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
+      ),
+      PullBboxButton: (
+        <Button onClick={pullBboxIntoIPAdapter} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
+      ),
+    }),
+    [isBusy, onClickGalleryButton, pullBboxIntoIPAdapter, uploadApi]
+  );
+
   return (
     <Flex flexDir="column" gap={2} position="relative" w="full">
       <Flex alignItems="center" gap={2}>
@@ -66,23 +83,7 @@ export const RegionalGuidanceIPAdapterSettingsEmptyState = memo(({ referenceImag
       </Flex>
       <Flex alignItems="center" gap={2} p={4}>
         <Text textAlign="center" color="base.300">
-          <Trans
-            i18nKey="controlLayers.referenceImageEmptyState"
-            components={{
-              UploadButton: (
-                <Button
-                  isDisabled={isBusy}
-                  size="sm"
-                  variant="link"
-                  color="base.300"
-                  {...uploadApi.getUploadButtonProps()}
-                />
-              ),
-              GalleryButton: (
-                <Button onClick={onClickGalleryButton} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
-              ),
-            }}
-          />
+          <Trans i18nKey="controlLayers.referenceImageEmptyState" components={components} />
         </Text>
       </Flex>
       <input {...uploadApi.getUploadInputProps()} />