chore: remove labels

src/locales/en-US/benchmark.ts

@@ -1,5 +1,5 @@
 export default {
-  'benchmark.title': 'Benchmark',
+  'benchmark.title': 'Benchmarks',
   'benchmark.button.add': 'Add Benchmark',
   'benchmark.button.compare': 'Compare',
   'benchmark.table.model': 'Model',

src/locales/en-US/menu.ts

@@ -14,7 +14,7 @@ export default {
   'menu.models.catalog': 'Model Catalog',
   'menu.models.deployment': 'Deployments',
   'menu.models.userModels': 'My Models',
-  'menu.models.benchmark': 'Benchmark',
+  'menu.models.benchmark': 'Benchmarks',
   'menu.modelCatalog': 'Catalog',
   'menu.resources': 'Resources',
   'menu.apikeys': 'API Keys',

src/locales/ja-JP/benchmark.ts

@@ -1,5 +1,5 @@
 export default {
-  'benchmark.title': 'Benchmark',
+  'benchmark.title': 'Benchmarks',
   'benchmark.button.add': 'Add Benchmark',
   'benchmark.button.compare': 'Compare',
   'benchmark.table.model': 'Model',

src/locales/ja-JP/menu.ts

@@ -13,7 +13,7 @@ export default {
   'menu.models.modelCatalog': 'カタログ',
   'menu.models.catalog': 'モデルカタログ',
   'menu.models.deployment': 'Deployment',
-  'menu.models.benchmark': 'Benchmark',
+  'menu.models.benchmark': 'Benchmarks',
   'menu.modelCatalog': 'カタログ',
   'menu.resources': 'リソース',
   'menu.apikeys': 'APIキー',
@@ -52,5 +52,5 @@ export default {
 // 12. 'menu.clusterManagement.clusterDetail': 'Cluster Detail',
 // 13. 'menu.clusterManagement.clusterCreate': 'Create Cluster',
 // 14. 'menu.resources.backendsList': 'Inference Backends',
-// 15. 'menu.models.benchmark': 'Benchmark',
+// 15. 'menu.models.benchmark': 'Benchmarks',
 // ========== End of To-Do List ==========

src/locales/ru-RU/benchmark.ts

@@ -1,5 +1,5 @@
 export default {
-  'benchmark.title': 'Benchmark',
+  'benchmark.title': 'Benchmarks',
   'benchmark.button.add': 'Add Benchmark',
   'benchmark.button.compare': 'Compare',
   'benchmark.table.model': 'Model',

src/locales/ru-RU/menu.ts

@@ -13,7 +13,7 @@ export default {
   'menu.models.modelCatalog': 'Каталог',
   'menu.models.catalog': 'Каталог моделей',
   'menu.models.deployment': 'Запуск',
-  'menu.models.benchmark': 'Benchmark',
+  'menu.models.benchmark': 'Benchmarks',
   'menu.modelCatalog': 'Каталог',
   'menu.resources': 'Ресурсы',
   'menu.apikeys': 'API-ключи',
@@ -38,5 +38,5 @@ export default {
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-// 1. 'menu.models.benchmark': 'Benchmark',
+// 1. 'menu.models.benchmark': 'Benchmarks',
 // ========== End of To-Do List ==========

src/pages/benchmark/components/configure/benchmark.tsx

@@ -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',
+      key: '7',
-      label: 'Seed',
+      label: 'Total Requests',
-      children: detailData?.seed || '-'
+      children: detailData?.total_requests || '-'
     },
     {
       key: '6',
@@ -38,9 +38,9 @@ const Benchmark: React.FC = () => {
       children: detailData?.request_rate || '-'
     },
     {
-      key: '7',
+      key: '5',
-      label: 'Total Requests',
+      label: 'Seed',
-      children: detailData?.total_requests || '-'
+      children: detailData?.seed || '-'
     }
   ];
 

src/pages/benchmark/components/configure/instance.tsx

@@ -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>
   );
 };

src/pages/benchmark/components/summary/basic.tsx

@@ -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',
+      label: 'Incomplete Count',
-      key: 'tps',
+      key: 'incomplete_count',
-      value: detailData.tokens_per_second_mean,
+      value: _.get(rawMetrics, 'metrics.request_totals.incomplete'),
-      unit: 't/s'
+      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',
+      label: 'ITL',
-    //   key: 'itl',
+      key: 'itl',
-    //   value: detailData.inter_token_latency_mean,
+      value: detailData.inter_token_latency_mean,
-    //   unit: 'ms'
+      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',
+      label: 'Total token throughput',
-      children: `${round(detailData.total_through || 0, 2)} t/s`
+      children: `${round(detailData.tokens_per_second_mean || 0, 2)} t/s`
     },
     {
       key: '1',
-      label: 'Request throughput',
+      label: 'Request token throughput',
-      children: `${round(detailData.request_through || 0, 2)} t/s`
+      children: `${round(detailData.prompt_tokens_per_second_mean || 0, 2)} t/s`
     },
     {
       key: '2',
-      label: 'Output throughput',
+      label: 'Output token throughput',
-      children: `${round(detailData.output_through || 0, 2)} t/s`
+      children: `${round(detailData.output_tokens_per_second_mean || 0, 2)} t/s`
     }
   ];
 
   const latencyFields = [
     {
       key: '1',
-      label: 'Request Latency',
+      label: 'Avg Request Latency',
-      children: `${round(detailData.request_latency_mean, 2)} t/s`
+      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,

src/pages/benchmark/config/detail-types.ts

@@ -65,6 +65,8 @@ export interface GPUData {
 }
 
 export interface BenchmarkDetail {
+  profile: string;
+  seed: number;
   requests_per_second_mean: number;
   request_latency_mean: number;
   time_per_output_token_mean: number;

src/pages/benchmark/details.tsx

@@ -19,7 +19,6 @@ const Details: React.FC = () => {
       title: name
     }
   ];
-
   useEffect(() => {
     document.title = `${intl.formatMessage({ id: 'benchmark.title' })} - ${name}`;
   }, [name, intl]);

src/pages/benchmark/forms/basic.tsx

@@ -1,4 +1,3 @@
-import LabelSelector from '@/components/label-selector';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
@@ -13,7 +12,6 @@ import { useQueryModelInstancesList } from '@/pages/llmodels/services/use-query-
 import { useQueryModelList } from '@/pages/llmodels/services/use-query-model-list';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
-import _ from 'lodash';
 import React, { useEffect } from 'react';
 import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
@@ -21,7 +19,6 @@ import { FormData } from '../config/types';
 const BasicForm: React.FC = () => {
   const intl = useIntl();
   const form = Form.useFormInstance();
-  const labels = Form.useWatch('labels', form);
   const { getRuleMessage } = useAppUtils();
   const { action, open } = useFormContext();
   const {
@@ -43,10 +40,6 @@ const BasicForm: React.FC = () => {
     instanceList
   } = useQueryModelInstancesList();
 
-  const handleLabelsChange = (labels: object) => {
-    form.setFieldValue('labels', labels);
-  };
-
   const onModelListOpenChange = async (open: boolean) => {
     if (open && modelList.length === 0) {
       await form.validateFields(['cluster_id']);
@@ -186,41 +179,7 @@ const BasicForm: React.FC = () => {
           required
         ></SealSelect>
       </Form.Item>
-      <Form.Item<FormData>
+
-        name="labels"
-        rules={[
-          () => ({
-            validator(rule, value) {
-              if (_.keys(value).length > 0) {
-                if (_.some(_.keys(value), (k: string) => !value[k])) {
-                  return Promise.reject(
-                    intl.formatMessage(
-                      {
-                        id: 'common.validate.value'
-                      },
-                      {
-                        name: intl.formatMessage({
-                          id: 'resources.form.label'
-                        })
-                      }
-                    )
-                  );
-                }
-              }
-              return Promise.resolve();
-            }
-          })
-        ]}
-      >
-        <LabelSelector
-          label={intl.formatMessage({
-            id: 'resources.table.labels'
-          })}
-          labels={labels}
-          btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
-          onChange={handleLabelsChange}
-        ></LabelSelector>
-      </Form.Item>
       <Form.Item<FormData> name="description">
         <SealInput.TextArea
           scaleSize={true}

src/pages/benchmark/forms/labels.tsx

@@ -0,0 +1,55 @@
+import LabelSelector from '@/components/label-selector';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import _ from 'lodash';
+import { FormData } from '../config/types';
+
+const LabelsForm: React.FC = () => {
+  const form = Form.useFormInstance();
+  const labels = Form.useWatch('labels', form);
+  const intl = useIntl();
+
+  const handleLabelsChange = (labels: object) => {
+    form.setFieldValue('labels', labels);
+  };
+
+  return (
+    <Form.Item<FormData>
+      name="labels"
+      rules={[
+        () => ({
+          validator(rule, value) {
+            if (_.keys(value).length > 0) {
+              if (_.some(_.keys(value), (k: string) => !value[k])) {
+                return Promise.reject(
+                  intl.formatMessage(
+                    {
+                      id: 'common.validate.value'
+                    },
+                    {
+                      name: intl.formatMessage({
+                        id: 'resources.form.label'
+                      })
+                    }
+                  )
+                );
+              }
+            }
+            return Promise.resolve();
+          }
+        })
+      ]}
+    >
+      <LabelSelector
+        label={intl.formatMessage({
+          id: 'resources.table.labels'
+        })}
+        labels={labels}
+        btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
+        onChange={handleLabelsChange}
+      ></LabelSelector>
+    </Form.Item>
+  );
+};
+
+export default LabelsForm;