fix: for gguf ref not be created, #2227

src/hooks/use-deferred-request.ts

@@ -0,0 +1,18 @@
+import { useRequest } from 'ahooks';
+
+export default function useDeferredRequest<P extends any[], R>(
+  requestFn: (...args: P) => Promise<R>,
+  delay = 100
+) {
+  return useRequest(
+    async (...args: P) => {
+      await new Promise((resolve) => {
+        setTimeout(resolve, delay);
+      });
+      return await requestFn(...args);
+    },
+    {
+      manual: true
+    }
+  );
+}

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

@@ -1,6 +1,7 @@
 import ModalFooter from '@/components/modal-footer';
 import GSDrawer from '@/components/scroller-modal/gs-drawer';
 import { PageActionType } from '@/config/types';
+import useDeferredRequest from '@/hooks/use-deferred-request';
 import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button } from 'antd';
@@ -111,7 +112,6 @@ const AddModal: FC<AddModalProps> = (props) => {
     cancelEvaluate,
     unlockWarningStatus,
     handleOnValuesChange: handleOnValuesChangeBefore,
-    handleEvaluateOnChange,
     clearCahceFormValues,
     warningStatus,
     submitAnyway
@@ -133,6 +133,11 @@ const AddModal: FC<AddModalProps> = (props) => {
   });
   const requestModelIdRef = useRef<number>(0);
 
+  const { run: fetchModelFiles } = useDeferredRequest(
+    () => modelFileRef.current?.fetchModelFiles?.(),
+    100
+  );
+
   /**
    * Update the request model id to distinguish
    * the evaluate request.
@@ -191,32 +196,8 @@ const AddModal: FC<AddModalProps> = (props) => {
     return categories || null;
   };
 
-  const handleSelectModelFile = async (item: any, requestModelId: number) => {
+  const { run: onSelectFile } = useDeferredRequest(
-    if (
+    async (item: any, modelInfo: any) => {
-      evaluateStateRef.current.state !== EvaluateProccess.file ||
-      requestModelId !== evaluateStateRef.current.requestModelId
-    ) {
-      return;
-    }
-    form.current?.form?.resetFields(resetFieldsByFile);
-    const modelInfo = onSelectModel(selectedModel, props.source);
-
-    form.current?.setFieldsValue?.({
-      ..._.omit(modelInfo, ['name']),
-      file_name: item.fakeName,
-      categories: getCategory(item)
-    });
-
-    console.log('handleSelectModelFile', item);
-
-    await new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(true);
-      }, 0);
-    });
-
-    // evaluate the form data when select a model file
-    if (item.fakeName) {
       unlockWarningStatus();
 
       const evaluateRes = await handleOnValuesChangeBefore?.({
@@ -245,6 +226,31 @@ const AddModal: FC<AddModalProps> = (props) => {
             : defaultSpec.backend_parameters || [],
         categories: getCategory(item)
       });
+    },
+    100
+  );
+
+  const handleSelectModelFile = async (item: any, requestModelId: number) => {
+    if (
+      evaluateStateRef.current.state !== EvaluateProccess.file ||
+      requestModelId !== evaluateStateRef.current.requestModelId
+    ) {
+      return;
+    }
+    form.current?.form?.resetFields(resetFieldsByFile);
+    const modelInfo = onSelectModel(selectedModel, props.source);
+
+    form.current?.setFieldsValue?.({
+      ..._.omit(modelInfo, ['name']),
+      file_name: item.fakeName,
+      categories: getCategory(item)
+    });
+
+    console.log('handleSelectModelFile', item);
+
+    // evaluate the form data when select a model file
+    if (item.fakeName) {
+      onSelectFile(item, modelInfo);
     }
   };
 
@@ -286,14 +292,8 @@ const AddModal: FC<AddModalProps> = (props) => {
       }
     );
 
-    await new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(true);
-      }, 0);
-    });
-
     if (item.isGGUF) {
-      modelFileRef.current?.fetchModelFiles?.();
+      fetchModelFiles();
     }
   };
 

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

@@ -335,7 +335,6 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
   useEffect(() => {
     if (!props.selectedModel.name) {
       setDataSource({ fileList: [], loading: false });
-      handleSelectModelFile({});
     }
   }, [props.selectedModel?.name]);
 

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

@@ -29,7 +29,6 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
 
   return (
     <div
-      tabIndex={0}
       className={classNames('hf-model-item', {
         active: props.active
       })}

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

@@ -174,8 +174,8 @@ const ModelCard: React.FC<{
       setModelData(null);
       setReadmeText(null);
       handleOnCollapse(null);
-      setIsGGUF(false);
+      // setIsGGUF(false);
-      setIsGGUFModel(false);
+      // setIsGGUFModel(false);
     }
   };
 
@@ -205,8 +205,8 @@ const ModelCard: React.FC<{
       setModelData(null);
       setReadmeText(null);
       handleOnCollapse(null);
-      setIsGGUF(false);
+      // setIsGGUF(false);
-      setIsGGUFModel(false);
+      // setIsGGUFModel(false);
     }
   };
 

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

@@ -79,7 +79,6 @@ const ModelFileItem: React.FC<ModelFileItemProps> = (props) => {
       className={classNames('hf-model-file', {
         active: active
       })}
-      tabIndex={0}
       onClick={() => handleSelectModelFile(item)}
     >
       <div className="title">{item.path}</div>

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

@@ -142,7 +142,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
 
   const handleOnSelectModel = (model: any) => {
     const item = model || {};
-    if (item.evaluateResult && !item.isGGUF) {
+    if (item.evaluated && !item.isGGUF) {
       onSelectModelAfterEvaluate(item);
     } else {
       onSelectModel(item);
@@ -326,6 +326,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
       const resultList = list.map((item, index) => {
         return {
           ...item,
+          evaluated: true,
           evaluateResult: evaluations[index] || null
         };
       });