diff --git a/src/hooks/use-deferred-request.ts b/src/hooks/use-deferred-request.ts new file mode 100644 index 00000000..97ae3719 --- /dev/null +++ b/src/hooks/use-deferred-request.ts @@ -0,0 +1,18 @@ +import { useRequest } from 'ahooks'; + +export default function useDeferredRequest

( + requestFn: (...args: P) => Promise, + delay = 100 +) { + return useRequest( + async (...args: P) => { + await new Promise((resolve) => { + setTimeout(resolve, delay); + }); + return await requestFn(...args); + }, + { + manual: true + } + ); +} diff --git a/src/pages/llmodels/components/deploy-modal.tsx b/src/pages/llmodels/components/deploy-modal.tsx index df6ee1c1..596c0a8c 100644 --- a/src/pages/llmodels/components/deploy-modal.tsx +++ b/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 = (props) => { cancelEvaluate, unlockWarningStatus, handleOnValuesChange: handleOnValuesChangeBefore, - handleEvaluateOnChange, clearCahceFormValues, warningStatus, submitAnyway @@ -133,6 +133,11 @@ const AddModal: FC = (props) => { }); const requestModelIdRef = useRef(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 = (props) => { return categories || null; }; - 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); - - await new Promise((resolve) => { - setTimeout(() => { - resolve(true); - }, 0); - }); - - // evaluate the form data when select a model file - if (item.fakeName) { + const { run: onSelectFile } = useDeferredRequest( + async (item: any, modelInfo: any) => { unlockWarningStatus(); const evaluateRes = await handleOnValuesChangeBefore?.({ @@ -245,6 +226,31 @@ const AddModal: FC = (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 = (props) => { } ); - await new Promise((resolve) => { - setTimeout(() => { - resolve(true); - }, 0); - }); - if (item.isGGUF) { - modelFileRef.current?.fetchModelFiles?.(); + fetchModelFiles(); } }; diff --git a/src/pages/llmodels/components/hf-model-file.tsx b/src/pages/llmodels/components/hf-model-file.tsx index 39dd52a3..e7e71dbf 100644 --- a/src/pages/llmodels/components/hf-model-file.tsx +++ b/src/pages/llmodels/components/hf-model-file.tsx @@ -335,7 +335,6 @@ const HFModelFile: React.FC = forwardRef((props, ref) => { useEffect(() => { if (!props.selectedModel.name) { setDataSource({ fileList: [], loading: false }); - handleSelectModelFile({}); } }, [props.selectedModel?.name]); diff --git a/src/pages/llmodels/components/hf-model-item.tsx b/src/pages/llmodels/components/hf-model-item.tsx index a5f2c1fb..13812591 100644 --- a/src/pages/llmodels/components/hf-model-item.tsx +++ b/src/pages/llmodels/components/hf-model-item.tsx @@ -29,7 +29,6 @@ const HFModelItem: React.FC = (props) => { return (

= (props) => { className={classNames('hf-model-file', { active: active })} - tabIndex={0} onClick={() => handleSelectModelFile(item)} >
{item.path}
diff --git a/src/pages/llmodels/components/search-model.tsx b/src/pages/llmodels/components/search-model.tsx index 98a308c8..437b1ffe 100644 --- a/src/pages/llmodels/components/search-model.tsx +++ b/src/pages/llmodels/components/search-model.tsx @@ -142,7 +142,7 @@ const SearchModel: React.FC = (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 = (props) => { const resultList = list.map((item, index) => { return { ...item, + evaluated: true, evaluateResult: evaluations[index] || null }; });