chore: drawer ux

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

@@ -1,11 +1,16 @@
 import { convertFileSize } from '@/utils';
 import { SearchOutlined } from '@ant-design/icons';
+import {
+  GGMLQuantizationType,
+  GGUF_QUANT_DESCRIPTIONS
+} from '@huggingface/gguf';
 import { Button, Col, Empty, Row, Space, Spin } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
 import { queryHuggingfaceModelFiles } from '../apis';
 import '../style/hf-model-file.less';
+import TitleWrapper from './title-wrapper';
 
 interface HFModelFileProps {
   repo: string;
@@ -36,7 +41,8 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
       const list = _.filter(res, (file: any) => {
         return _.endsWith(file.path, '.gguf');
       });
-      setDataSource({ fileList: list, loading: false });
+      const sortList = _.sortBy(list, (item: any) => item.size);
+      setDataSource({ fileList: sortList, loading: false });
       handleSelectModelFile(list[0]);
     } catch (error) {
       setDataSource({ fileList: [], loading: false });
@@ -44,55 +50,72 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
     }
   };
 
+  const getModelQuantizationType = (item: any) => {
+    const name = _.split(item.path, '.').slice(0, -1).join('.');
+    let quanType = _.toUpper(name.split('-').slice(-1)[0]);
+    if (quanType.indexOf('.') > -1) {
+      quanType = _.split(quanType, '.')[1];
+    }
+    if (_.get(GGUF_QUANT_DESCRIPTIONS, GGMLQuantizationType[quanType])) {
+      return <span className="tag-item">{quanType}</span>;
+    }
+    return null;
+  };
+
   useEffect(() => {
     handleFetchModelFiles();
   }, [props.repo]);
   return (
     <div>
-      <h3 className="flex-between font-size-14">
-        <span>Available Files({dataSource.fileList.length || 0})</span>
-      </h3>
-      <div>
-        <Spin spinning={dataSource.loading} style={{ minHeight: 100 }}></Spin>
-        {dataSource.fileList.length ? (
-          <Row gutter={[10, 10]}>
-            {_.map(dataSource.fileList, (item: any) => {
-              return (
-                <Col span={24} key={item.path}>
-                  <div
-                    className={classNames('hf-model-file', {
-                      active: item.path === current
-                    })}
-                    onClick={() => handleSelectModelFile(item)}
-                  >
-                    <div className="title">{item.path}</div>
-                    <Space className="tags">
-                      <span className="tag-item">
-                        {convertFileSize(item.size)}
-                      </span>
-                    </Space>
-                    <div className="btn">
-                      <Button size="middle">Install</Button>
+      <TitleWrapper>
+        <span>Available Files ({dataSource.fileList.length || 0})</span>
+      </TitleWrapper>
+      <div style={{ padding: '16px 20px' }}>
+        <Spin spinning={dataSource.loading} style={{ minHeight: 100 }}>
+          {dataSource.fileList.length ? (
+            <Row gutter={[16, 16]}>
+              {_.map(dataSource.fileList, (item: any) => {
+                return (
+                  <Col span={24} key={item.path}>
+                    <div
+                      tabIndex={0}
+                      className={classNames('hf-model-file', {
+                        active: item.path === current
+                      })}
+                      onClick={() => handleSelectModelFile(item)}
+                    >
+                      <div className="title">{item.path}</div>
+                      <Space className="tags">
+                        <span className="tag-item">
+                          {convertFileSize(item.size)}
+                        </span>
+                        {getModelQuantizationType(item)}
+                      </Space>
+                      <div className="btn">
+                        <Button size="middle">
+                          {item.path === current ? 'Selected' : 'Select'}
+                        </Button>
+                      </div>
                     </div>
-                  </div>
-                </Col>
-              );
-            })}
-          </Row>
-        ) : (
-          !dataSource.loading && (
-            <Empty
-              imageStyle={{ height: 'auto', marginTop: '20px' }}
-              image={
-                <SearchOutlined
-                  className="font-size-16"
-                  style={{ color: 'var(--ant-color-text-tertiary)' }}
-                ></SearchOutlined>
-              }
-              description="No models found"
-            />
-          )
-        )}
+                  </Col>
+                );
+              })}
+            </Row>
+          ) : (
+            !dataSource.loading && (
+              <Empty
+                imageStyle={{ height: 'auto', marginTop: '20px' }}
+                image={
+                  <SearchOutlined
+                    className="font-size-16"
+                    style={{ color: 'var(--ant-color-text-tertiary)' }}
+                  ></SearchOutlined>
+                }
+                description="No files found"
+              />
+            )
+          )}
+        </Spin>
       </div>
     </div>
   );