chore: remove labels
This commit is contained in:
jialin
@@ -22,15 +22,15 @@ const Benchmark: React.FC = () => {
|
||||
label: 'Token Length (In/Out)',
|
||||
children: (
|
||||
<span>
|
||||
{detailData?.dataset_input_tokens || '-'} /{' '}
|
||||
{detailData?.dataset_prompt_tokens || '-'} /{' '}
|
||||
{detailData?.dataset_output_tokens || '-'}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
label: 'Seed',
|
||||
children: detailData?.seed || '-'
|
||||
key: '7',
|
||||
label: 'Total Requests',
|
||||
children: detailData?.total_requests || '-'
|
||||
},
|
||||
{
|
||||
key: '6',
|
||||
@@ -38,9 +38,9 @@ const Benchmark: React.FC = () => {
|
||||
children: detailData?.request_rate || '-'
|
||||
},
|
||||
{
|
||||
key: '7',
|
||||
label: 'Total Requests',
|
||||
children: detailData?.total_requests || '-'
|
||||
key: '5',
|
||||
label: 'Seed',
|
||||
children: detailData?.seed || '-'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import StatusTag from '@/components/status-tag';
|
||||
import { InstanceStatusMapValue, status } from '@/pages/llmodels/config';
|
||||
import { convertFileSize } from '@/utils';
|
||||
import { Descriptions } from 'antd';
|
||||
import { Descriptions, Flex, Tag } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useDetailContext } from '../../config/detail-context';
|
||||
@@ -81,6 +81,100 @@ const Instance: React.FC = () => {
|
||||
];
|
||||
}, [detailData]);
|
||||
|
||||
const paramsItems = useMemo(() => {
|
||||
const { snapshot } = detailData;
|
||||
const [instanceName, instanceData] =
|
||||
Object.entries(snapshot.instances || {})[0] || [];
|
||||
return [
|
||||
{
|
||||
key: '1',
|
||||
label: 'Backend Parameters',
|
||||
children: (
|
||||
<Flex gap={8} wrap="wrap">
|
||||
{instanceData?.backend_parameters.map(
|
||||
(param: string, index: number) => (
|
||||
<Tag key={index} style={{ margin: 0 }}>
|
||||
{param}
|
||||
</Tag>
|
||||
)
|
||||
)}
|
||||
</Flex>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: 'Extended KV Cache',
|
||||
children: (
|
||||
<Flex gap={8} wrap="wrap">
|
||||
{instanceData?.extended_kv_cache?.enabled ? (
|
||||
<>
|
||||
<span className="flex-center">
|
||||
<span>RAM-to-VRAM Ratio:</span>
|
||||
<span>{instanceData?.extended_kv_cache?.ram_ratio}</span>
|
||||
</span>
|
||||
<span className="flex-center">
|
||||
<span>Maximum RAM Size (GiB):</span>
|
||||
<span>{instanceData?.extended_kv_cache?.ram_size}</span>
|
||||
</span>
|
||||
<span className="flex-center">
|
||||
<span>Size of Cache Chunks:</span>
|
||||
<span>{instanceData?.extended_kv_cache?.chunk_size}</span>
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</Flex>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
label: 'Speculative Decoding',
|
||||
children: (
|
||||
<Flex gap={8} wrap="wrap">
|
||||
{instanceData?.speculative_config?.enabled ? (
|
||||
<>
|
||||
<span className="flex-center">
|
||||
<span>Algorithm:</span>
|
||||
<span>{instanceData?.speculative_config?.algorithm}</span>
|
||||
</span>
|
||||
<span className="flex-center">
|
||||
<span>Draft Model:</span>
|
||||
<span>{instanceData?.speculative_config?.draft_model}</span>
|
||||
</span>
|
||||
<span className="flex-center">
|
||||
<span>Number of Draft Tokens:</span>
|
||||
<span>
|
||||
{instanceData?.speculative_config?.num_draft_tokens}
|
||||
</span>
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</Flex>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'Environment Variables',
|
||||
children: (
|
||||
<Flex gap={8} wrap="wrap">
|
||||
{instanceData?.env
|
||||
? Object.entries(instanceData?.env || {}).map(
|
||||
([key, value], index: number) => (
|
||||
<Tag key={index} style={{ margin: 0 }}>
|
||||
{`${key}=${value}`}
|
||||
</Tag>
|
||||
)
|
||||
)
|
||||
: '-'}
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
];
|
||||
}, [detailData]);
|
||||
|
||||
return (
|
||||
<Section title="Model Instance">
|
||||
<Descriptions
|
||||
@@ -94,6 +188,18 @@ const Instance: React.FC = () => {
|
||||
}
|
||||
}}
|
||||
></Descriptions>
|
||||
<Descriptions
|
||||
style={{ marginTop: '12px' }}
|
||||
items={paramsItems}
|
||||
colon={false}
|
||||
column={2}
|
||||
layout="vertical"
|
||||
styles={{
|
||||
content: {
|
||||
justifyContent: 'flex-start'
|
||||
}
|
||||
}}
|
||||
></Descriptions>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,7 +2,7 @@ import AutoTooltip from '@/components/auto-tooltip';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Col, Descriptions, DescriptionsProps, Row, Statistic } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { round } from 'lodash';
|
||||
import _, { round } from 'lodash';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { useDetailContext } from '../../config/detail-context';
|
||||
@@ -32,6 +32,7 @@ const Box = styled.div`
|
||||
const Summary: React.FC = () => {
|
||||
const { detailData, clusterList } = useDetailContext();
|
||||
const intl = useIntl();
|
||||
const rawMetrics = _.get(detailData, ['raw_metrics', 'benchmarks', '0'], {});
|
||||
|
||||
const items: DescriptionsProps['items'] = [
|
||||
{
|
||||
@@ -54,15 +55,10 @@ const Summary: React.FC = () => {
|
||||
label: 'Dataset',
|
||||
children: detailData.dataset_name
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
label: 'Concurrency',
|
||||
children: detailData.concurrency
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
label: 'Duration (s)',
|
||||
children: detailData.duration
|
||||
children: round(rawMetrics.duration || 0, 2)
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
@@ -75,43 +71,68 @@ const Summary: React.FC = () => {
|
||||
label: 'Total Requests',
|
||||
key: 'total_requests',
|
||||
value: detailData.total_requests,
|
||||
precision: 0,
|
||||
unit: ''
|
||||
},
|
||||
{
|
||||
label: 'Success Rate',
|
||||
key: 'success_rate',
|
||||
value: detailData.success_rate,
|
||||
value: round(
|
||||
(_.get(rawMetrics, 'metrics.request_totals.successful') /
|
||||
_.get(rawMetrics, 'metrics.request_totals.total')) *
|
||||
100 || 0,
|
||||
1
|
||||
),
|
||||
color: 'var(--ant-color-success)',
|
||||
precision: 0,
|
||||
unit: '%'
|
||||
},
|
||||
{
|
||||
label: 'TPS',
|
||||
key: 'tps',
|
||||
value: detailData.tokens_per_second_mean,
|
||||
unit: 't/s'
|
||||
label: 'Incomplete Count',
|
||||
key: 'incomplete_count',
|
||||
value: _.get(rawMetrics, 'metrics.request_totals.incomplete'),
|
||||
color: 'var(--ant-color-warning)',
|
||||
unit: ''
|
||||
},
|
||||
// {
|
||||
// label: 'Error Count',
|
||||
// key: 'error_count',
|
||||
// value: _.get(rawMetrics, 'metrics.request_totals.error'),
|
||||
// color: 'var(--ant-color-error)',
|
||||
// unit: ''
|
||||
// },
|
||||
{
|
||||
label: 'Concurrency',
|
||||
key: 'concurrency',
|
||||
value: _.get(rawMetrics, 'metrics.request_concurrency.successful.mean'),
|
||||
precision: 2,
|
||||
unit: ''
|
||||
},
|
||||
{
|
||||
label: 'RPS',
|
||||
key: 'rps',
|
||||
value: detailData.requests_per_second_mean,
|
||||
precision: 2,
|
||||
unit: 'req/s'
|
||||
},
|
||||
// {
|
||||
// label: 'ITL',
|
||||
// key: 'itl',
|
||||
// value: detailData.inter_token_latency_mean,
|
||||
// unit: 'ms'
|
||||
// },
|
||||
{
|
||||
label: 'ITL',
|
||||
key: 'itl',
|
||||
value: detailData.inter_token_latency_mean,
|
||||
unit: 'ms'
|
||||
},
|
||||
{
|
||||
label: 'TPOT',
|
||||
key: 'time_per_output_token_mean',
|
||||
value: detailData.time_per_output_token_mean,
|
||||
precision: 2,
|
||||
unit: 'ms'
|
||||
},
|
||||
{
|
||||
label: 'TTFT',
|
||||
key: 'time_to_first_token_mean',
|
||||
value: detailData.time_to_first_token_mean,
|
||||
precision: 2,
|
||||
unit: 'ms'
|
||||
}
|
||||
];
|
||||
@@ -119,36 +140,36 @@ const Summary: React.FC = () => {
|
||||
const throughputFields = [
|
||||
{
|
||||
key: '3',
|
||||
label: 'Total throughput',
|
||||
children: `${round(detailData.total_through || 0, 2)} t/s`
|
||||
label: 'Total token throughput',
|
||||
children: `${round(detailData.tokens_per_second_mean || 0, 2)} t/s`
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
label: 'Request throughput',
|
||||
children: `${round(detailData.request_through || 0, 2)} t/s`
|
||||
label: 'Request token throughput',
|
||||
children: `${round(detailData.prompt_tokens_per_second_mean || 0, 2)} t/s`
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'Output throughput',
|
||||
children: `${round(detailData.output_through || 0, 2)} t/s`
|
||||
label: 'Output token throughput',
|
||||
children: `${round(detailData.output_tokens_per_second_mean || 0, 2)} t/s`
|
||||
}
|
||||
];
|
||||
|
||||
const latencyFields = [
|
||||
{
|
||||
key: '1',
|
||||
label: 'Request Latency',
|
||||
children: `${round(detailData.request_latency_mean, 2)} t/s`
|
||||
label: 'Avg Request Latency',
|
||||
children: `${round(detailData.request_latency_mean, 2)} ms`
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'Avg Time to First Token',
|
||||
children: `${round(detailData.time_to_first_token_mean, 2)} t/s`
|
||||
children: `${round(detailData.time_to_first_token_mean, 2)} ms`
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: 'Avg Time Per Output Token',
|
||||
children: `${round(detailData.time_per_output_token_mean, 2)} t/s`
|
||||
children: `${round(detailData.time_per_output_token_mean, 2)} ms`
|
||||
}
|
||||
];
|
||||
|
||||
@@ -156,12 +177,12 @@ const Summary: React.FC = () => {
|
||||
<Container>
|
||||
<Row gutter={16}>
|
||||
{cardFields.map((field) => (
|
||||
<Col span={4} key={field.key} style={{ padding: '8px' }}>
|
||||
<Col span={6} key={field.key} style={{ padding: '8px' }}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title={field.label}
|
||||
value={field.value}
|
||||
precision={2}
|
||||
precision={field.precision}
|
||||
styles={{
|
||||
content: {
|
||||
color: field.color,
|
||||
|
||||
Reference in New Issue
Block a user