fix(style): model readme img render

src/pages/llmodels/components/gpu-card.tsx

@@ -1,3 +1,4 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import { convertFileSize } from '@/utils';
 import { useIntl } from '@umijs/max';
 import _ from 'lodash';
@@ -12,12 +13,12 @@ const GPUCard: React.FC<{
   const intl = useIntl();
   return (
     <div className="gpu-card">
-      <div className="header">
+      <div className="header" style={{ width: '100%' }}>
         {header ?? (
-          <>
+          <AutoTooltip ghost>
             {data.label}({data.worker_name})[
             {intl.formatMessage({ id: 'resources.table.index' })}:{data.index}]
-          </>
+          </AutoTooltip>
         )}
       </div>
       <div className="info">

src/pages/llmodels/components/hf-model-file.tsx

@@ -153,7 +153,8 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
     try {
       const data = await queryModelScopeModelFiles(
         {
-          name: props.selectedModel.name || ''
+          name: props.selectedModel.name || '',
+          revision: props.selectedModel.revision || 'master'
         },
         {
           signal: axiosTokenRef.current.signal

src/pages/llmodels/components/model-card.tsx

@@ -150,7 +150,10 @@ const ModelCard: React.FC<{
             target="_blank"
             href={`https://huggingface.co/${modelData?.id}`}
           >
-            <IconFont type="icon-external-link"></IconFont>
+            <IconFont
+              type="icon-external-link"
+              className="font-size-14"
+            ></IconFont>
           </Button>
         </Tooltip>
       );
@@ -165,7 +168,10 @@ const ModelCard: React.FC<{
             target="_blank"
             href={`https://modelscope.cn/models/${modelData?.name}`}
           >
-            <IconFont type="icon-external-link"></IconFont>
+            <IconFont
+              type="icon-external-link"
+              className="font-size-14"
+            ></IconFont>
           </Button>
         </Tooltip>
       );
@@ -173,6 +179,16 @@ const ModelCard: React.FC<{
     return null;
   };
 
+  const generateModeScopeImgLink = useCallback(
+    (imgSrc: string) => {
+      if (!imgSrc) {
+        return '';
+      }
+      return `https://modelscope.cn/api/v1/models/${modelData?.name}/repo?Revision=${modelData?.Revision}&View=true&FilePath=${imgSrc}`;
+    },
+    [modelData]
+  );
+
   useEffect(() => {
     getModelCardData();
   }, [props.selectedModel.name]);
@@ -240,6 +256,11 @@ const ModelCard: React.FC<{
                   }}
                 >
                   <MarkdownViewer
+                    generateImgLink={
+                      modelSource === modelSourceMap.modelscope_value
+                        ? generateModeScopeImgLink
+                        : undefined
+                    }
                     content={readmeText}
                     theme="light"
                   ></MarkdownViewer>
@@ -262,6 +283,11 @@ const ModelCard: React.FC<{
           <div className="card-wrapper">
             <Spin spinning={loading}>
               <MarkdownViewer
+                generateImgLink={
+                  modelSource === modelSourceMap.modelscope_value
+                    ? generateModeScopeImgLink
+                    : undefined
+                }
                 content={readmeText}
                 theme="light"
               ></MarkdownViewer>

src/pages/llmodels/components/search-model.tsx

@@ -118,6 +118,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
           likes: item.Stars,
           value: item.Name,
           label: item.Name,
+          revision: item.Revision,
           task: item.Tasks?.map((sItem: any) => sItem.Name).join(',')
         };
       });