fix: no request, search model

src/assets/styles/common.less

@@ -136,6 +136,10 @@
   position: relative;
 }
 
+.font-size-0 {
+  font-size: 0;
+}
+
 .font-size-12 {
   font-size: var(--font-size-base);
 }

src/components/seal-table/styles/cell.less

@@ -4,13 +4,14 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  height: 68px;
+  min-height: 68px;
   word-break: break-word;
   min-width: 20px;
   overflow: hidden;
 
   .cell-content {
     max-width: 100%;
+    line-height: 18px;
   }
 
   &-left {

src/global.less

@@ -65,6 +65,7 @@ html {
   --color-progress-green: rgba(84, 204, 152, 100%);
   --color-border-1: rgba(217, 217, 217, 100%);
   --ant-rate-star-color: #fadb14;
+  --color-fill-mask: rgba(255, 255, 255, 60%);
   // ======== input ============
   --ant-input-active-shadow: 0 0 0 2px rgba(5, 255, 105, 6%);
   --ant-input-active-border-color: #007bff;

src/pages/llmodels/components/deploy-modal.tsx

@@ -3,6 +3,7 @@ import { PageActionType } from '@/config/types';
 import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Drawer } from 'antd';
+import { debounce } from 'lodash';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { modelSourceMap } from '../config';
 import { FormData, ListItem } from '../config/types';
@@ -53,6 +54,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   }, []);
 
   const handleOnSelectModel = (item: any) => {
+    handleSelectModelFile({ fakeName: '' });
     setSelectedModel(item);
   };
 
@@ -60,12 +62,14 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     form.current?.submit?.();
   };
 
+  const debounceFetchModelFiles = debounce(() => {
+    modelFileRef.current?.fetchModelFiles?.();
+  }, 300);
+
   const handleSetIsGGUF = (flag: boolean) => {
     setIsGGUF(flag);
     if (flag) {
-      setTimeout(() => {
+      debounceFetchModelFiles();
-        modelFileRef.current?.fetchModelFiles?.();
-      }, 50);
     }
   };
 

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

