From 1771ca363adb69753ff50c7698f3a5d8973f0084 Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 6 Jun 2025 14:57:40 +0800 Subject: [PATCH] fix: show embedding token usage --- .../components/deploy-builtin-modal.tsx | 33 ++--- .../components/ground-embedding.tsx | 37 +++--- .../playground/components/ground-reranker.tsx | 114 ++++++++---------- .../playground/components/token-usage.tsx | 36 ++++++ 4 files changed, 128 insertions(+), 92 deletions(-) create mode 100644 src/pages/playground/components/token-usage.tsx diff --git a/src/pages/llmodels/components/deploy-builtin-modal.tsx b/src/pages/llmodels/components/deploy-builtin-modal.tsx index 28ffdd84..e3e8901b 100644 --- a/src/pages/llmodels/components/deploy-builtin-modal.tsx +++ b/src/pages/llmodels/components/deploy-builtin-modal.tsx @@ -5,14 +5,7 @@ import { CloseOutlined } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Button, Drawer } from 'antd'; import _ from 'lodash'; -import React, { - memo, - useCallback, - useEffect, - useMemo, - useRef, - useState -} from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import styled from 'styled-components'; import { queryCatalogItemSpec } from '../apis'; import { @@ -126,14 +119,22 @@ const AddModal: React.FC = (props) => { }; // use for size change and quantization change - const pickSomeFieldsValue = () => { + const pickSomeFieldsValue = (defaultSpec: CatalogSpec) => { const formData = form.current?.getFieldsValue(); - return _.pick(formData, [ + const currentData = _.pick(formData, [ 'worker_selector', 'gpu_selector', 'env', - 'backend_version' + 'backend_version', + 'backend_parameters' ]); + return { + ...currentData, + backend_parameters: + currentData.backend_parameters?.length > 0 + ? currentData.backend_parameters + : defaultSpec.backend_parameters || [] + }; }; const generateSubmitData = (formData: FormData) => { @@ -431,7 +432,7 @@ const AddModal: React.FC = (props) => { }); form.current.setFieldsValue({ ...data, - ...pickSomeFieldsValue() + ...pickSomeFieldsValue(data) }); handleCheckFormData(); }; @@ -453,7 +454,7 @@ const AddModal: React.FC = (props) => { // set form data form.current.setFieldsValue({ ...data, - ...pickSomeFieldsValue() + ...pickSomeFieldsValue(data) }); handleCheckFormData(); }; @@ -466,10 +467,10 @@ const AddModal: React.FC = (props) => { onOk(data); }; - const handleCancel = useCallback(() => { + const handleCancel = () => { onCancel?.(); axiosToken.current?.cancel?.(); - }, [onCancel]); + }; const showExtraButton = useMemo(() => { return warningStatus.show && warningStatus.type !== 'success'; @@ -614,4 +615,4 @@ const AddModal: React.FC = (props) => { ); }; -export default memo(AddModal); +export default AddModal; diff --git a/src/pages/playground/components/ground-embedding.tsx b/src/pages/playground/components/ground-embedding.tsx index 1e635dfa..ff80a43c 100644 --- a/src/pages/playground/components/ground-embedding.tsx +++ b/src/pages/playground/components/ground-embedding.tsx @@ -38,6 +38,7 @@ import { generateEmbeddingCode } from '../view-code/embedding'; import DynamicParams from './dynamic-params'; import FileList from './file-list'; import InputList from './input-list'; +import TokenUsage from './token-usage'; import ViewCommonCode from './view-common-code'; interface MessageProps { @@ -525,21 +526,29 @@ const GroundEmbedding: React.FC = forwardRef((props, ref) => { onSelect={handleonSelect} onPaste={handleOnPaste} > -
- -
- {lessTwoInput && ( - + {fileList.length > 0 && ( +
+ +
)} + {lessTwoInput && ( +
+ +
+ )} + diff --git a/src/pages/playground/components/ground-reranker.tsx b/src/pages/playground/components/ground-reranker.tsx index 3c5e25c0..973427b6 100644 --- a/src/pages/playground/components/ground-reranker.tsx +++ b/src/pages/playground/components/ground-reranker.tsx @@ -33,6 +33,7 @@ import '../style/system-message-wrap.less'; import { generateRerankCode } from '../view-code/rerank'; import DynamicParams from './dynamic-params'; import InputList from './input-list'; +import TokenUsage from './token-usage'; import ViewCommonCode from './view-common-code'; interface MessageProps { @@ -179,7 +180,7 @@ const GroundReranker: React.FC = forwardRef((props, ref) => { return res * 100; }; - const renderPercent = useCallback((data: any) => { + const renderPercent = (data: any) => { if (!data.showExtra || !data.percent) { return null; } @@ -208,7 +209,7 @@ const GroundReranker: React.FC = forwardRef((props, ref) => { ); - }, []); + }; const setMessageId = () => { messageId.current = messageId.current + 1; @@ -320,59 +321,52 @@ const GroundReranker: React.FC = forwardRef((props, ref) => { inputListRef.current?.handleAdd(); }; - const handleTextListChange = useCallback( - (list: { text: string; uid: number | string; name: string }[]) => { - const newList = list?.map((item: any) => { - item.percent = undefined; - item.score = undefined; - item.rank = undefined; - return item; + const handleTextListChange = ( + list: { text: string; uid: number | string; name: string }[] + ) => { + const newList = list?.map((item: any) => { + item.percent = undefined; + item.score = undefined; + item.rank = undefined; + return item; + }); + setTextList(newList); + }; + + const handleonSelect = (data: { + start: number; + end: number; + beforeText: string; + afterText: string; + index: number; + }) => { + selectionTextRef.current = data; + }; + + const handleOnPaste = (e: any, index: number) => { + if (!multiplePasteEnable.current) return; + const text = e.clipboardData.getData('text'); + if (text) { + const dataLlist = text.split('\n').map((item: string) => { + return { + text: item?.trim(), + name: '', + uid: setMessageId(), + percent: undefined, + score: undefined, + rank: undefined + }; }); - setTextList(newList); - }, - [] - ); + dataLlist[0].text = `${selectionTextRef.current?.beforeText || ''}${dataLlist[0].text}${selectionTextRef.current?.afterText || ''}`; + const result = [ + ...textList.slice(0, index), + ...dataLlist, + ...textList.slice(index + 1) + ].filter((item) => item.text); - const handleonSelect = useCallback( - (data: { - start: number; - end: number; - beforeText: string; - afterText: string; - index: number; - }) => { - selectionTextRef.current = data; - }, - [] - ); - - const handleOnPaste = useCallback( - (e: any, index: number) => { - if (!multiplePasteEnable.current) return; - const text = e.clipboardData.getData('text'); - if (text) { - const dataLlist = text.split('\n').map((item: string) => { - return { - text: item?.trim(), - name: '', - uid: setMessageId(), - percent: undefined, - score: undefined, - rank: undefined - }; - }); - dataLlist[0].text = `${selectionTextRef.current?.beforeText || ''}${dataLlist[0].text}${selectionTextRef.current?.afterText || ''}`; - const result = [ - ...textList.slice(0, index), - ...dataLlist, - ...textList.slice(index + 1) - ].filter((item) => item.text); - - setTextList(result); - } - }, - [textList] - ); + setTextList(result); + } + }; const renderExtra = useMemo(() => { if (modelMeta?.n_ctx && modelMeta?.n_slot) { @@ -469,15 +463,7 @@ const GroundReranker: React.FC = forwardRef((props, ref) => { {intl.formatMessage({ id: 'playground.embedding.documents' })} - - {' '} - {tokenResult?.total_tokens && ( - - {intl.formatMessage({ id: 'playground.tokenusage' })}:{' '} - {tokenResult?.total_tokens} - - )} - +
= forwardRef((props, ref) => { >
)} +
diff --git a/src/pages/playground/components/token-usage.tsx b/src/pages/playground/components/token-usage.tsx new file mode 100644 index 00000000..862d5847 --- /dev/null +++ b/src/pages/playground/components/token-usage.tsx @@ -0,0 +1,36 @@ +import { useIntl } from '@umijs/max'; +import React from 'react'; +import styled from 'styled-components'; + +const TokenUsageWrapper = styled.div` + font-size: var(--font-size-small); + display: flex; + align-items: center; + justify-content: center; + padding: 2px 5px; + .text { + color: var(--ant-orange); + } +`; + +const TokenUsage: React.FC<{ + tokenResult?: any; + [key: string]: any; +}> = ({ tokenResult, ...rest }) => { + const intl = useIntl(); + if (!tokenResult) { + return null; + } + return ( + + {tokenResult?.total_tokens && ( + + {intl.formatMessage({ id: 'playground.tokenusage' })}:{' '} + {tokenResult?.total_tokens} + + )} + + ); +}; + +export default TokenUsage;