Commit 71871f73 authored by Joel's avatar Joel

feat: frontend support state tps

parent dd4b3e2c
...@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next' ...@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
import useSWR from 'swr' import useSWR from 'swr'
import { fetchAppDetail } from '@/service/apps' import { fetchAppDetail } from '@/service/apps'
import type { PeriodParams } from '@/app/components/app/overview/appChart' import type { PeriodParams } from '@/app/components/app/overview/appChart'
import { AvgResponseTime, AvgSessionInteractions, ConversationsChart, CostChart, EndUsersChart, UserSatisfactionRate } from '@/app/components/app/overview/appChart' import { AvgResponseTime, AvgSessionInteractions, ConversationsChart, CostChart, EndUsersChart, TokenPerSecond, UserSatisfactionRate } from '@/app/components/app/overview/appChart'
import type { Item } from '@/app/components/base/select' import type { Item } from '@/app/components/base/select'
import { SimpleSelect } from '@/app/components/base/select' import { SimpleSelect } from '@/app/components/base/select'
import { TIME_PERIOD_LIST } from '@/app/components/app/log/filter' import { TIME_PERIOD_LIST } from '@/app/components/app/log/filter'
...@@ -64,11 +64,18 @@ export default function ChartView({ appId }: IChartViewProps) { ...@@ -64,11 +64,18 @@ export default function ChartView({ appId }: IChartViewProps) {
<AvgResponseTime period={period} id={appId} /> <AvgResponseTime period={period} id={appId} />
)} )}
</div> </div>
<div className='flex-1 ml-3'>
<TokenPerSecond period={period} id={appId} />
</div>
</div>
<div className='flex flex-row w-full mb-6'>
<div className='flex-1 ml-3'> <div className='flex-1 ml-3'>
<UserSatisfactionRate period={period} id={appId} /> <UserSatisfactionRate period={period} id={appId} />
</div> </div>
<div className='flex-1 ml-3'>
<CostChart period={period} id={appId} />
</div>
</div> </div>
<CostChart period={period} id={appId} />
</div> </div>
) )
} }
...@@ -316,6 +316,23 @@ export const AvgResponseTime: FC<IBizChartProps> = ({ id, period }) => { ...@@ -316,6 +316,23 @@ export const AvgResponseTime: FC<IBizChartProps> = ({ id, period }) => {
/> />
} }
export const TokenPerSecond: FC<IBizChartProps> = ({ id, period }) => {
const { t } = useTranslation()
const { data: response } = useSWR({ url: `/apps/${id}/statistics/tokens-per-second`, params: period.query }, getAppStatistics)
if (!response)
return <Loading />
const noDataFlag = !response.data || response.data.length === 0
return <Chart
basicInfo={{ title: t('appOverview.analysis.tps.title'), explanation: t('appOverview.analysis.tps.explanation'), timePeriod: period.name }}
chartData={!noDataFlag ? response : { data: getDefaultChartData({ ...(period.query ?? defaultPeriod), key: 'tps' }) } as any}
valueKey='tps'
chartType='conversations'
isAvg
unit={t('appOverview.analysis.tokenPS') as string}
{...(noDataFlag && { yMax: 100 })}
/>
}
export const UserSatisfactionRate: FC<IBizChartProps> = ({ id, period }) => { export const UserSatisfactionRate: FC<IBizChartProps> = ({ id, period }) => {
const { t } = useTranslation() const { t } = useTranslation()
const { data: response } = useSWR({ url: `/apps/${id}/statistics/user-satisfaction-rate`, params: period.query }, getAppStatistics) const { data: response } = useSWR({ url: `/apps/${id}/statistics/user-satisfaction-rate`, params: period.query }, getAppStatistics)
......
...@@ -81,6 +81,7 @@ const translation = { ...@@ -81,6 +81,7 @@ const translation = {
analysis: { analysis: {
title: 'Analysis', title: 'Analysis',
ms: 'ms', ms: 'ms',
tokenPS: 'Token/s',
totalMessages: { totalMessages: {
title: 'Total Messages', title: 'Total Messages',
explanation: 'Daily AI interactions count; prompt engineering/debugging excluded.', explanation: 'Daily AI interactions count; prompt engineering/debugging excluded.',
...@@ -106,6 +107,10 @@ const translation = { ...@@ -106,6 +107,10 @@ const translation = {
title: 'Avg. Response Time', title: 'Avg. Response Time',
explanation: 'Time (ms) for AI to process/respond; for text-based apps.', explanation: 'Time (ms) for AI to process/respond; for text-based apps.',
}, },
tps: {
title: 'Token Output Speed',
explanation: 'Measure the performance of the LLM. Count the Tokens output speed of LLM from the beginning of the request to the completion of the output.',
},
}, },
} }
......
...@@ -81,6 +81,7 @@ const translation = { ...@@ -81,6 +81,7 @@ const translation = {
analysis: { analysis: {
title: '分析', title: '分析',
ms: '毫秒', ms: '毫秒',
tokenPS: 'Token/秒',
totalMessages: { totalMessages: {
title: '全部消息数', title: '全部消息数',
explanation: '反映 AI 每天的互动总次数,每回答用户一个问题算一条 Message。提示词编排和调试的消息不计入。', explanation: '反映 AI 每天的互动总次数,每回答用户一个问题算一条 Message。提示词编排和调试的消息不计入。',
...@@ -106,6 +107,10 @@ const translation = { ...@@ -106,6 +107,10 @@ const translation = {
title: '平均响应时间', title: '平均响应时间',
explanation: '衡量 AI 应用处理和回复用户请求所花费的平均时间,单位为毫秒,反映性能和用户体验。仅在文本型应用提供。', explanation: '衡量 AI 应用处理和回复用户请求所花费的平均时间,单位为毫秒,反映性能和用户体验。仅在文本型应用提供。',
}, },
tps: {
title: 'Token 输出速度',
explanation: '衡量 LLM 的性能。统计 LLM 从请求开始到输出完毕这段期间的 Tokens 输出速度。',
},
}, },
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment