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;