diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts index f70d4c62..f64f91a4 100644 --- a/src/locales/en-US/playground.ts +++ b/src/locales/en-US/playground.ts @@ -37,10 +37,10 @@ export default { 'playground.img.upload.error': 'Upload Error', 'playground.toolbar.clearmsg': 'Clear Messages', 'playground.toolbar.prompts': 'Prompts', - 'playground.toolbar.compare2Model': '2-Model Compare', - 'playground.toolbar.compare3Model': '3-Model Compare', - 'playground.toolbar.compare4Model': '4-Model Compare', - 'playground.toolbar.compare6Model': '6-Model Compare', + 'playground.toolbar.compare2Model': '2-Model Comparison', + 'playground.toolbar.compare3Model': '3-Model Comparison', + 'playground.toolbar.compare4Model': '4-Model Comparison', + 'playground.toolbar.compare6Model': '6-Model Comparison', 'playground.input.holder': 'Type / to input message', 'playground.compare.apply': 'Apply', 'playground.compare.applytoall': 'Apply to all models', diff --git a/src/pages/dashboard/components/active-table.tsx b/src/pages/dashboard/components/active-table.tsx index 0569cdb1..67d7c69c 100644 --- a/src/pages/dashboard/components/active-table.tsx +++ b/src/pages/dashboard/components/active-table.tsx @@ -2,71 +2,9 @@ import PageTools from '@/components/page-tools'; import { convertFileSize } from '@/utils'; import { useIntl } from '@umijs/max'; import { Col, Row, Table } from 'antd'; -import { useContext } from 'react'; +import { memo, useContext } from 'react'; import { DashboardContext } from '../config/dashboard-context'; -const projectColumns = [ - { - title: 'Name', - dataIndex: 'name', - key: 'name' - }, - { - title: 'Token Quota', - dataIndex: 'quota', - key: 'quota', - render: (text: any, record: any) => {record.quota}k - }, - { - title: 'Token Utilization', - dataIndex: 'utilization', - key: 'utilization', - render: (text: any, record: any) => {record.utilization}% - }, - { - title: 'Members', - dataIndex: 'members', - key: 'members' - } -]; - -const projectData = [ - { - id: 1, - name: 'copilot-dev', - quota: 100, - utilization: 50, - members: 4 - }, - { - id: 2, - name: 'rag-wiki', - quota: 200, - utilization: 70, - members: 3 - }, - { - id: 3, - name: 'smart-auto-agent', - quota: 100, - utilization: 20, - members: 5 - }, - { - id: 4, - name: 'office-auto-docs', - quota: 100, - utilization: 25, - members: 1 - }, - { - id: 5, - name: 'smart-customer-service', - quota: 100, - utilization: 46, - members: 2 - } -]; const ActiveTable = () => { const intl = useIntl(); const data = useContext(DashboardContext).active_models || []; @@ -76,14 +14,6 @@ const ActiveTable = () => { dataIndex: 'name', key: 'name' }, - // { - // title: intl.formatMessage({ id: 'dashboard.gpuutilization' }), - // dataIndex: 'gpu_utilization', - // key: 'gpu_utilization', - // render: (text: any, record: any) => ( - // - // ) - // }, { title: intl.formatMessage({ id: 'dashboard.allocatevram' }), dataIndex: 'resource_claim.memory', @@ -133,4 +63,4 @@ const ActiveTable = () => { ); }; -export default ActiveTable; +export default memo(ActiveTable); diff --git a/src/pages/dashboard/components/over-view.tsx b/src/pages/dashboard/components/over-view.tsx index e3c6c8c9..2f02315b 100644 --- a/src/pages/dashboard/components/over-view.tsx +++ b/src/pages/dashboard/components/over-view.tsx @@ -29,7 +29,7 @@ const renderCardItem = (data: { const Overview: React.FC = () => { const intl = useIntl(); const data = useContext(DashboardContext).resource_counts || {}; - console.log('overview==='); + const renderValue = ( value: | number @@ -74,4 +74,4 @@ const Overview: React.FC = () => { ); }; -export default Overview; +export default React.memo(Overview); diff --git a/src/pages/dashboard/components/resource-utilization.tsx b/src/pages/dashboard/components/resource-utilization.tsx index e250c979..c4424c4b 100644 --- a/src/pages/dashboard/components/resource-utilization.tsx +++ b/src/pages/dashboard/components/resource-utilization.tsx @@ -110,7 +110,6 @@ const option = { }; const UtilizationOvertime: React.FC = () => { - console.log('systemload====================='); const intl = useIntl(); const data = useContext(DashboardContext)?.system_load?.history || {}; @@ -147,7 +146,7 @@ const UtilizationOvertime: React.FC = () => { legendData, xAxisData: _.uniq(xAxisData) }; - }, [data]); + }, [data, intl]); return ( <> diff --git a/src/pages/dashboard/components/system-load.tsx b/src/pages/dashboard/components/system-load.tsx index 0c7e1e20..5b8f7ddd 100644 --- a/src/pages/dashboard/components/system-load.tsx +++ b/src/pages/dashboard/components/system-load.tsx @@ -5,9 +5,8 @@ import breakpoints from '@/config/breakpoints'; import useWindowResize from '@/hooks/use-window-resize'; import { useIntl } from '@umijs/max'; import { Col, Row } from 'antd'; -import dayjs from 'dayjs'; import _ from 'lodash'; -import { useContext, useEffect, useState } from 'react'; +import { memo, useContext, useEffect, useMemo, useState } from 'react'; import { DashboardContext } from '../config/dashboard-context'; import ResourceUtilization from './resource-utilization'; @@ -28,11 +27,29 @@ const SystemLoad = () => { const [paddingRight, setPaddingRight] = useState('20px'); const [smallChartHeight, setSmallChartHeight] = useState(190); const [largeChartHeight, setLargeChartHeight] = useState(400); - const thresholds = [0.5, 0.7, 1]; + const height = 400; - const currentDate = dayjs().format('YYYY-MM-DD'); - const handleSelectDate = (date: any) => {}; + const chartData = useMemo(() => { + return { + gpu: { + data: _.round(data.gpu || 0, 1), + color: strokeColorFunc(data.gpu) + }, + vram: { + data: _.round(data.vram || 0, 1), + color: strokeColorFunc(data.vram) + }, + cpu: { + data: _.round(data.cpu || 0, 1), + color: strokeColorFunc(data.cpu) + }, + ram: { + data: _.round(data.ram || 0, 1), + color: strokeColorFunc(data.ram) + } + }; + }, [data]); useEffect(() => { if (size.width < breakpoints.xl) { @@ -70,8 +87,8 @@ const SystemLoad = () => { { id: 'dashboard.vramutilization' })} height={smallChartHeight} - color={strokeColorFunc(data.vram)} - value={_.round(data.vram || 0, 1)} + color={chartData.vram.color} + value={chartData.vram.data} > @@ -93,8 +110,8 @@ const SystemLoad = () => { id: 'dashboard.cpuutilization' })} height={smallChartHeight} - color={strokeColorFunc(data.cpu)} - value={_.round(data.cpu || 0, 1)} + color={chartData.cpu.color} + value={chartData.cpu.data} > @@ -103,8 +120,8 @@ const SystemLoad = () => { id: 'dashboard.memoryutilization' })} height={smallChartHeight} - color={strokeColorFunc(data.ram)} - value={_.round(data.ram || 0, 1)} + color={chartData.ram.color} + value={chartData.ram.data} > @@ -116,4 +133,4 @@ const SystemLoad = () => { ); }; -export default SystemLoad; +export default memo(SystemLoad); diff --git a/src/pages/dashboard/components/usage-inner/index.tsx b/src/pages/dashboard/components/usage-inner/index.tsx index b2e85c2c..df347e81 100644 --- a/src/pages/dashboard/components/usage-inner/index.tsx +++ b/src/pages/dashboard/components/usage-inner/index.tsx @@ -4,7 +4,7 @@ import { useIntl } from '@umijs/max'; import { Col, Row } from 'antd'; import dayjs from 'dayjs'; import _ from 'lodash'; -import { memo, useCallback, useContext } from 'react'; +import { memo, useCallback, useContext, useEffect, useState } from 'react'; import { DashboardContext } from '../../config/dashboard-context'; import RequestTokenInner from './request-token-inner'; import TopUser from './top-user'; @@ -33,18 +33,29 @@ const getCurrentMonthDays = () => { const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => { const intl = useIntl(); - const currentDate = dayjs(); - const currentMonthDays = getCurrentMonthDays(); - let requestData: { - name: string; - color: string; - areaStyle: any; - data: { time: string; value: number }[]; - }[] = []; - let tokenData: { time: string; value: number }[] = []; - let userData: { name: string; value: number }[] = []; - const xAxisData: string[] = currentMonthDays; - let topUserList: string[] = []; + + const [topUserData, setTopUserData] = useState<{ + userData: { name: string; value: number }[]; + topUserList: string[]; + }>({ + userData: [], + topUserList: [] + }); + + const [requestTokenData, setRequestTokenData] = useState<{ + requestData: { + name: string; + color: string; + areaStyle: any; + data: { time: string; value: number }[]; + }[]; + tokenData: { time: string; value: number }[]; + xAxisData: string[]; + }>({ + requestData: [], + tokenData: [], + xAxisData: [] + }); const { model_usage } = useContext(DashboardContext); const data = model_usage || {}; @@ -54,6 +65,7 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => { }; const generateData = useCallback(() => { + const currentMonthDays = getCurrentMonthDays(); const requestList: { name: string; color: string; @@ -88,7 +100,7 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => { data: [] }; - _.each(xAxisData, (date: string) => { + _.each(currentMonthDays, (date: string) => { // tokens data const item = _.find(data.completion_token_history, (item: any) => { return dayjs(item.timestamp * 1000).format('YYYY-MM-DD') === date; @@ -140,8 +152,10 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => { // ========== top users ============ if (!data.top_users?.length) { - userData = []; - topUserList = []; + setTopUserData({ + userData: [], + topUserList: [] + }); } else { const users: string[] = []; _.each(data.top_users, (item: any) => { @@ -155,15 +169,23 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => { value: item.completion_token_count }); }); - topUserList = _.uniq(users); - userData = [topUserCompletion, topUserPrompt]; + + setTopUserData({ + userData: [topUserCompletion, topUserPrompt], + topUserList: _.uniq(users) + }); } - requestData = [requestList]; - tokenData = [completionData, prompData]; - }, [data, xAxisData]); + setRequestTokenData({ + requestData: [requestList], + tokenData: [completionData, prompData], + xAxisData: currentMonthDays + }); + }, [data]); - generateData(); + useEffect(() => { + generateData(); + }, [generateData]); return ( <> @@ -181,13 +203,16 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => { style={{ paddingRight: paddingRight }} > - + diff --git a/src/pages/dashboard/components/usage-inner/request-token-inner.tsx b/src/pages/dashboard/components/usage-inner/request-token-inner.tsx index bbabb2aa..3d1f065e 100644 --- a/src/pages/dashboard/components/usage-inner/request-token-inner.tsx +++ b/src/pages/dashboard/components/usage-inner/request-token-inner.tsx @@ -17,7 +17,6 @@ interface RequestTokenInnerProps { xAxisData: string[]; } const RequestTokenInner: React.FC = (props) => { - console.log('request token inner====================='); const { requestData, tokenData, xAxisData } = props; const intl = useIntl(); const labelFormatter = (v: any) => { diff --git a/src/pages/dashboard/components/usage-inner/top-user.tsx b/src/pages/dashboard/components/usage-inner/top-user.tsx index c82d79f9..191c4dcf 100644 --- a/src/pages/dashboard/components/usage-inner/top-user.tsx +++ b/src/pages/dashboard/components/usage-inner/top-user.tsx @@ -8,7 +8,6 @@ interface TopUserProps { topUserList: string[]; } const TopUser: React.FC = (props) => { - console.log('TopUser====================='); const { userData, topUserList } = props; const intl = useIntl(); diff --git a/src/pages/llmodels/components/data-form.tsx b/src/pages/llmodels/components/data-form.tsx index 8c0a8071..af0b7c58 100644 --- a/src/pages/llmodels/components/data-form.tsx +++ b/src/pages/llmodels/components/data-form.tsx @@ -260,7 +260,7 @@ const DataForm: React.FC = forwardRef((props, ref) => { } return null; - }, [props.source, isGGUF]); + }, [props.source, isGGUF, intl]); const handleOk = (formdata: FormData) => { const gpu = _.find(gpuOptions, (item: any) => { diff --git a/src/pages/llmodels/components/update-modal.tsx b/src/pages/llmodels/components/update-modal.tsx index a227e43b..e39edb31 100644 --- a/src/pages/llmodels/components/update-modal.tsx +++ b/src/pages/llmodels/components/update-modal.tsx @@ -226,7 +226,7 @@ const UpdateModal: React.FC = (props) => { } return null; - }, [props.data?.source, isGGUF]); + }, [props.data?.source, isGGUF, intl]); const handleSumit = () => { form.submit(); diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx index 2487c2a8..c4e16d44 100644 --- a/src/pages/playground/components/ground-left.tsx +++ b/src/pages/playground/components/ground-left.tsx @@ -50,6 +50,7 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { const scroller = useRef(null); const currentMessageRef = useRef(null); const paramsRef = useRef(null); + const messageListLengthCache = useRef(0); const { initialize, updateScrollerPosition } = useOverlayScroller(); const { initialize: innitializeParams } = useOverlayScroller(); @@ -68,6 +69,7 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { const setMessageId = () => { messageId.current = messageId.current + 1; }; + const handleNewMessage = (message?: { role: string; content: string }) => { const newMessage = message || { role: @@ -247,8 +249,17 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { }, [paramsRef.current, innitializeParams]); useEffect(() => { - updateScrollerPosition(); - }, [messageList]); + if (loading) { + updateScrollerPosition(); + } + }, [messageList, loading]); + + useEffect(() => { + if (messageList.length > messageListLengthCache.current) { + updateScrollerPosition(); + } + messageListLengthCache.current = messageList.length; + }, [messageList.length]); return (
diff --git a/src/pages/playground/components/multiple-chat/index.tsx b/src/pages/playground/components/multiple-chat/index.tsx index b7fbb733..a900f923 100644 --- a/src/pages/playground/components/multiple-chat/index.tsx +++ b/src/pages/playground/components/multiple-chat/index.tsx @@ -79,9 +79,7 @@ const MultiCompare: React.FC = ({ modelList, loaded }) => { const modelRefList = Object.getOwnPropertySymbols(modelRefs.current); modelRefList.forEach((instanceId: symbol) => { const ref = modelRefs.current[instanceId]; - ref?.setMessageList((preList: any) => { - return [...preList, { ...message }]; - }); + ref?.addNewMessage(message); }); }; diff --git a/src/pages/playground/components/multiple-chat/model-item.tsx b/src/pages/playground/components/multiple-chat/model-item.tsx index 20699241..61ec46ff 100644 --- a/src/pages/playground/components/multiple-chat/model-item.tsx +++ b/src/pages/playground/components/multiple-chat/model-item.tsx @@ -65,19 +65,13 @@ const ModelItem: React.FC = forwardRef( const controllerRef = useRef(null); const currentMessageRef = useRef([]); const modelScrollRef = useRef(null); + const messageListLengthCache = useRef(0); const { initialize, updateScrollerPosition } = useOverlayScroller(); const setMessageId = () => { messageId.current = messageId.current + 1; }; - const maxHeight = useMemo(() => { - const total = 72 + 110 + 46 + 16 + 32; - if (spans.count < 4) { - return `calc(100vh - ${total}px)`; - } - return `calc(100vh - ${total * 2 + 16}px)`; - }, [spans.count]); const abortFetch = () => { controllerRef.current?.abort?.(); @@ -255,6 +249,19 @@ const ModelItem: React.FC = forwardRef( currentMessageRef.current = []; }; + const addNewMessage = (message: Omit) => { + setMessageId(); + setMessageList((preList) => { + return [ + ...preList, + { + ...message, + uid: messageId.current + } + ]; + }); + }; + const handleCloseViewCode = () => { setShow(false); }; @@ -345,14 +352,23 @@ const ModelItem: React.FC = forwardRef( }, [modelScrollRef.current, initialize]); useEffect(() => { - updateScrollerPosition(); + if (loadingStatus[instanceId]) { + updateScrollerPosition(); + } }, [messageList]); + useEffect(() => { + if (messageList.length > messageListLengthCache.current) { + updateScrollerPosition(); + } + messageListLengthCache.current = messageList.length; + }, [messageList.length]); + useImperativeHandle(ref, () => { return { submit: handleSubmit, abortFetch, - setMessageList, + addNewMessage, clear: handleClearMessage, presetPrompt: handlePresetMessageList, setSystemMessage,