chore: compatibility api

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

@@ -1,10 +1,11 @@
+import { createAxiosToken } from '@/hooks/use-chunk-request';
 import { convertFileSize } from '@/utils';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Col, Empty, Row, Select, Spin, Tag, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
-import {
+import React, {
   forwardRef,
   memo,
   useCallback,
@@ -15,11 +16,16 @@ import {
 } from 'react';
 import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
-import { queryHuggingfaceModelFiles, queryModelScopeModelFiles } from '../apis';
+import {
+  evaluationsModelSpec,
+  queryHuggingfaceModelFiles,
+  queryModelScopeModelFiles
+} from '../apis';
 import { modelSourceMap } from '../config';
 import { getFileType } from '../config/file-type';
 import '../style/hf-model-file.less';
 import FileParts from './file-parts';
+import IncompatiableInfo from './incompatiable-info';
 import TitleWrapper from './title-wrapper';
 
 interface HFModelFileProps {
@@ -37,6 +43,35 @@ const filterReg = /\.(safetensors|gguf)$/i;
 const includeReg = /\.(safetensors|gguf)$/i;
 const filterRegGGUF = /\.(gguf)$/i;
 
+const FilePartsTag = (props: { parts: any[] }) => {
+  if (!props.parts || !props.parts.length) {
+    return null;
+  }
+  const { parts } = props;
+  return (
+    <Tooltip
+      overlayInnerStyle={{
+        width: 180,
+        padding: 0
+      }}
+      title={<FileParts fileList={parts}></FileParts>}
+    >
+      <Tag
+        className="tag-item"
+        color="purple"
+        style={{
+          marginRight: 0
+        }}
+      >
+        <span style={{ opacity: 1 }}>
+          <InfoCircleOutlined className="m-r-5" />
+          {parts.length} parts
+        </span>
+      </Tag>
+    </Tooltip>
+  );
+};
+
 const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
   const { collapsed, modelSource } = props;
   const intl = useIntl();
@@ -57,9 +92,9 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
     }
   ]);
   const axiosTokenRef = useRef<any>(null);
+  const checkTokenRef = useRef<any>(null);
 
   const handleSelectModelFile = (item: any) => {
-    console.log('handleSelectModelFile', item);
     props.onSelectFile?.(item);
     setCurrent(item.path);
   };
@@ -188,6 +223,24 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
     }
   };
 
+  const getEvaluateResults = useCallback(async (repoList: any[]) => {
+    try {
+      checkTokenRef.current?.cancel?.();
+      checkTokenRef.current = createAxiosToken();
+      const evaluations = await evaluationsModelSpec(
+        {
+          model_specs: repoList
+        },
+        {
+          token: checkTokenRef.current.token
+        }
+      );
+      return evaluations.results || [];
+    } catch (error) {
+      return [];
+    }
+  }, []);
+
   const handleFetchModelFiles = async () => {
     if (!props.selectedModel.name) {
       setDataSource({ fileList: [], loading: false });
@@ -211,8 +264,32 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
         return sortType === 'size' ? item.size : item.path;
       });
 
-      handleSelectModelFile(sortList[0]);
-      setDataSource({ fileList: sortList, loading: false });
+      const evaluateFileList = sortList.map((item: any) => {
+        return {
+          source: modelSource,
+          ...(modelSource === modelSourceMap.huggingface_value
+            ? {
+                huggingface_repo_id: props.selectedModel.name,
+                huggingface_filename: item.fakeName
+              }
+            : {
+                model_scope_model_id: props.selectedModel.name,
+                model_scope_file_path: item.fakeName
+              })
+        };
+      });
+
+      const evaluationList = await getEvaluateResults(evaluateFileList);
+
+      const resultList = _.map(sortList, (item: any, index: number) => {
+        return {
+          ...item,
+          evaluateResult: evaluationList[index]
+        };
+      });
+
+      handleSelectModelFile(resultList[0]);
+      setDataSource({ fileList: resultList, loading: false });
     } catch (error) {
       setDataSource({ fileList: [], loading: false });
       handleSelectModelFile({});
@@ -269,6 +346,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
   useEffect(() => {
     return () => {
       axiosTokenRef.current?.abort?.();
+      checkTokenRef.current?.cancel?.();
     };
   }, []);
 
@@ -322,43 +400,23 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
                       onKeyDown={(e) => handleOnEnter(e, item)}
                     >
                       <div className="title">{item.path}</div>
-                      <div className="tags">
-                        <Tag
-                          className="tag-item"
-                          color="green"
-                          style={{
-                            marginRight: 0
-                          }}
-                        >
-                          <span style={{ opacity: 0.65 }}>
-                            {convertFileSize(item.size)}
-                          </span>
-                        </Tag>
-                        {getModelQuantizationType(item)}
-                        {item.parts && item.parts.length > 1 && (
-                          <Tooltip
-                            overlayInnerStyle={{
-                              width: 180,
-                              padding: 0
+                      <div className="tags flex-between">
+                        <span className="flex-center gap-8">
+                          <Tag
+                            className="tag-item"
+                            color="green"
+                            style={{
+                              marginRight: 0
                             }}
-                            title={
-                              <FileParts fileList={item.parts}></FileParts>
-                            }
                           >
-                            <Tag
-                              className="tag-item"
-                              color="purple"
-                              style={{
-                                marginRight: 0
-                              }}
-                            >
-                              <span style={{ opacity: 1 }}>
-                                <InfoCircleOutlined className="m-r-5" />
-                                {item.parts.length} parts
-                              </span>
-                            </Tag>
-                          </Tooltip>
-                        )}
+                            {convertFileSize(item.size)}
+                          </Tag>
+                          {getModelQuantizationType(item)}
+                          <FilePartsTag parts={item.parts}></FilePartsTag>
+                        </span>
+                        <IncompatiableInfo
+                          data={item.evaluateResult}
+                        ></IncompatiableInfo>
                       </div>
                     </div>
                   </Col>