diff --git a/src/assets/images/img.png b/src/assets/images/img.png new file mode 100644 index 00000000..9421ca17 Binary files /dev/null and b/src/assets/images/img.png differ diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less index 2077d7c3..c9488093 100644 --- a/src/assets/styles/common.less +++ b/src/assets/styles/common.less @@ -204,6 +204,10 @@ margin-bottom: 16px; } +.m-r-16 { + margin-right: 16px; +} + .font-400 { font-weight: var(--font-weight-normal); } diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx index 6d65adfc..fbe475ed 100644 --- a/src/components/icon-font/index.tsx +++ b/src/components/icon-font/index.tsx @@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons'; // import './iconfont/iconfont.js'; const IconFont = createFromIconfontCN({ - scriptUrl: '//at.alicdn.com/t/c/font_4613488_trmdczqx9z.js' + scriptUrl: '//at.alicdn.com/t/c/font_4613488_nlj2pbwi.js' }); export default IconFont; diff --git a/src/components/tags-wrapper/index.tsx b/src/components/tags-wrapper/index.tsx index d55f80fd..c2766825 100644 --- a/src/components/tags-wrapper/index.tsx +++ b/src/components/tags-wrapper/index.tsx @@ -6,7 +6,8 @@ import './index.less'; const TagsWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => { const wrapperRef = useRef(null); const observer = useRef(null); - const [hiddenIndex, setHiddenIndex] = useState(0); + const resizeObserver = useRef(null); + const [hiddenIndex, setHiddenIndex] = useState(4); const uid = useRef(0); const updateUid = () => { @@ -17,55 +18,72 @@ const TagsWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => { const dropItems = useMemo(() => { return React.Children.toArray(children) .slice(hiddenIndex) - .map((child, index) => ({ + .map((child) => ({ label: child, key: updateUid() })); }, [children, hiddenIndex]); + const updateHiddenIndex = () => { + if (!wrapperRef.current || !observer.current) return; + + const childrenList = Array.from(wrapperRef.current.children); + let newHiddenIndex = 0; + + childrenList.forEach((child, index) => { + const rect = child.getBoundingClientRect(); + // visible in wrapperRef + const issivible = + rect.top < wrapperRef.current!.clientHeight && + rect.bottom > 0 && + rect.left < wrapperRef.current!.clientWidth && + rect.right > 0; + + if (!issivible) { + newHiddenIndex = Math.max(newHiddenIndex, index + 1); + } + }); + + setHiddenIndex(newHiddenIndex); + }; + useEffect(() => { if (!wrapperRef.current) return; - observer.current = new IntersectionObserver( - (entries) => { - let newHiddenIndex = 0; - entries.forEach((entry, index) => { - if (entry.intersectionRatio < 1) { - newHiddenIndex = Math.min(newHiddenIndex, index); - } - console.log( - 'isIntersecting=======', - entry.intersectionRatio, - newHiddenIndex - ); - }); - setHiddenIndex(() => newHiddenIndex); - }, - { - root: wrapperRef.current, - threshold: 0 - } - ); + // observer.current = new IntersectionObserver( + // (entries) => { + // const lastEntry = entries[entries.length - 1]; + // if (lastEntry && lastEntry.intersectionRatio < 1) { + // setHiddenIndex((prev) => + // Math.max(prev, React.Children.count(children)) + // ); + // } + // }, + // { root: wrapperRef.current, threshold: 1 } + // ); - const childrenList = wrapperRef.current.children; - Array.from(childrenList).forEach((child) => { - observer.current?.observe(child); + // const childrenList = wrapperRef.current.children; + // if (childrenList.length > 0) { + // observer.current.observe(childrenList[childrenList.length - 1]); + // } + + resizeObserver.current = new ResizeObserver(() => { + // updateHiddenIndex(); }); + resizeObserver.current.observe(wrapperRef.current); return () => { observer.current?.disconnect(); + resizeObserver.current?.disconnect(); }; }, [children]); return (
- {hiddenIndex} - {React.Children.toArray(children).slice( - 0, - React.Children.toArray(children).length - hiddenIndex - )} - {hiddenIndex > 0 && ( + {React.Children.toArray(children).slice(0, hiddenIndex)} + {React.Children.toArray(children).length > 4 && ( >(`/model-sets`, { - methos: 'GET', - ...options, - params - }); + return request>( + `/model-sets?${qs.stringify(params)}`, + { + methos: 'GET', + ...options + } + ); } -export async function queryCatalogItemSpec(id: number) { - return request(`/model-sets/${id}/specs`, { - method: 'GET' - }); +export async function queryCatalogItemSpec( + params: { id: number }, + options?: any +) { + return await request>( + `/model-sets/${params.id}/specs`, + { + method: 'GET', + ...options, + params + } + ); } diff --git a/src/pages/llmodels/catalog.tsx b/src/pages/llmodels/catalog.tsx index 25a92c5a..4d2dc329 100644 --- a/src/pages/llmodels/catalog.tsx +++ b/src/pages/llmodels/catalog.tsx @@ -3,19 +3,29 @@ import { PageAction } from '@/config'; import breakpoints from '@/config/breakpoints'; import { SyncOutlined } from '@ant-design/icons'; import { PageContainer } from '@ant-design/pro-components'; -import { useIntl } from '@umijs/max'; -import { Button, Col, Input, Pagination, Row, Space, message } from 'antd'; +import { useIntl, useNavigate } from '@umijs/max'; +import { + Button, + Col, + Input, + Pagination, + Row, + Select, + Space, + message +} from 'antd'; import _ from 'lodash'; import ResizeObserver from 'rc-resize-observer'; import React, { useCallback, useEffect, useState } from 'react'; import { createModel, queryCatalogList } from './apis'; import CatalogItem from './components/catalog-item'; import DelopyBuiltInModal from './components/deploy-builtin-modal'; -import { getSourceRepoConfigValue, modelSourceMap } from './config'; +import { modelCategories, modelSourceMap } from './config'; import { CatalogItem as CatalogItemType, FormData } from './config/types'; const Catalog: React.FC = () => { const intl = useIntl(); + const navigate = useNavigate(); const [span, setSpan] = React.useState(8); const [activeId, setActiveId] = React.useState(-1); const [dataSource, setDataSource] = useState<{ @@ -30,11 +40,13 @@ const Catalog: React.FC = () => { const [queryParams, setQueryParams] = useState({ page: 1, perPage: 9, - search: '' + search: '', + categories: [] }); const [openDeployModal, setOpenDeployModal] = useState({ show: false, width: 600, + current: {}, source: modelSourceMap.huggingface_value }); @@ -47,7 +59,7 @@ const Catalog: React.FC = () => { const params = { ..._.pickBy(queryParams, (val: any) => !!val) }; - const res = await queryCatalogList(params); + const res: any = await queryCatalogList(params); setDataSource({ dataList: res.items, @@ -94,6 +106,7 @@ const Catalog: React.FC = () => { setOpenDeployModal({ show: true, source: modelSourceMap.huggingface_value, + current: item, width: 600 }); }, []); @@ -103,12 +116,9 @@ const Catalog: React.FC = () => { try { console.log('data:', data, openDeployModal); - const result = getSourceRepoConfigValue(openDeployModal.source, data); - const modelData = await createModel({ data: { - ...result.values, - ..._.omit(data, result.omits) + ..._.omit(data, ['size', 'quantization']) } }); setOpenDeployModal({ @@ -116,18 +126,22 @@ const Catalog: React.FC = () => { show: false }); message.success(intl.formatMessage({ id: 'common.message.success' })); + navigate('/models/list'); } catch (error) {} }, [openDeployModal] ); - const handleOnPageChange = useCallback((page: number, pageSize?: number) => { - setQueryParams({ - ...queryParams, - page, - perPage: pageSize || 10 - }); - }, []); + const handleOnPageChange = useCallback( + (page: number, pageSize?: number) => { + setQueryParams({ + ...queryParams, + page, + perPage: pageSize || 10 + }); + }, + [queryParams] + ); const handleSearch = (e: any) => { fetchData(); @@ -136,10 +150,19 @@ const Catalog: React.FC = () => { const handleNameChange = (e: any) => { setQueryParams({ ...queryParams, + page: 1, search: e.target.value }); }; + const handleCategoryChange = (value: any) => { + setQueryParams({ + ...queryParams, + page: 1, + categories: value + }); + }; + useEffect(() => { fetchData(); }, [queryParams]); @@ -159,11 +182,21 @@ const Catalog: React.FC = () => { +