From 0a47c4c067ae25b4adfa0e4650d7f1979a7f5b06 Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 9 Aug 2024 10:25:44 +0800 Subject: [PATCH] chore: deploy model state merge --- src/pages/api-keys/index.tsx | 2 +- .../llmodels/components/deploy-modal.tsx | 27 +++- .../llmodels/components/search-model.tsx | 144 +++++++++++------- .../llmodels/components/search-result.tsx | 73 ++++----- src/pages/llmodels/components/table-list.tsx | 6 +- .../{add-modal.tsx => update-modal.tsx} | 0 src/pages/llmodels/index.tsx | 24 +-- src/pages/llmodels/style/column-wrapper.less | 2 +- src/pages/resources/components/gpus.tsx | 2 +- src/pages/resources/components/workers.tsx | 2 +- src/pages/users/index.tsx | 2 +- 11 files changed, 172 insertions(+), 112 deletions(-) rename src/pages/llmodels/components/{add-modal.tsx => update-modal.tsx} (100%) diff --git a/src/pages/api-keys/index.tsx b/src/pages/api-keys/index.tsx index b0cc71c5..38e41a04 100644 --- a/src/pages/api-keys/index.tsx +++ b/src/pages/api-keys/index.tsx @@ -60,7 +60,7 @@ const APIKeys: React.FC = () => { const fetchData = async () => { setDataSource((pre) => { pre.loading = true; - return pre; + return { ...pre }; }); try { const params = { diff --git a/src/pages/llmodels/components/deploy-modal.tsx b/src/pages/llmodels/components/deploy-modal.tsx index 316e455d..e06d97b3 100644 --- a/src/pages/llmodels/components/deploy-modal.tsx +++ b/src/pages/llmodels/components/deploy-modal.tsx @@ -4,8 +4,9 @@ import SealSelect from '@/components/seal-form/seal-select'; import { PageAction } from '@/config'; import { PageActionType } from '@/config/types'; import { convertFileSize } from '@/utils'; +import { CloseOutlined } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; -import { Drawer, Form } from 'antd'; +import { Button, Drawer, Form } from 'antd'; import _ from 'lodash'; import { memo, useCallback, useEffect, useState } from 'react'; import { queryHuggingfaceModelFiles, queryHuggingfaceModels } from '../apis'; @@ -276,17 +277,35 @@ const AddModal: React.FC = (props) => { return ( + + {title} + + + + } open={open} onClose={onCancel} destroyOnClose={true} - closeIcon={true} + closeIcon={false} maskClosable={false} keyboard={false} styles={{ body: { - height: 'calc(100vh - 53px)', + height: 'calc(100vh - 57px)', padding: '16px 0' + }, + content: { + borderRadius: '8px 0 0 8px' } }} width="90%" diff --git a/src/pages/llmodels/components/search-model.tsx b/src/pages/llmodels/components/search-model.tsx index f341301e..23d8c4ed 100644 --- a/src/pages/llmodels/components/search-model.tsx +++ b/src/pages/llmodels/components/search-model.tsx @@ -35,75 +35,97 @@ const sourceList = [ ]; const SearchModel: React.FC = (props) => { + console.log('SearchModel======'); const intl = useIntl(); const { modelSource, onSourceChange, onSelectModel } = props; - const [repoOptions, setRepoOptions] = useState([]); - const [loading, setLoading] = useState(false); + const [dataSource, setDataSource] = useState<{ + repoOptions: any[]; + loading: boolean; + }>({ + repoOptions: [], + loading: false + }); const [current, setCurrent] = useState(''); const [sortType, setSortType] = useState('downloads'); const cacheRepoOptions = useRef([]); const axiosTokenRef = useRef(null); const customOllamaModelRef = useRef(null); - const handleOnSelectModel = (item: any) => { + const handleOnSelectModel = useCallback((item: any) => { onSelectModel(item); setCurrent(item.id); - }; - - const handleOnSearchRepo = async (text: string) => { - axiosTokenRef.current?.abort?.(); - axiosTokenRef.current = new AbortController(); - if (loading) return; - try { - setLoading(true); - cacheRepoOptions.current = []; - const params = { - search: { - query: text, - tags: ['gguf'] - } - }; - const models = await queryHuggingfaceModels(params, { - signal: axiosTokenRef.current.signal - }); - const list = _.map(models || [], (item: any) => { - return { - ...item, - value: item.name, - label: item.name - }; - }); - const sortedList = _.sortBy( - list, - (item: any) => item[sortType] - ).reverse(); - cacheRepoOptions.current = sortedList; - setRepoOptions(sortedList); - handleOnSelectModel(sortedList[0]); - } catch (error) { - setRepoOptions([]); - handleOnSelectModel({}); - cacheRepoOptions.current = []; - } finally { - setLoading(false); - } - }; - - const handlerSearchModels = useCallback(async (e: any) => { - const text = e.target.value; - handleOnSearchRepo(text); }, []); + const handleOnSearchRepo = useCallback( + async (text: string) => { + axiosTokenRef.current?.abort?.(); + axiosTokenRef.current = new AbortController(); + if (dataSource.loading) return; + try { + setDataSource((pre) => { + pre.loading = true; + return { ...pre }; + }); + cacheRepoOptions.current = []; + const params = { + search: { + query: text, + tags: ['gguf'] + } + }; + const models = await queryHuggingfaceModels(params, { + signal: axiosTokenRef.current.signal + }); + const list = _.map(models || [], (item: any) => { + return { + ...item, + value: item.name, + label: item.name + }; + }); + const sortedList = _.sortBy( + list, + (item: any) => item[sortType] + ).reverse(); + cacheRepoOptions.current = sortedList; + setDataSource({ + repoOptions: sortedList, + loading: false + }); + handleOnSelectModel(sortedList[0]); + } catch (error) { + setDataSource({ + repoOptions: [], + loading: false + }); + handleOnSelectModel({}); + cacheRepoOptions.current = []; + } + }, + [dataSource] + ); + + const handlerSearchModels = useCallback( + async (e: any) => { + const text = e.target.value; + handleOnSearchRepo(text); + }, + [handleOnSearchRepo] + ); + const handleOnOpen = () => { if ( - !repoOptions.length && + !dataSource.repoOptions.length && !cacheRepoOptions.current.length && modelSource === modelSourceMap.huggingface_value ) { handleOnSearchRepo(''); } if (modelSourceMap.ollama_library_value === modelSource) { - setRepoOptions(ollamaModelOptions); + setDataSource({ + repoOptions: ollamaModelOptions, + loading: false + }); cacheRepoOptions.current = ollamaModelOptions; handleOnSelectModel(ollamaModelOptions[0]); } @@ -114,7 +136,10 @@ const SearchModel: React.FC = (props) => { const list = _.filter(cacheRepoOptions.current, (item: any) => { return item.name.includes(text); }); - setRepoOptions(list); + setDataSource({ + repoOptions: list, + loading: false + }); }; const debounceFilter = _.debounce((e: any) => { @@ -124,7 +149,10 @@ const SearchModel: React.FC = (props) => { const handleSourceChange = (source: string) => { axiosTokenRef.current?.abort?.(); onSourceChange?.(source); - setRepoOptions([]); + setDataSource({ + repoOptions: [], + loading: false + }); cacheRepoOptions.current = []; }; @@ -146,11 +174,14 @@ const SearchModel: React.FC = (props) => { const handleSortChange = (value: string) => { const sortedList = _.sortBy( - repoOptions, + dataSource.repoOptions, (item: any) => item[value] ).reverse(); setSortType(value); - setRepoOptions(sortedList); + setDataSource({ + repoOptions: sortedList, + loading: false + }); }; const renderHFSearch = () => { @@ -159,7 +190,8 @@ const SearchModel: React.FC = (props) => {
- {repoOptions.length}results + {dataSource.repoOptions.length} + results