fix: adjust image size when paste

src/components/auto-image/index.tsx

@@ -0,0 +1,34 @@
+import { Image as AntImage, ImageProps } from 'antd';
+import { round } from 'lodash';
+import React, { useCallback, useEffect, useState } from 'react';
+
+const AutoImage: React.FC<ImageProps & { height: number }> = (props) => {
+  const { height = 100, ...rest } = props;
+  const [width, setWidth] = useState(0);
+
+  const getImgRatio = useCallback((url: string): Promise<{ ratio: number }> => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        resolve({ ratio: round(img.width / img.height, 2) });
+      };
+      img.onerror = () => {
+        resolve({ ratio: 1 });
+      };
+      img.src = url;
+    });
+  }, []);
+
+  const handleOnLoad = useCallback(async () => {
+    const { ratio } = await getImgRatio(props.src || '');
+    setWidth(height * ratio);
+  }, [getImgRatio, height, props.src]);
+
+  useEffect(() => {
+    handleOnLoad();
+  }, [handleOnLoad]);
+
+  return <AntImage {...rest} height={height} width={width} />;
+};
+
+export default AutoImage;

src/pages/llmodels/components/table-list.tsx

@@ -199,11 +199,11 @@ const Models: React.FC<ModelsProps> = ({
       key: 'chat',
       icon: <WechatWorkOutlined />
     },
-    {
+    // {
-      label: 'common.button.viewcode',
+    //   label: 'common.button.viewcode',
-      key: 'embedding',
+    //   key: 'embedding',
-      icon: <IconFont type="icon-code" />
+    //   icon: <IconFont type="icon-code" />
-    },
+    // },
     {
       label: 'common.button.delete',
       key: 'delete',
@@ -220,7 +220,10 @@ const Models: React.FC<ModelsProps> = ({
         return record.ready_replicas > 0 && !record.embedding_only;
       }
       if (action.key === 'embedding') {
-        return record.embedding_only && record.ready_replicas > 0;
+        return (
+          (record.embedding_only || record.reranker) &&
+          record.ready_replicas > 0
+        );
       }
       return true;
     });
@@ -523,27 +526,41 @@ const Models: React.FC<ModelsProps> = ({
                 <span
                   className="flex-center flex-wrap"
                   style={{
-                    maxWidth: '100%',
+                    maxWidth: '100%'
-                    lineHeight:
-                      record.reranker || record.embedding_only
-                        ? '24px'
-                        : 'inherit'
                   }}
                 >
                   <AutoTooltip ghost>
-                    <span className="m-r-5">{text}</span>
+                    <span>{text}</span>
                   </AutoTooltip>
                   {record.reranker && (
-                    <span className="font-size-0">
+                    <Tag
-                      <Tag style={{ margin: 0 }}>Reranker</Tag>
+                      style={{
-                    </span>
+                        margin: 0,
+                        position: 'absolute',
+                        bottom: '2px',
+                        left: 13,
+                        opacity: 0.8,
+                        transform: 'scale(0.9)'
+                      }}
+                      color="geekblue"
+                    >
+                      Reranker
+                    </Tag>
                   )}
                   {record.embedding_only && !record.reranker && (
-                    <span className="font-size-0">
+                    <Tag
-                      <Tag style={{ margin: 0 }} color="geekblue">
+                      style={{
-                        Embedding Only
+                        margin: 0,
-                      </Tag>
+                        position: 'absolute',
-                    </span>
+                        bottom: '2px',
+                        left: 13,
+                        opacity: 0.8,
+                        transform: 'scale(0.9)'
+                      }}
+                      color="geekblue"
+                    >
+                      Embedding Only
+                    </Tag>
                   )}
                 </span>
               );
@@ -556,8 +573,8 @@ const Models: React.FC<ModelsProps> = ({
             span={6}
             render={(text, record: ListItem) => {
               return (
-                <span className="flex flex-column">
+                <span className="flex flex-column" style={{ width: '100%' }}>
-                  <span>{generateSource(record)}</span>
+                  <AutoTooltip ghost>{generateSource(record)}</AutoTooltip>
                 </span>
               );
             }}
@@ -574,7 +591,7 @@ const Models: React.FC<ModelsProps> = ({
             }}
             render={(text, record: ListItem) => {
               return (
-                <span style={{ paddingLeft: 7 }}>
+                <span style={{ paddingLeft: 7, minWidth: '33px' }}>
                   {record.ready_replicas} / {record.replicas}
                 </span>
               );
@@ -589,7 +606,11 @@ const Models: React.FC<ModelsProps> = ({
             sortOrder={sortOrder}
             sorter={false}
             render={(text, row) => {
-              return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
+              return (
+                <AutoTooltip ghost>
+                  {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
+                </AutoTooltip>
+              );
             }}
           />
           <SealColumn

src/pages/playground/components/thumb-img.tsx

@@ -1,5 +1,5 @@
+import AutoImage from '@/components/auto-image';
 import { CloseCircleOutlined, EyeOutlined } from '@ant-design/icons';
-import { Image } from 'antd';
 import _ from 'lodash';
 import React, { useCallback } from 'react';
 import '../style/thumb-img.less';
@@ -32,10 +32,9 @@ const ThumbImg: React.FC<{
             }}
           >
             <span className="img">
-              <Image
+              <AutoImage
                 src={item.dataUrl}
-                width={item.width}
+                height={100}
-                height={item.height}
                 preview={{
                   mask: <EyeOutlined />
                 }}

src/pages/playground/components/upload-img.tsx

@@ -3,12 +3,11 @@ import { useIntl } from '@umijs/max';
 import { Button, Tooltip, Upload } from 'antd';
 import type { UploadFile } from 'antd/es/upload';
 import { RcFile } from 'antd/es/upload';
-import { debounce, round } from 'lodash';
+import { debounce } from 'lodash';
 import React, { useCallback, useRef } from 'react';
 
 interface UploadImgProps {
   size?: 'small' | 'middle' | 'large';
-  height?: number;
   handleUpdateImgList: (
     imgList: { dataUrl: string; uid: number | string }[]
   ) => void;
@@ -16,7 +15,6 @@ interface UploadImgProps {
 
 const UploadImg: React.FC<UploadImgProps> = ({
   handleUpdateImgList,
-  height = 100,
   size = 'small'
 }) => {
   const intl = useIntl();
@@ -38,22 +36,6 @@ const UploadImg: React.FC<UploadImgProps> = ({
     [handleUpdateImgList, intl]
   );
 
-  const getImgDimensions = useCallback(
-    (file: any): Promise<{ ratio: number }> => {
-      return new Promise((resolve) => {
-        const img = new Image();
-        img.onload = () => {
-          resolve({ ratio: round(img.width / img.height, 2) });
-        };
-        img.onerror = () => {
-          resolve({ ratio: 1 });
-        };
-        img.src = URL.createObjectURL(file);
-      });
-    },
-    []
-  );
-
   const handleChange = useCallback(
     async (info: any) => {
       const { fileList } = info;
@@ -62,12 +44,8 @@ const UploadImg: React.FC<UploadImgProps> = ({
         fileList.map(async (item: UploadFile) => {
           if (item.originFileObj && !item.url) {
             const base64 = await getBase64(item.originFileObj as RcFile);
-            const { ratio } = await getImgDimensions(
-              item.originFileObj as RcFile
-            );
 
             item.url = base64;
-            item.ratio = ratio;
           }
           return item;
         })
@@ -79,9 +57,7 @@ const UploadImg: React.FC<UploadImgProps> = ({
           .map((item: UploadFile) => {
             return {
               dataUrl: item.url as string,
-              uid: item.uid,
+              uid: item.uid
-              height: height,
-              width: height * item.ratio
             };
           });
 

src/pages/playground/style/thumb-img.less

@@ -1,8 +1,6 @@
 .thumb-img {
   position: relative;
   display: flex;
-  width: 56px;
-  height: 56px;
 
   .img {
     display: flex;

src/pages/resources/index.tsx

@@ -36,7 +36,7 @@ const Resources = () => {
         }}
         extra={[]}
       >
-        <div style={{ marginTop: 60 }}>
+        <div style={{ marginTop: 30 }}>
           <Tabs
             type="card"
             defaultActiveKey="workers"