💄 style: improve image preview style

package.json

@@ -51,6 +51,7 @@
     "@lobehub/chat-plugin-sdk": "^1",
     "@lobehub/chat-plugins-gateway": "^1",
     "@lobehub/ui": "latest",
+    "ahooks": "^3.7.8",
     "antd": "^5",
     "antd-style": "^3",
     "dayjs": "^1",
@@ -61,6 +62,7 @@
     "qs": "^6.11.2",
     "react": "^18",
     "react-dom": "^18",
+    "react-image-size": "^2.3.2",
     "react-layout-kit": "^1",
     "swr": "^2.2.4",
     "url-join": "^5.0.0",

src/app/page.tsx

@@ -21,7 +21,13 @@ const Page = memo(() => {
       padding={16}
       style={{ background: theme.colorBgLayout, height: '100vh' }}
     >
-      <App style={{ height: '100%', maxWidth: 1152, width: '100%' }} />
+      <App
+        style={{
+          height: '100%',
+          maxWidth: 1152,
+          width: '100%',
+        }}
+      />
     </Flexbox>
   );
 });

src/features/ImagePreview/index.tsx

@@ -0,0 +1,135 @@
+import { Image } from '@lobehub/ui';
+import { useSize } from 'ahooks';
+import { Progress, Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo, useEffect, useRef, useState } from 'react';
+import { Dimensions, getImageSize } from 'react-image-size';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { midjourneySelectors, useStore } from '@/store';
+
+interface Size extends Dimensions {
+  aspectRadio: number;
+}
+const fetchImageSize = async (url: string): Promise<Size | undefined> => {
+  try {
+    const dim = await getImageSize(url);
+    return { ...dim, aspectRadio: dim.width / dim.height };
+  } catch (error) {
+    console.log(error);
+    return;
+  }
+};
+
+const getContainerSize = (content?: Dimensions, container?: Dimensions) => {
+  if (!content || !container) return {};
+  let width = String(content?.width);
+  let height = String(content?.height);
+
+  const spacing = 24;
+  const maxWidth = container.width - spacing;
+  const maxHeight = container.height - spacing;
+
+  if (content?.height >= content?.width && content?.height >= maxHeight) {
+    height = maxHeight + 'px';
+    width = 'auto';
+  } else if (content?.width >= content?.height && content?.width >= maxWidth) {
+    height = 'auto';
+    width = maxWidth + 'px';
+  } else {
+    width = width + 'px';
+    height = height + 'px';
+  }
+
+  return { height, width };
+};
+const useStyles = createStyles(({ css, token, prefixCls }) => ({
+  container: css`
+    overflow: hidden;
+    background: ${token.colorFillTertiary};
+    border-radius: 24px;
+  `,
+  image: css`
+    border-radius: 24px;
+  `,
+  imageWrapper: css`
+    width: fit-content;
+    height: fit-content;
+    margin-block: 0;
+    border-radius: 24px;
+  `,
+  imagine: css`
+    .${prefixCls}-image-mask:hover {
+      opacity: 0;
+    }
+  `,
+}));
+
+const ImagePreview = memo(() => {
+  const [dim, setDims] = useState<Size>();
+  const containerRef = useRef(null);
+  const size = useSize(containerRef);
+
+  const [progress, taskLoading] = useStore((s) => [
+    midjourneySelectors.currentTaskProgress(s),
+    midjourneySelectors.isCurrentTaskRunning(s),
+  ]);
+
+  const { styles, cx, theme } = useStyles();
+  const currentTask = useStore(midjourneySelectors.currentActiveTask);
+
+  useEffect(() => {
+    const url = currentTask?.imageUrl;
+    if (!url) return;
+
+    fetchImageSize(url).then((size) => {
+      if (!size) return;
+      setDims(size);
+    });
+  }, [currentTask?.imageUrl]);
+
+  const imageContainerSize = getContainerSize(dim, size);
+
+  return (
+    (taskLoading || currentTask?.imageUrl) && (
+      <Flexbox
+        className={styles.container}
+        flex={1}
+        gap={8}
+        height={'calc(100vh - 80px - 64px - 8*2px - 2*16px )'}
+        padding={16}
+      >
+        {currentTask?.imageUrl ? (
+          <Center flex={1} height={'100%'} ref={containerRef} width={'100%'}>
+            <Image
+              className={styles.image}
+              src={currentTask.imageUrl}
+              {...imageContainerSize}
+              wrapperClassName={cx(
+                styles.imageWrapper,
+                currentTask.action === 'IMAGINE' && styles.imagine,
+              )}
+            />
+          </Center>
+        ) : (
+          <Center flex={1} height={'100%'} width={'100%'}>
+            <Skeleton.Node
+              active
+              style={{
+                borderRadius: 24,
+                color: theme.colorTextTertiary,
+                height: 600,
+                width: 600,
+              }}
+            >
+              Task is waiting to start...
+            </Skeleton.Node>
+          </Center>
+        )}
+        {progress !== 100 && <Progress percent={progress} />}
+      </Flexbox>
+    )
+  );
+});
+
+export default ImagePreview;

src/store/_mockdata.ts

@@ -117,5 +117,31 @@ export const mockState: AppState = {
       status: 'SUCCESS',
       submitTime: 1705305919492,
     },
+    {
+      action: 'IMAGINE',
+      description: '/imagine a pig',
+      failReason: null,
+      finishTime: 1705308864583,
+      id: '1705308810603472',
+      imageUrl:
+        'https://cdn.discordapp.com/attachments/1174150905801736255/1196376831666966548/meng1011_a_pig_5bc771d2-c51f-47e3-81b2-f38ce533bce1.png?ex=65b767c0&is=65a4f2c0&hm=ad4a45d6567193001d599e0f5b70efad059b1f1b51084082adf816a82e957398&',
+      progress: '100%',
+      prompt: 'a pig',
+      promptEn: 'a pig',
+      properties: {
+        discordInstanceId: '1174150905801736255',
+        finalPrompt: 'a pig --v 6.0 --s 250',
+        flags: 0,
+        messageHash: '5bc771d2-c51f-47e3-81b2-f38ce533bce1',
+        messageId: '1196376831885053974',
+        nonce: '1467925918029791232',
+        notifyHook: null,
+        progressMessageId: '1196376609402388550',
+      },
+      startTime: 1705308810604,
+      state: null,
+      status: 'SUCCESS',
+      submitTime: 1705308810603,
+    },
   ],
 };