style: search models style

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

@@ -1,14 +1,16 @@
 import { convertFileSize } from '@/utils';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Col, Empty, Row, Select, Space, Spin, Tag } from 'antd';
+import { Col, Empty, Row, Select, Spin, Tag, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 import { queryHuggingfaceModelFiles } from '../apis';
 import FileType from '../config/file-type';
 import '../style/hf-model-file.less';
+import FileParts from './file-parts';
 import TitleWrapper from './title-wrapper';
 
 interface HFModelFileProps {
@@ -18,6 +20,8 @@ interface HFModelFileProps {
   onSelectFile?: (file: any) => void;
 }
 
+const pattern = /^(.*)-(\d+)-of-(\d+)\.gguf$/;
+
 const HFModelFile: React.FC<HFModelFileProps> = (props) => {
   const { collapsed, loadingModel } = props;
   const intl = useIntl();
@@ -44,6 +48,50 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
     setCurrent(item.path);
   };
 
+  const parseFilename = (filename: string) => {
+    const match = filename.match(pattern);
+
+    if (match) {
+      return {
+        filename: match[1],
+        part: parseInt(match[2], 10),
+        total: parseInt(match[3], 10)
+      };
+    } else {
+      return null;
+    }
+  };
+
+  const generateGroupByFilename = useCallback((list: any[]) => {
+    const data = _.find(list, (item: any) => {
+      const parsed = parseFilename(item.path);
+      return !!parsed;
+    });
+
+    // general file
+    if (!data) {
+      return list;
+    }
+
+    const newList = _.map(list, (item: any) => {
+      const parsed = parseFilename(item.path);
+      return {
+        ...item,
+        ...parsed
+      };
+    });
+
+    const group = _.groupBy(newList, 'filename');
+
+    return _.map(group, (value: any[], key: string) => {
+      return {
+        path: key,
+        size: _.sumBy(value, 'size'),
+        parts: value
+      };
+    });
+  }, []);
+
   const handleFetchModelFiles = async () => {
     if (!props.repo) {
       setDataSource({ fileList: [], loading: false });
@@ -68,11 +116,15 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
       const list = _.filter(fileList, (file: any) => {
         return _.endsWith(file.path, '.gguf') || _.includes(file.path, '.gguf');
       });
-      const sortList = _.sortBy(list, (item: any) => {
+
+      const newList = generateGroupByFilename(list);
+
+      console.log('newList==========', newList);
+      const sortList = _.sortBy(newList, (item: any) => {
         return sortType === 'size' ? item.size : item.path;
       });
       setDataSource({ fileList: sortList, loading: false });
-      handleSelectModelFile(list[0]);
+      handleSelectModelFile(sortList[0]);
     } catch (error) {
       setDataSource({ fileList: [], loading: false });
       handleSelectModelFile({});
@@ -87,22 +139,33 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
     setDataSource({ ...dataSource, fileList: list });
   };
 
-  const getModelQuantizationType = (item: any) => {
-    const name = _.split(item.path, '.').slice(0, -1).join('.');
+  const getModelQuantizationType = useCallback((item: any) => {
+    let itemPath = item.path;
+    let path = _.split(itemPath, '/').pop();
+
+    if (!_.endsWith(path, '.gguf') && !_.includes(path, '.gguf')) {
+      path = `${path}.gguf`;
+    }
+    const name = _.split(path, '.').slice(0, -1).join('.');
     let quanType = _.toUpper(name.split('-').slice(-1)[0]);
     if (quanType.indexOf('.') > -1) {
       quanType = _.split(quanType, '.').pop();
     }
-    console.log('quanType', quanType, FileType[quanType]);
     if (FileType[quanType] !== undefined) {
       return (
-        <Tag className="tag-item" color="cyan">
+        <Tag
+          className="tag-item"
+          color="cyan"
+          style={{
+            marginRight: 0
+          }}
+        >
           {quanType}
         </Tag>
       );
     }
     return null;
-  };
+  }, []);
 
   const handleOnEnter = (e: any, item: any) => {
     e.stopPropagation();
@@ -143,7 +206,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
         ></Select>
       </TitleWrapper>
       <SimpleBar
-        style={{ maxHeight: collapsed ? 'max-content' : 'calc(100vh - 330px)' }}
+        style={{ maxHeight: collapsed ? 'max-content' : 'calc(100vh - 300px)' }}
       >
         <div style={{ padding: '16px 24px' }}>
           <Spin
@@ -164,7 +227,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
                         onKeyDown={(e) => handleOnEnter(e, item)}
                       >
                         <div className="title">{item.path}</div>
-                        <Space className="tags">
+                        <div className="tags">
                           <Tag
                             className="tag-item"
                             color="green"
@@ -177,8 +240,32 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
                             </span>
                           </Tag>
                           {getModelQuantizationType(item)}
-                        </Space>
-                        <div className="btn"></div>
+                          {item.parts && item.parts.length > 1 && (
+                            <Tooltip
+                              color="var(--color-white-1)"
+                              overlayInnerStyle={{
+                                width: 150,
+                                color: 'var(--ant-color-text-secondary)'
+                              }}
+                              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>
+                          )}
+                        </div>
                       </div>
                     </Col>
                   );