From 1a792254cadaf6573743e06331197ae286ab4bab Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 3 Jan 2025 16:36:04 +0800 Subject: [PATCH] chore: catalog card style --- src/assets/images/img.png | Bin 0 -> 726 bytes src/assets/styles/common.less | 4 + src/components/icon-font/index.tsx | 2 +- src/components/tags-wrapper/index.tsx | 80 ++-- src/pages/llmodels/apis/index.ts | 29 +- src/pages/llmodels/catalog.tsx | 69 +++- .../llmodels/components/advance-config.tsx | 10 - .../llmodels/components/catalog-item.tsx | 87 +++-- src/pages/llmodels/components/data-form.tsx | 218 +++++------ .../components/deploy-builtin-modal.tsx | 347 +++++++++++++++--- .../llmodels/components/deploy-modal.tsx | 17 - src/pages/llmodels/components/table-list.tsx | 9 + .../llmodels/components/update-modal.tsx | 53 +-- src/pages/llmodels/config/index.ts | 34 +- src/pages/llmodels/config/types.ts | 28 ++ src/pages/llmodels/style/catalog-item.less | 8 +- 16 files changed, 696 insertions(+), 299 deletions(-) create mode 100644 src/assets/images/img.png diff --git a/src/assets/images/img.png b/src/assets/images/img.png new file mode 100644 index 0000000000000000000000000000000000000000..9421ca172258b5d8ecbf7e74d195bc14e34a8bdf GIT binary patch literal 726 zcmV;{0xA88P)Px%kV!;ARCr$Pn=wzqKorOC05y@pD2an{P%%u#&A|^KE`AU{fX>M52awfI;Gh#M zIH+-VA|lQts0&81aQbQvp+bA_q|ozT6H*e|>-~T4|K44%lrzgWZn=I&0LTH1F(Jg! z*Dhxfj51>^&p9u15MQh~xrc^e)ken(2I*9ct))22W)gXRcIVWtYR-xk$~_`CmtvRv zd9tOaRCMlmb)(s0h+1U@-yhVGyR1JDIqP4!*-yscq!d7y0s##mNW26B)9b>`N93J=0-!2hsy4w1C;-QMGw6sOUc95v z8RrSg0HDzAZ%?8725AuGyG>;PSo=#-)&q!o9Z+_FZVFgm1O5#F$Z2dHh`RkjlX42k zq6Q;@ocj6=2_}fw0-)jqQ^acnkPu)G>+9eM80+P;g(#2vUe}^i06i0m_z47nR)q~* z6<$cj7<}fFKTr3co8L>D_jTN2j8Q27qSK3USG?a=t+$my7z1E^G2x2GY$_m(0H7nj z7nC1}$OHJR_#hCG1~5wT-L=Ykn>{r& zdud}_G49CAzW#E+sKocekhNk^;Z&X71zB15_dWn&h}Z4dxX$YWuu*(p4cOhlKlU0| zl)}7@>i`()g6^=w?8GG7=7n2FVDGXf+2K)No0n?B?mtNp0CE7O0M&p|S5}kSgHgb? z_l4Z}ytc&S>@+{6*XB&JYZ!ec2ZTY@q&CR`CPgcZzFO~qPit6sYlP1&eE = ({ 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 = () => { +