fix: #2191,#2227

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

@@ -124,8 +124,12 @@ const AddModal: FC<AddModalProps> = (props) => {
   const [collapsed, setCollapsed] = useState<boolean>(false);
   const [isGGUF, setIsGGUF] = useState<boolean>(false);
   const modelFileRef = useRef<any>(null);
-  const evaluateStateRef = useRef<{ state: EvaluateProccessType }>({
+  const evaluateStateRef = useRef<{
-    state: 'form'
+    state: EvaluateProccessType;
+    requestModelId: number;
+  }>({
+    state: 'form',
+    requestModelId: 0
   });
   const requestModelIdRef = useRef<number>(0);
 
@@ -143,8 +147,20 @@ const AddModal: FC<AddModalProps> = (props) => {
    * @param state target to distinguish the evaluate state, current evaluate state
    *              can be 'model', 'file' or 'form'.
    */
-  const setEvaluteState = (state: EvaluateProccessType) => {
+  const setEvaluteState = (state: {
-    evaluateStateRef.current.state = state;
+    state: EvaluateProccessType;
+    requestModelId: number;
+  }) => {
+    evaluateStateRef.current = state;
+  };
+
+  const updateEvaluateState = (state: EvaluateProccessType) => {
+    const currentRequestModelId = evaluateStateRef.current.requestModelId;
+    setEvaluteState({
+      ...evaluateStateRef.current,
+      state
+    });
+    return currentRequestModelId;
   };
 
   const handleOnValuesChange = (data: {
@@ -152,7 +168,10 @@ const AddModal: FC<AddModalProps> = (props) => {
     allValues: any;
     source: SourceType;
   }) => {
-    setEvaluteState(EvaluateProccess.form);
+    setEvaluteState({
+      state: EvaluateProccess.form,
+      requestModelId: updateRequestModelId()
+    });
     handleOnValuesChangeBefore(data);
   };
 
@@ -172,7 +191,13 @@ const AddModal: FC<AddModalProps> = (props) => {
     return categories || null;
   };
 
-  const handleSelectModelFile = async (item: any) => {
+  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);
 
@@ -193,8 +218,6 @@ const AddModal: FC<AddModalProps> = (props) => {
     // evaluate the form data when select a model file
     if (item.fakeName) {
       unlockWarningStatus();
-      const currentModelId = updateRequestModelId();
-      setEvaluteState(EvaluateProccess.file);
 
       const evaluateRes = await handleOnValuesChangeBefore?.({
         changedValues: {},
@@ -202,11 +225,6 @@ const AddModal: FC<AddModalProps> = (props) => {
         source: props.source
       });
 
-      if (currentModelId !== requestModelIdRef.current) {
-        // if the request model id has changed, do not update the form
-        return;
-      }
-
       const defaultSpec = getDefaultSpec({
         evaluateResult: evaluateRes
       });
@@ -233,6 +251,7 @@ const AddModal: FC<AddModalProps> = (props) => {
   const handleOnSelectModel = async (item: any) => {
     // If the item is empty or the same as the selected model, do nothing
     console.log('handleOnSelectModel', item, selectedModel);
+    modelFileRef.current?.cancelRequest();
     if (
       _.isEmpty(item) ||
       (item.isGGUF === selectedModel.isGGUF && item.name === selectedModel.name)
@@ -242,7 +261,10 @@ const AddModal: FC<AddModalProps> = (props) => {
     setIsGGUF(item.isGGUF);
     clearCahceFormValues();
     unlockWarningStatus();
-    setEvaluteState(EvaluateProccess.model);
+    setEvaluteState({
+      state: EvaluateProccess.model,
+      requestModelId: updateRequestModelId()
+    });
     setSelectedModel(item);
 
     form.current?.form?.resetFields(resetFieldsByModel);
@@ -278,7 +300,13 @@ const AddModal: FC<AddModalProps> = (props) => {
   const handleOnSelectModelAfterEvaluate = (item: any) => {
     setIsGGUF(item.isGGUF);
     setSelectedModel(item);
+    setEvaluteState({
+      state: EvaluateProccess.model,
+      requestModelId: updateRequestModelId()
+    });
+    modelFileRef.current?.cancelRequest();
     const modelInfo = onSelectModel(item, props.source);
+
     if (
       evaluateStateRef.current.state === EvaluateProccess.model &&
       item.evaluateResult
@@ -473,6 +501,7 @@ const AddModal: FC<AddModalProps> = (props) => {
                       selectedModel={selectedModel}
                       modelSource={props.source}
                       onSelectFile={handleSelectModelFile}
+                      updateEvaluteState={updateEvaluateState}
                       collapsed={collapsed}
                       gpuOptions={props.gpuOptions}
                     ></HFModelFile>

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

@@ -41,7 +41,8 @@ interface HFModelFileProps {
   modelSource: string;
   ref: any;
   gpuOptions?: any[];
-  onSelectFile?: (file: any) => void;
+  onSelectFile?: (file: any, flagId: number) => void;
+  updateEvaluteState: (state: 'model' | 'form' | 'file') => number;
   onSelectFileAfterEvaluate?: (file: any) => void;
 }
 
@@ -52,8 +53,13 @@ const includeReg = /\.(safetensors|gguf)$/i;
 const filterRegGGUF = /\.(gguf)$/i;
 
 const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
-  const { collapsed, modelSource, isDownload, onSelectFileAfterEvaluate } =
+  const {
-    props;
+    collapsed,
+    modelSource,
+    isDownload,
+    updateEvaluteState,
+    onSelectFileAfterEvaluate
+  } = props;
   const intl = useIntl();
   const [isEvaluating, setIsEvaluating] = useState(false);
   const [dataSource, setDataSource] = useState<any>({
@@ -76,9 +82,10 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
   const axiosTokenRef = useRef<any>(null);
   const checkTokenRef = useRef<any>(null);
   const timer = useRef<any>(null);
+  const parentRequestModelId = useRef<number>(0);
 
   const handleSelectModelFile = (item: any) => {
-    props.onSelectFile?.(item);
+    props.onSelectFile?.(item, parentRequestModelId.current);
     setCurrent(item.path);
     currentPathRef.current = item.path;
   };
@@ -276,6 +283,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
       handleSelectModelFile({});
       return;
     }
+    parentRequestModelId.current = updateEvaluteState?.('file');
     checkTokenRef.current?.cancel?.();
     axiosTokenRef.current?.abort?.();
     axiosTokenRef.current = new AbortController();
@@ -311,8 +319,17 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
     setDataSource({ ...dataSource, fileList: list });
   };
 
+  const cancelRequest = () => {
+    axiosTokenRef.current?.abort?.();
+    checkTokenRef.current?.cancel?.();
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+  };
+
   useImperativeHandle(ref, () => ({
-    fetchModelFiles: handleFetchModelFiles
+    fetchModelFiles: handleFetchModelFiles,
+    cancelRequest: cancelRequest
   }));
 
   useEffect(() => {
@@ -324,11 +341,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
 
   useEffect(() => {
     return () => {
-      axiosTokenRef.current?.abort?.();
+      cancelRequest();
-      checkTokenRef.current?.cancel?.();
-      if (timer.current) {
-        clearTimeout(timer.current);
-      }
     };
   }, []);
 

src/pages/llmodels/hooks/index.ts

@@ -607,7 +607,7 @@ export const useCheckCompatibility = () => {
     unlockWarningStatus,
     cancelEvaluate,
     handleBackendChangeBefore,
-    handleOnValuesChange: debounceHandleValuesChange,
+    handleOnValuesChange: handleOnValuesChange,
     handleEvaluateOnChange: handleOnValuesChange,
     clearCahceFormValues,
     warningStatus,