fix: search file name by repo_id

src/components/seal-form/auto-complete.tsx

@@ -13,6 +13,7 @@ const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
     required,
     description,
     isInFormItems = true,
+    onSelect,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -48,8 +49,8 @@ const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
   const handleOnBlur = (e: any) => {
     if (!props.value) {
       setIsFocus(false);
-      props.onBlur?.(e);
     }
+    props.onBlur?.(e);
   };
 
   const handleSearch = (text: string) => {
@@ -57,7 +58,7 @@ const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
   };
 
   const handleOnSelect = (value: any, option: any) => {
-    props.onSelect?.(value, option);
+    onSelect?.(value, option);
   };
 
   return (

src/pages/llmodels/apis/index.ts

@@ -1,3 +1,4 @@
+import { listFiles } from '@huggingface/hub';
 import { request } from '@umijs/max';
 import {
   FormData,
@@ -115,11 +116,10 @@ export async function callHuggingfaceQuickSearch(params: any) {
   });
 }
 
-export async function queryHuggingfaceModelFiles(params: any) {
-  return request(
-    `https://huggingface.co/openbmb/MiniCPM-Llama3-V-2_5-gguf/tree/main`,
-    {
-      method: 'GET'
-    }
-  );
+export async function queryHuggingfaceModelFiles(params: { repo: string }) {
+  const result = [];
+  for await (const fileInfo of listFiles(params)) {
+    result.push(fileInfo);
+  }
+  return result;
 }

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

@@ -4,10 +4,14 @@ import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import { convertFileSize } from '@/utils';
 import { Form, Modal } from 'antd';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
-import { callHuggingfaceQuickSearch } from '../apis';
+import {
+  callHuggingfaceQuickSearch,
+  queryHuggingfaceModelFiles
+} from '../apis';
 import { FormData } from '../config/types';
 
 type AddModalProps = {
@@ -51,9 +55,41 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     console.log('repo change', value);
   };
 
-  const debounceSearch = _.debounce((text: string) => {
-    handleOnSearchRepo(text);
-  }, 300);
+  const fileNamLabel = (item: any) => {
+    return (
+      <span>
+        {item.path}
+        <span
+          style={{ color: 'var(--ant-color-text-tertiary)', marginLeft: '4px' }}
+        >
+          ({convertFileSize(item.size)})
+        </span>
+      </span>
+    );
+  };
+  const handleRepoSelect = async (repo: string) => {
+    try {
+      const res = await queryHuggingfaceModelFiles({ repo });
+      const list = _.filter(res, (file: any) => {
+        return _.endsWith(file.path, '.gguf');
+      }).map((item: any) => {
+        return {
+          label: fileNamLabel(item),
+          value: item.path,
+          size: item.size
+        };
+      });
+      setFileOptions(list);
+    } catch (error) {
+      setFileOptions([]);
+    }
+  };
+
+  const handleRepoOnBlur = (e: any) => {
+    const repo = form.getFieldValue('huggingface_repo_id');
+    console.log('repo blur', repo);
+    handleRepoSelect(repo);
+  };
 
   const handleOnSearchRepo = async (text: string) => {
     try {
@@ -74,6 +110,10 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     }
   };
 
+  const debounceSearch = _.debounce((text: string) => {
+    handleOnSearchRepo(text);
+  }, 300);
+
   const renderHuggingfaceFields = () => {
     return (
       <>
@@ -85,6 +125,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
             label="Repo ID"
             required
             showSearch
+            onBlur={handleRepoOnBlur}
             onChange={handleInputRepoChange}
             onSearch={debounceSearch}
             options={repoOptions}
@@ -94,7 +135,12 @@ const AddModal: React.FC<AddModalProps> = (props) => {
           name="huggingface_filename"
           rules={[{ required: true }]}
         >
-          <SealInput.Input label="File Name" required></SealInput.Input>
+          <SealAutoComplete
+            showSearch
+            label="File Name"
+            required
+            options={fileOptions}
+          ></SealAutoComplete>
         </Form.Item>
       </>
     );

src/utils/index.ts

@@ -11,3 +11,20 @@ export const handleBatchRequest = async (
 ) => {
   return Promise.all(list.map((item) => fn(item)));
 };
+
+export const convertFileSize = (sizeInBytes: number) => {
+  if (!sizeInBytes) {
+    return '0 B';
+  }
+  if (sizeInBytes < 1024) {
+    return `${sizeInBytes.toFixed(2)} B`;
+  } else if (sizeInBytes < 1024 * 1024) {
+    return `${(sizeInBytes / 1024).toFixed(2)} KB`;
+  } else if (sizeInBytes < 1024 * 1024 * 1024) {
+    return `${(sizeInBytes / (1024 * 1024)).toFixed(2)} MB`;
+  } else if (sizeInBytes < 1024 * 1024 * 1024 * 1024) {
+    return `${(sizeInBytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+  } else {
+    return `${(sizeInBytes / (1024 * 1024 * 1024 * 1024)).toFixed(2)} TB`;
+  }
+};