diff --git a/src/components/highlight-code/index.tsx b/src/components/highlight-code/index.tsx index 0d74d08c..2af7d290 100644 --- a/src/components/highlight-code/index.tsx +++ b/src/components/highlight-code/index.tsx @@ -28,7 +28,6 @@ const HighlightCode: React.FC<{ const currentTheme = React.useMemo(() => { const res = theme || userSettings.theme === 'realDark' ? 'dark' : 'light'; - console.log('currentTheme:', res, userSettings.theme, '===>', theme); return res; }, [theme, userSettings.theme]); diff --git a/src/config/theme/light.ts b/src/config/theme/light.ts index 8ad5752d..998c2aae 100644 --- a/src/config/theme/light.ts +++ b/src/config/theme/light.ts @@ -75,7 +75,6 @@ export default { borderRadiusSM: 2, colorBgContainer: '#fff', fontSize: 14, - motion: true, - colorFillTertiary: '#f4f5f4' + motion: true } }; diff --git a/src/hooks/use-body-scroll.ts b/src/hooks/use-body-scroll.ts index c9b0164b..5e3e2b48 100644 --- a/src/hooks/use-body-scroll.ts +++ b/src/hooks/use-body-scroll.ts @@ -14,6 +14,7 @@ export default function useBodyScroll() { window.__GPUSTACK_BODY_SCROLLER__?.elements()?.scrollEventElement; instanceRef.current = window.__GPUSTACK_BODY_SCROLLER__; + console.log('bodyScroller', bodyScroller.current, instanceRef.current); }; const saveScrollHeight = React.useCallback(() => { diff --git a/src/pages/llmodels/catalog.tsx b/src/pages/llmodels/catalog.tsx index 6f0bc35b..62cc821d 100644 --- a/src/pages/llmodels/catalog.tsx +++ b/src/pages/llmodels/catalog.tsx @@ -10,12 +10,18 @@ import { Button, Input, Pagination, Select, Space, message } from 'antd'; import { useAtom } from 'jotai'; import _ from 'lodash'; import React, { useCallback, useEffect, useState } from 'react'; +import styled from 'styled-components'; import { createModel, queryCatalogList } from './apis'; import CatalogList from './components/catalog-list'; import DelopyBuiltInModal from './components/deploy-builtin-modal'; import { modelCategories, modelSourceMap } from './config'; import { CatalogItem as CatalogItemType, FormData } from './config/types'; +const PageWrapper = styled.div` + display: none; + margin-block: 32px 16px; +`; + const Catalog: React.FC = () => { const intl = useIntl(); const { saveScrollHeight, restoreScrollHeight } = useBodyScroll(); @@ -26,14 +32,16 @@ const Catalog: React.FC = () => { dataList: CatalogItemType[]; loading: boolean; total: number; + totalPage: number; }>({ dataList: [], loading: false, - total: 0 + total: 0, + totalPage: 0 }); const [queryParams, setQueryParams] = useState({ page: 1, - perPage: 100, + perPage: 12, search: '', categories: '' }); @@ -71,39 +79,62 @@ const Catalog: React.FC = () => { [cacheData.current] ); - const fetchData = useCallback(async () => { - setDataSource((pre) => { - pre.loading = true; - return { ...pre }; - }); - try { - const params = { - ..._.pick(queryParams, ['page', 'perPage']) + const fetchData = useCallback( + async (query?: any) => { + const searchQuery = { + ...queryParams, + ...query }; - const res: any = await queryCatalogList(params); + if ( + dataSource.loading || + (searchQuery.page > dataSource.totalPage && dataSource.totalPage > 0) + ) { + return; + } + setDataSource((pre) => { + pre.loading = true; - cacheData.current = res.items || []; - const dataList = filterData({ - search: queryParams.search, - categories: queryParams.categories + return { ...pre }; }); - setDataSource({ - dataList: dataList, - loading: false, - total: res.pagination.total - }); - } catch (error) { - cacheData.current = []; - setDataSource({ - dataList: [], - loading: false, - total: dataSource.total - }); - console.log('error', error); - } finally { - setIsFirst(false); - } - }, [queryParams, cacheData.current]); + try { + const params = { + ..._.pickBy(searchQuery, (val: string | number) => !!val) + }; + const res: any = await queryCatalogList(params); + + const dataList = + searchQuery.page === 1 + ? res.items + : _.concat(dataSource.dataList, res.items); + setDataSource({ + dataList: dataList, + loading: false, + total: res.pagination.total, + totalPage: res.pagination.totalPage + }); + setQueryParams({ + ...queryParams, + ...query + }); + } catch (error) { + cacheData.current = []; + setDataSource({ + dataList: [], + loading: false, + total: dataSource.total, + totalPage: dataSource.totalPage + }); + setQueryParams({ + ...queryParams, + ...query + }); + console.log('error', error); + } finally { + setIsFirst(false); + } + }, + [queryParams, cacheData.current] + ); const handleDeployModalCancel = () => { setOpenDeployModal({ @@ -160,49 +191,57 @@ const Catalog: React.FC = () => { ); const handleSearch = (e: any) => { - fetchData(); + fetchData({ + ...queryParams, + page: 1 + }); }; const handleNameChange = _.debounce((e: any) => { - const dataList = filterData({ - search: e.target.value, - categories: queryParams.categories - }); - - setQueryParams({ + fetchData({ ...queryParams, page: 1, search: e.target.value }); - - setDataSource({ - dataList, - loading: false, - total: dataSource.total - }); }, 200); const handleCategoryChange = (value: any) => { - const dataList = filterData({ - search: queryParams.search, - categories: value - }); - setQueryParams({ + fetchData({ ...queryParams, page: 1, categories: value }); - setDataSource({ - dataList, - loading: false, - total: dataSource.total - }); }; useEffect(() => { fetchData(); }, []); + useEffect(() => { + const handleScroll = async () => { + // Determine the scrolling element + const scrollingElement = document.documentElement || document.body; + + // Calculate if the user has scrolled to the bottom + const isAtBottom = + scrollingElement.scrollTop + scrollingElement.clientHeight >= + scrollingElement.scrollHeight - 20; // Adding a small buffer for precision + + if (isAtBottom) { + fetchData({ + ...queryParams, + page: queryParams.page + 1 + }); + } + }; + + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, [fetchData]); + return ( { activeId={-1} isFirst={isFirst} > -
+ { showSizeChanger onChange={handleOnPageChange} /> -
+ {loading && ( -
+ {isFirst && } -
+ )} ); diff --git a/src/pages/llmodels/components/update-modal.tsx b/src/pages/llmodels/components/update-modal.tsx index 572a1572..f6de9ddd 100644 --- a/src/pages/llmodels/components/update-modal.tsx +++ b/src/pages/llmodels/components/update-modal.tsx @@ -91,7 +91,7 @@ const UpdateModal: React.FC = (props) => { return undefined; }; - const handleOnValuesChange = (data: any) => { + const handleOnValuesChange = _.debounce((data: any) => { const formdata = form.getFieldsValue?.(); let alldata = {}; @@ -116,7 +116,7 @@ const UpdateModal: React.FC = (props) => { } const originalData = _.pick(originFormData.current, Object.keys(alldata)); - console.log('alldata:', alldata, originalData); + console.log('alldata:', formdata, alldata, originalData); const isEqual = _.isEqualWith( _.omit(alldata, updateIgnoreFields), @@ -137,7 +137,7 @@ const UpdateModal: React.FC = (props) => { }) }); } - }; + }, 100); // voxbox is not support multi gpu const handleSetGPUIds = (backend: string) => { diff --git a/src/pages/llmodels/config/file-type.ts b/src/pages/llmodels/config/file-type.ts index 77095577..a2f5e517 100644 --- a/src/pages/llmodels/config/file-type.ts +++ b/src/pages/llmodels/config/file-type.ts @@ -1,3 +1,4 @@ +// this list is copied from llamacpp repo enum FileType { F32 = 0, F16 = 1, diff --git a/src/pages/playground/components/ground-embedding.tsx b/src/pages/playground/components/ground-embedding.tsx index f4242df9..59fde07d 100644 --- a/src/pages/playground/components/ground-embedding.tsx +++ b/src/pages/playground/components/ground-embedding.tsx @@ -407,10 +407,13 @@ const GroundEmbedding: React.FC = forwardRef((props, ref) => { key: 'json', label: 'JSON', children: ( -
+
= forwardRef((props, ref) => { style={{ border: '1px solid var(--ant-color-border)', borderRadius: 'var(--border-radius-base)', - width: '100%' + width: '100%', + overflow: 'hidden' }} - className="scatter " + className="scatter" >