@@ -261,7 +261,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
   }, []);
 
   return (
-    <div>
+    <div className="files-wrap">
       <TitleWrapper>
         <span className="title">
           {intl.formatMessage({ id: 'models.available.files' })} (
@@ -282,83 +282,89 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
           style={{ width: '120px' }}
         ></Select>
       </TitleWrapper>
+      {dataSource.loading && (
+        <div className="spin-wrapper">
+          <Spin
+            spinning={dataSource.loading}
+            style={{ height: '100%', width: '100%' }}
+          ></Spin>
+        </div>
+      )}
       <SimpleBar
         style={{
           height: collapsed ? 'max-content' : 'calc(100vh - 300px)'
         }}
       >
         <div style={{ padding: '16px 24px' }}>
-          <Spin spinning={dataSource.loading} style={{ minHeight: 100 }}>
+          {dataSource.fileList.length ? (
-            {dataSource.fileList.length ? (
+            <Row gutter={[16, 24]}>
-              <Row gutter={[16, 24]}>
+              {_.map(dataSource.fileList, (item: any) => {
-                {_.map(dataSource.fileList, (item: any) => {
+                return (
-                  return (
+                  <Col span={24} key={item.path}>
-                    <Col span={24} key={item.path}>
+                    <div
-                      <div
+                      className={classNames('hf-model-file', {
-                        className={classNames('hf-model-file', {
+                        active: item.path === current
-                          active: item.path === current
+                      })}
-                        })}
+                      tabIndex={0}
-                        tabIndex={0}
+                      onClick={() => handleSelectModelFile(item)}
-                        onClick={() => handleSelectModelFile(item)}
+                      onKeyDown={(e) => handleOnEnter(e, item)}
-                        onKeyDown={(e) => handleOnEnter(e, item)}
+                    >
-                      >
+                      <div className="title">{item.path}</div>
-                        <div className="title">{item.path}</div>
+                      <div className="tags">
-                        <div className="tags">
+                        <Tag
-                          <Tag
+                          className="tag-item"
-                            className="tag-item"
+                          color="green"
-                            color="green"
+                          style={{
-                            style={{
+                            marginRight: 0
-                              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
                             }}
+                            title={
+                              <FileParts fileList={item.parts}></FileParts>
+                            }
                           >
-                            <span style={{ opacity: 0.65 }}>
+                            <Tag
-                              {convertFileSize(item.size)}
+                              className="tag-item"
-                            </span>
+                              color="purple"
-                          </Tag>
+                              style={{
-                          {getModelQuantizationType(item)}
+                                marginRight: 0
-                          {item.parts && item.parts.length > 1 && (
-                            <Tooltip
-                              overlayInnerStyle={{
-                                width: 180,
-                                padding: 0
                               }}
-                              title={
-                                <FileParts fileList={item.parts}></FileParts>
-                              }
                             >
-                              <Tag
+                              <span style={{ opacity: 1 }}>
-                                className="tag-item"
+                                <InfoCircleOutlined className="m-r-5" />
-                                color="purple"
+                                {item.parts.length} parts
-                                style={{
+                              </span>
-                                  marginRight: 0
+                            </Tag>
-                                }}
+                          </Tooltip>
-                              >
+                        )}
-                                <span style={{ opacity: 1 }}>
-                                  <InfoCircleOutlined className="m-r-5" />
-                                  {item.parts.length} parts
-                                </span>
-                              </Tag>
-                            </Tooltip>
-                          )}
-                        </div>
                       </div>
-                    </Col>
+                    </div>
-                  );
+                  </Col>
+                );
+              })}
+            </Row>
+          ) : (
+            !dataSource.loading &&
+            !dataSource.fileList.length && (
+              <Empty
+                imageStyle={{ height: 'auto', marginTop: '20px' }}
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                description={intl.formatMessage({
+                  id: 'models.search.nofiles'
                 })}
-              </Row>
+              />
-            ) : (
+            )
-              !dataSource.loading &&
+          )}
-              !dataSource.fileList.length && (
-                <Empty
-                  imageStyle={{ height: 'auto', marginTop: '20px' }}
-                  image={Empty.PRESENTED_IMAGE_SIMPLE}
-                  description={intl.formatMessage({
-                    id: 'models.search.nofiles'
-                  })}
-                />
-              )
-            )}
-          </Spin>
         </div>
       </SimpleBar>
     </div>

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

@@ -136,7 +136,6 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
       }
       axiosTokenRef.current?.abort?.();
       axiosTokenRef.current = new AbortController();
-      if (dataSource.loading) return;
       const sort = sortType ?? dataSource.sortType;
       try {
         setDataSource((pre) => {
@@ -208,7 +207,6 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
   };
 
   const handleFilterGGUFChange = (e: any) => {
-    console.log('filterggufChange:', e.target.checked);
     filterGGUFRef.current = e.target.checked;
     handleOnSearchRepo();
   };

src/pages/llmodels/components/table-list.tsx

@@ -522,20 +522,24 @@ const Models: React.FC<ModelsProps> = ({
               return (
                 <span
                   className="flex-center flex-wrap"
-                  style={{ maxWidth: '100%' }}
+                  style={{
+                    maxWidth: '100%',
+                    lineHeight:
+                      record.reranker || record.embedding_only
+                        ? '24px'
+                        : 'inherit'
+                  }}
                 >
                   <AutoTooltip ghost>
                     <span className="m-r-5">{text}</span>
                   </AutoTooltip>
                   {record.reranker && (
-                    <span>
+                    <span className="font-size-0">
-                      <Tag style={{ margin: 0 }} color="geekblue">
+                      <Tag style={{ margin: 0 }}>Reranker</Tag>
-                        Reranker
-                      </Tag>
                     </span>
                   )}
                   {record.embedding_only && !record.reranker && (
-                    <span>
+                    <span className="font-size-0">
                       <Tag style={{ margin: 0 }} color="geekblue">
                         Embedding Only
                       </Tag>

src/pages/llmodels/style/hf-model-file.less

@@ -45,6 +45,23 @@
   }
 }
 
+.files-wrap {
+  position: relative;
+
+  .spin-wrapper {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 100%;
+    z-index: 100;
+    bottom: 0;
+    top: 0;
+    padding-top: 150px;
+    text-align: center;
+    background-color: var(--color-fill-mask);
+  }
+}
+
 .wrapper {
   padding: 16px @padding;
 }

src/pages/playground/components/thumb-img.tsx

@@ -23,12 +23,19 @@ const ThumbImg: React.FC<{
     <div className="thumb-list-wrap">
       {_.map(dataList, (item: any) => {
         return (
-          <span key={item.uid} className="thumb-img">
+          <span
+            key={item.uid}
+            className="thumb-img"
+            style={{
+              width: item.width,
+              height: item.height
+            }}
+          >
             <span className="img">
               <Image
                 src={item.dataUrl}
-                width={56}
+                width={item.width}
-                height={56}
+                height={item.height}
                 preview={{
                   mask: <EyeOutlined />
                 }}

src/pages/playground/components/upload-img.tsx

@@ -3,11 +3,12 @@ import { useIntl } from '@umijs/max';
 import { Button, Tooltip, Upload } from 'antd';
 import type { UploadFile } from 'antd/es/upload';
 import { RcFile } from 'antd/es/upload';
-import { debounce } from 'lodash';
+import { debounce, round } from 'lodash';
 import React, { useCallback, useRef } from 'react';
 
 interface UploadImgProps {
   size?: 'small' | 'middle' | 'large';
+  height?: number;
   handleUpdateImgList: (
     imgList: { dataUrl: string; uid: number | string }[]
   ) => void;
@@ -15,6 +16,7 @@ interface UploadImgProps {
 
 const UploadImg: React.FC<UploadImgProps> = ({
   handleUpdateImgList,
+  height = 100,
   size = 'small'
 }) => {
   const intl = useIntl();
@@ -36,6 +38,22 @@ const UploadImg: React.FC<UploadImgProps> = ({
     [handleUpdateImgList, intl]
   );
 
+  const getImgDimensions = useCallback(
+    (file: any): Promise<{ ratio: number }> => {
+      return new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => {
+          resolve({ ratio: round(img.width / img.height, 2) });
+        };
+        img.onerror = () => {
+          resolve({ ratio: 1 });
+        };
+        img.src = URL.createObjectURL(file);
+      });
+    },
+    []
+  );
+
   const handleChange = useCallback(
     async (info: any) => {
       const { fileList } = info;
@@ -44,7 +62,12 @@ const UploadImg: React.FC<UploadImgProps> = ({
         fileList.map(async (item: UploadFile) => {
           if (item.originFileObj && !item.url) {
             const base64 = await getBase64(item.originFileObj as RcFile);
+            const { ratio } = await getImgDimensions(
+              item.originFileObj as RcFile
+            );
+
             item.url = base64;
+            item.ratio = ratio;
           }
           return item;
         })
@@ -56,7 +79,9 @@ const UploadImg: React.FC<UploadImgProps> = ({
           .map((item: UploadFile) => {
             return {
               dataUrl: item.url as string,
-              uid: item.uid
+              uid: item.uid,
+              height: height,
+              width: height * item.ratio
             };
           });