From 37429f722cec48c15a31f03da1a01d1fa793f710 Mon Sep 17 00:00:00 2001
From: MartialBE <me@xiao5.info>
Date: Sat, 30 Mar 2024 20:57:13 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20improve:=20=20Show=20the?=
 =?UTF-8?q?=20speed=20of=20model=20generation=20(#132)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/ui-component/TableHead.js       | 24 ++++++++++++++++---
 web/src/views/Log/component/TableRow.js | 31 +++++++++++++++++++++----
 web/src/views/Log/index.js              |  1 +
 3 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/web/src/ui-component/TableHead.js b/web/src/ui-component/TableHead.js
index 400efc50..96da229d 100644
--- a/web/src/ui-component/TableHead.js
+++ b/web/src/ui-component/TableHead.js
@@ -1,11 +1,29 @@
 import PropTypes from 'prop-types';
-import { TableCell, TableHead, TableRow, TableSortLabel } from '@mui/material';
+import { TableCell, TableHead, TableRow, TableSortLabel, Tooltip, IconButton, Typography, Box } from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 
 const KeywordTableHead = ({ order, orderBy, headLabel, onRequestSort }) => {
   const onSort = (property) => (event) => {
     onRequestSort(event, property);
   };
 
+  const label = (cell) => {
+    if (cell.tooltip) {
+      return (
+        <Box display="flex" alignItems="center">
+          <Typography variant="body1">{cell.label}</Typography>
+          <Tooltip title={cell.tooltip} placement="bottom-start" enterDelay={300}>
+            <IconButton size="small">
+              <HelpOutlineIcon fontSize="inherit" />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      );
+    } else {
+      return cell.label;
+    }
+  };
+
   return (
     <TableHead>
       <TableRow>
@@ -18,7 +36,7 @@ const KeywordTableHead = ({ order, orderBy, headLabel, onRequestSort }) => {
               sx={{ width: headCell.width, minWidth: headCell.minWidth }}
             >
               {headCell.disableSort ? (
-                headCell.label
+                label(headCell)
               ) : (
                 <TableSortLabel
                   hideSortIcon
@@ -26,7 +44,7 @@ const KeywordTableHead = ({ order, orderBy, headLabel, onRequestSort }) => {
                   direction={orderBy === headCell.id ? order : 'asc'}
                   onClick={onSort(headCell.id)}
                 >
-                  {headCell.label}
+                  {label(headCell)}
                 </TableSortLabel>
               )}
             </TableCell>
diff --git a/web/src/views/Log/component/TableRow.js b/web/src/views/Log/component/TableRow.js
index 202fad93..456c2e88 100644
--- a/web/src/views/Log/component/TableRow.js
+++ b/web/src/views/Log/component/TableRow.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import { TableRow, TableCell } from '@mui/material';
+import { TableRow, TableCell, Stack } from '@mui/material';
 
 import { timestamp2string, renderQuota } from 'utils/common';
 import Label from 'ui-component/Label';
@@ -40,9 +40,30 @@ function requestTimeLabelOptions(request_time) {
   return color;
 }
 
+function requestTSLabelOptions(request_ts) {
+  let color = 'success';
+  if (request_ts === 0) {
+    color = 'default';
+  } else if (request_ts <= 10) {
+    color = 'error';
+  } else if (request_ts <= 15) {
+    color = 'secondary';
+  } else if (request_ts <= 20) {
+    color = 'primary';
+  }
+
+  return color;
+}
+
 export default function LogTableRow({ item, userIsAdmin }) {
   let request_time = item.request_time / 1000;
-  request_time = request_time.toFixed(2) + ' 秒';
+  let request_time_str = request_time.toFixed(2) + ' 秒';
+  let request_ts = 0;
+  let request_ts_str = '';
+  if (request_time > 0 && item.completion_tokens > 0) {
+    request_ts = (item.completion_tokens ? item.completion_tokens : 1) / request_time;
+    request_ts_str = request_ts.toFixed(2) + ' t/s';
+  }
 
   return (
     <>
@@ -73,8 +94,10 @@ export default function LogTableRow({ item, userIsAdmin }) {
           )}
         </TableCell>
         <TableCell>
-          {' '}
-          <Label color={requestTimeLabelOptions(item.request_time)}> {item.request_time == 0 ? '无' : request_time} </Label>
+          <Stack direction="row" spacing={1}>
+            <Label color={requestTimeLabelOptions(item.request_time)}> {item.request_time == 0 ? '无' : request_time_str} </Label>
+            {request_ts_str && <Label color={requestTSLabelOptions(request_ts)}> {request_ts_str} </Label>}
+          </Stack>
         </TableCell>
         <TableCell>{item.prompt_tokens || '0'}</TableCell>
         <TableCell>{item.completion_tokens || '0'}</TableCell>
diff --git a/web/src/views/Log/index.js b/web/src/views/Log/index.js
index 742758de..351dd75b 100644
--- a/web/src/views/Log/index.js
+++ b/web/src/views/Log/index.js
@@ -194,6 +194,7 @@ export default function Log() {
                   {
                     id: 'duration',
                     label: '耗时',
+                    tooltip: 't/s：输出令牌的数量除以总生成时间，表示生成速度',
                     disableSort: true
                   },
                   {