119 lines
2.8 KiB
TypeScript
119 lines
2.8 KiB
TypeScript
import { Table } from 'antd';
|
|
import { round } from 'lodash';
|
|
import React from 'react';
|
|
import { useDetailContext } from '../../config/detail-context';
|
|
import Title from './title';
|
|
|
|
const columns = [
|
|
{
|
|
title: 'TTFT (ms)',
|
|
dataIndex: 'time_to_first_token_ms',
|
|
render: (value: number) => round(value, 2)
|
|
},
|
|
{
|
|
title: 'ITL (ms)',
|
|
dataIndex: 'inter_token_latency_ms',
|
|
render: (value: number) => round(value, 2)
|
|
},
|
|
{
|
|
title: 'TPOT (ms)',
|
|
dataIndex: 'time_per_output_token_ms',
|
|
render: (value: number) => round(value, 2)
|
|
},
|
|
{
|
|
title: 'Latency (s)',
|
|
dataIndex: 'request_latency',
|
|
render: (value: number) => round(value, 2)
|
|
},
|
|
{
|
|
title: 'Input tokens',
|
|
dataIndex: 'prompt_token_count',
|
|
render: (value: number) => round(value, 0)
|
|
},
|
|
{
|
|
title: 'Output tokens',
|
|
dataIndex: 'output_token_count',
|
|
render: (value: number) => round(value, 0)
|
|
},
|
|
{
|
|
title: 'Input (Tokens/s)',
|
|
dataIndex: 'prompt_tokens_per_second',
|
|
render: (value: number) => round(value, 2)
|
|
},
|
|
{
|
|
title: 'Output (Tokens/s)',
|
|
dataIndex: 'output_tokens_per_second',
|
|
render: (value: number) => round(value, 2)
|
|
},
|
|
{
|
|
title: 'Total (Tokens/s)',
|
|
dataIndex: 'tokens_per_second',
|
|
render: (value: number) => round(value, 2)
|
|
}
|
|
];
|
|
|
|
const PERCENTILES = [
|
|
{ key: 'p50', label: '50%' },
|
|
{ key: 'p90', label: '90%' },
|
|
{ key: 'p99', label: '99%' }
|
|
] as const;
|
|
|
|
const PercentileResult: React.FC = () => {
|
|
const { detailData } = useDetailContext();
|
|
const metrics = detailData?.raw_metrics?.benchmarks?.[0]?.metrics || {};
|
|
|
|
const buildPercentileTable = (metrics: any) => {
|
|
return PERCENTILES.map(({ key, label }) => {
|
|
const row: any = { percentile: label };
|
|
|
|
columns.forEach(({ dataIndex }) => {
|
|
row[dataIndex] =
|
|
metrics?.[dataIndex]?.successful?.percentiles?.[key] ?? 0;
|
|
});
|
|
|
|
return row;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Title>Percentile</Title>
|
|
<Table
|
|
size="small"
|
|
columns={[
|
|
{
|
|
title: <span style={{ fontWeight: 500 }}>Percentile</span>,
|
|
dataIndex: 'percentile',
|
|
render: (value: string) => (
|
|
<span style={{ fontWeight: 500 }}>{value}</span>
|
|
)
|
|
},
|
|
...columns
|
|
]}
|
|
dataSource={buildPercentileTable(metrics)}
|
|
rowKey="percentile"
|
|
pagination={false}
|
|
styles={{
|
|
header: {
|
|
row: {
|
|
backgroundColor: 'transparent'
|
|
},
|
|
cell: {
|
|
fontWeight: 400,
|
|
height: 40,
|
|
borderBottom: '1px solid var(--ant-color-split)'
|
|
}
|
|
},
|
|
body: {
|
|
cell: {
|
|
height: 54
|
|
}
|
|
}
|
|
}}
|
|
></Table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PercentileResult;
|