fix(style): model readme img render

src/pages/llmodels/apis/index.ts

@@ -197,12 +197,12 @@ export async function queryModelScopeModelDetail(
 }
 
 export async function queryModelScopeModelFiles(
-  params: { name: string },
+  params: { name: string; revision: string },
   options?: any
 ) {
   const res = await fetch(
     `${MODE_SCOPE_MODEL_FIELS_API}${params.name}/repo/files?${qs.stringify({
-      Revision: 'master',
+      Revision: params.revision,
       Recursive: true,
       Root: ''
     })}`,

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(',')
         };
       });

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -321,7 +321,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         });
       }
       return list;
-    }, [modelList]);
+    }, [modelList, intl]);
 
     useEffect(() => {
       console.log('globalParams:', globalParams.model, globalParams);

src/pages/playground/components/params-settings.tsx

@@ -177,11 +177,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
                 }
               ]}
             >
-              <SealSelect
-                showSearch
-                options={modelList}
-                label={intl.formatMessage({ id: 'playground.model' })}
-              ></SealSelect>
+              <SealSelect showSearch options={modelList}></SealSelect>
             </Form.Item>
           </>
         )}