feat(ui): improve image overlay

invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx

@@ -0,0 +1,54 @@
+import { Badge, Flex } from '@chakra-ui/react';
+import { Image } from 'app/types/invokeai';
+import { isNumber, isString } from 'lodash-es';
+import { useMemo } from 'react';
+
+type ImageMetadataOverlayProps = {
+  image: Image;
+};
+
+const ImageMetadataOverlay = ({ image }: ImageMetadataOverlayProps) => {
+  const dimensions = useMemo(() => {
+    if (!isNumber(image.metadata?.width) || isNumber(!image.metadata?.height)) {
+      return;
+    }
+
+    return `${image.metadata?.width} × ${image.metadata?.height}`;
+  }, [image.metadata]);
+
+  const model = useMemo(() => {
+    if (!isString(image.metadata?.invokeai?.node?.model)) {
+      return;
+    }
+
+    return image.metadata?.invokeai?.node?.model;
+  }, [image.metadata]);
+
+  return (
+    <Flex
+      sx={{
+        pointerEvents: 'none',
+        flexDirection: 'column',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        p: 2,
+        alignItems: 'flex-end',
+        gap: 2,
+      }}
+    >
+      {dimensions && (
+        <Badge variant="solid" colorScheme="base">
+          {dimensions}
+        </Badge>
+      )}
+      {model && (
+        <Badge variant="solid" colorScheme="base">
+          {model}
+        </Badge>
+      )}
+    </Flex>
+  );
+};
+
+export default ImageMetadataOverlay;

invokeai/frontend/web/src/common/components/ImageToImageOverlay.tsx

@@ -1,37 +0,0 @@
-import { Badge, Box, Flex } from '@chakra-ui/react';
-import { Image } from 'app/types/invokeai';
-
-type ImageToImageOverlayProps = {
-  image: Image;
-};
-
-const ImageToImageOverlay = ({ image }: ImageToImageOverlayProps) => {
-  return (
-    <Box
-      sx={{
-        top: 0,
-        left: 0,
-        w: 'full',
-        h: 'full',
-        position: 'absolute',
-        pointerEvents: 'none',
-      }}
-    >
-      <Flex
-        sx={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          p: 2,
-          alignItems: 'flex-start',
-        }}
-      >
-        <Badge variant="solid" colorScheme="base">
-          {image.metadata?.width} × {image.metadata?.height}
-        </Badge>
-      </Flex>
-    </Box>
-  );
-};
-
-export default ImageToImageOverlay;

invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx

@@ -12,6 +12,7 @@ import CurrentImageHidden from './CurrentImageHidden';
 import { DragEvent, memo, useCallback } from 'react';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import ImageFallbackSpinner from './ImageFallbackSpinner';
+import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay';
 
 export const imagesSelector = createSelector(
   [uiSelector, gallerySelector, systemSelector],
@@ -89,20 +90,23 @@ const CurrentImagePreview = () => {
         />
       ) : (
         image && (
-          <Image
+          <>
-            src={getUrl(image.url)}
+            <Image
-            fallbackStrategy="beforeLoadOrError"
+              src={getUrl(image.url)}
-            fallback={<ImageFallbackSpinner />}
+              fallbackStrategy="beforeLoadOrError"
-            onDragStart={handleDragStart}
+              fallback={<ImageFallbackSpinner />}
-            sx={{
+              onDragStart={handleDragStart}
-              objectFit: 'contain',
+              sx={{
-              maxWidth: '100%',
+                objectFit: 'contain',
-              maxHeight: '100%',
+                maxWidth: '100%',
-              height: 'auto',
+                maxHeight: '100%',
-              position: 'absolute',
+                height: 'auto',
-              borderRadius: 'base',
+                position: 'absolute',
-            }}
+                borderRadius: 'base',
-          />
+              }}
+            />
+            <ImageMetadataOverlay image={image} />
+          </>
         )
       )}
       {shouldShowImageDetails && image && 'metadata' in image && (

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx

@@ -8,7 +8,7 @@ import { addToast } from 'features/system/store/systemSlice';
 import { DragEvent, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ImageType } from 'services/api';
-import ImageToImageOverlay from 'common/components/ImageToImageOverlay';
+import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
@@ -80,7 +80,7 @@ const InitialImagePreview = () => {
               borderRadius: 'base',
             }}
           />
-          <ImageToImageOverlay image={initialImage} />
+          <ImageMetadataOverlay image={initialImage} />
         </>
       )}
       {!initialImage?.url && <SelectImagePlaceholder />}