chore: clear space onblur

src/pages/llmodels/forms/speculative-decode.tsx

@@ -4,19 +4,12 @@ import SealInputNumber from '@/components/seal-form/input-number';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import useAppUtils from '@/hooks/use-app-utils';
-import useDeferredRequest from '@/hooks/use-deferred-request';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
-import _ from 'lodash';
-import { useEffect, useRef, useState } from 'react';
-import {
-  queryDraftModelList,
-  queryHuggingfaceModels,
-  queryModelScopeModels
-} from '../apis';
-import { modelSourceMap } from '../config';
+import { useRef } from 'react';
 import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
+import useQueryDraftModels from '../hooks/use-query-draftModels';
 
 const AlgorithmMap = {
   Eagle3: 'eagle3',
@@ -34,144 +27,12 @@ const SpeculativeDecode = () => {
     form
   );
   const algorithm = Form.useWatch(['speculative_config', 'algorithm'], form);
-  const [draftModelList, setDraftModelList] = useState<
-    Global.BaseOption<string, { options: Global.BaseOption<string>[] }>[]
-  >([]);
-  const presetDraftModelListRef = useRef<Global.BaseOption<string>[]>([]);
   const speculativeConfigRef = useRef<any>({});
-  const axiosTokenRef = useRef<AbortController | null>(null);
-  const [loading, setLoading] = useState(false);
 
-  const fetchDraftModels = async () => {
-    const response = await queryDraftModelList({
-      page: 1,
-      perPage: 100
+  const { draftModelList, loading, resetDraftModels, onSearch } =
+    useQueryDraftModels({
+      source
     });
-    const options = response.items.map((item) => ({
-      label: item.name,
-      value: item.name
-    }));
-    presetDraftModelListRef.current = options;
-    setDraftModelList(options);
-  };
-
-  const getHuggingfaceModels = async (query: string) => {
-    if (axiosTokenRef.current) {
-      axiosTokenRef.current.abort();
-    }
-    axiosTokenRef.current = new AbortController();
-    try {
-      const params = {
-        limit: 10,
-        search: {
-          query: query
-        }
-      };
-      setLoading(true);
-      const data = await queryHuggingfaceModels(params, {
-        signal: axiosTokenRef.current.signal
-      });
-      const list = _.map(data || [], (item: any) => {
-        return {
-          value: item.name,
-          label: item.name
-        };
-      });
-
-      const catalogModelList =
-        presetDraftModelListRef.current.length > 0
-          ? [
-              {
-                label: `${intl.formatMessage({ id: 'models.form.source' })}: ${intl.formatMessage({ id: 'menu.models.modelCatalog' })}`,
-                title: `${intl.formatMessage({ id: 'models.form.source' })}: ${intl.formatMessage({ id: 'menu.models.modelCatalog' })}`,
-                options: presetDraftModelListRef.current || []
-              }
-            ]
-          : [];
-
-      setDraftModelList([
-        ...catalogModelList,
-        {
-          label: `${intl.formatMessage({ id: 'models.form.source' })}: Hugging Face`,
-          title: `${intl.formatMessage({ id: 'models.form.source' })}: Hugging Face`,
-          options: list
-        }
-      ]);
-    } catch (error) {
-      setDraftModelList(presetDraftModelListRef.current);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const getModelScopeModels = async (query: string) => {
-    if (axiosTokenRef.current) {
-      axiosTokenRef.current.abort();
-    }
-    axiosTokenRef.current = new AbortController();
-    try {
-      const params = {
-        Name: query,
-        PageSize: 10,
-        PageNumber: 1,
-        tasks: []
-      };
-      setLoading(true);
-      const data = await queryModelScopeModels(params, {
-        signal: axiosTokenRef.current.signal
-      });
-      const list = _.map(
-        _.get(data, 'Data.Model.Models') || [],
-        (item: any) => {
-          return {
-            label: `${item.Path}/${item.Name}`,
-            value: `${item.Path}/${item.Name}`
-          };
-        }
-      );
-
-      const catalogModelList =
-        presetDraftModelListRef.current.length > 0
-          ? [
-              {
-                label: `${intl.formatMessage({ id: 'models.form.source' })}: ${intl.formatMessage({ id: 'menu.models.modelCatalog' })}`,
-                title: `${intl.formatMessage({ id: 'models.form.source' })}: ${intl.formatMessage({ id: 'menu.models.modelCatalog' })}`,
-                options: presetDraftModelListRef.current || []
-              }
-            ]
-          : [];
-
-      setDraftModelList([
-        ...catalogModelList,
-        {
-          label: `${intl.formatMessage({ id: 'models.form.source' })}: ModelScope`,
-          title: `${intl.formatMessage({ id: 'models.form.source' })}: ModelScope`,
-          options: list
-        }
-      ]);
-    } catch (error) {
-      setDraftModelList(presetDraftModelListRef.current);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleOnSearch = async (value: string) => {
-    if (!value) {
-      setDraftModelList(presetDraftModelListRef.current);
-      return;
-    }
-    if (source === modelSourceMap.huggingface_value) {
-      await getHuggingfaceModels(value);
-    } else if (source === modelSourceMap.modelscope_value) {
-      await getModelScopeModels(value);
-    }
-  };
-
-  const { run: onSearch } = useDeferredRequest(
-    (value: string) => handleOnSearch(value),
-    150
-  );
 
   const handleSpeculativeEnabledChange = (e: any) => {
     if (e.target.checked) {
@@ -191,11 +52,11 @@ const SpeculativeDecode = () => {
     }
   };
 
-  useEffect(() => {
-    if (algorithm === AlgorithmMap.Eagle3) {
-      fetchDraftModels();
+  const handleAlgorithemChange = (value: string) => {
+    if (value === AlgorithmMap.Eagle3) {
+      resetDraftModels();
     }
-  }, [algorithm]);
+  };
 
   return (
     <>
@@ -228,11 +89,14 @@ const SpeculativeDecode = () => {
           >
             <SealSelect
               required
+              onChange={handleAlgorithemChange}
               label={intl.formatMessage({ id: 'models.form.algorithm' })}
               options={[
-                { label: 'Eagle3', value: AlgorithmMap.Eagle3 },
-                { label: 'MTP', value: AlgorithmMap.MTP },
-                { label: 'N-gram', value: AlgorithmMap.Ngram }
+                [
+                  { label: 'Eagle3', value: AlgorithmMap.Eagle3 },
+                  { label: 'MTP', value: AlgorithmMap.MTP },
+                  { label: 'N-gram', value: AlgorithmMap.Ngram }
+                ]
               ]}
             ></SealSelect>
           </Form.Item>
@@ -252,6 +116,9 @@ const SpeculativeDecode = () => {
               <AutoComlete
                 required
                 allowClear
+                loading={loading}
+                trim={false}
+                clearSpaceOnBlur={true}
                 label={intl.formatMessage({ id: 'models.form.draftModel' })}
                 placeholder={intl.formatMessage({
                   id: 'models.form.draftModel.placeholder'