perf: 美化数据看板

web/src/helpers/render.js

@@ -116,6 +116,45 @@ const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo',
     'purple', 'red', 'teal', 'violet', 'yellow'
 ]
 
+export const modelColorMap = {
+    'dall-e': 'rgb(147,112,219)',  // 深紫色
+    'dall-e-2': 'rgb(147,112,219)',  // 介于紫色和蓝色之间的色调
+    'dall-e-3': 'rgb(153,50,204)',  // 介于紫罗兰和洋红之间的色调
+    'midjourney': 'rgb(136,43,180)',  // 介于紫罗兰和洋红之间的色调
+    'gpt-3.5-turbo': 'rgb(184,227,167)',  // 浅绿色
+    'gpt-3.5-turbo-0301': 'rgb(131,220,131)',  // 亮绿色
+    'gpt-3.5-turbo-0613': 'rgb(60,179,113)',  // 海洋绿
+    'gpt-3.5-turbo-1106': 'rgb(32,178,170)',  // 浅海洋绿
+    'gpt-3.5-turbo-16k': 'rgb(252,200,149)',  // 淡橙色
+    'gpt-3.5-turbo-16k-0613': 'rgb(255,181,119)',  // 淡桃色
+    'gpt-3.5-turbo-instruct': 'rgb(175,238,238)',  // 粉蓝色
+    'gpt-4': 'rgb(135,206,235)',  // 天蓝色
+    'gpt-4-0314': 'rgb(70,130,180)',  // 钢蓝色
+    'gpt-4-0613': 'rgb(100,149,237)',  // 矢车菊蓝
+    'gpt-4-1106-preview': 'rgb(30,144,255)',  // 道奇蓝
+    'gpt-4-32k': 'rgb(104,111,238)',  // 中紫色
+    'gpt-4-32k-0314': 'rgb(90,105,205)',  // 暗灰蓝色
+    'gpt-4-32k-0613': 'rgb(61,71,139)',  // 暗蓝灰色
+    'gpt-4-all': 'rgb(65,105,225)',  // 皇家蓝
+    'gpt-4-gizmo-*': 'rgb(0,0,255)',  // 纯蓝色
+    'gpt-4-vision-preview': 'rgb(25,25,112)',  // 午夜蓝
+    'text-ada-001': 'rgb(255,192,203)',  // 粉红色
+    'text-babbage-001': 'rgb(255,160,122)',  // 浅珊瑚色
+    'text-curie-001': 'rgb(219,112,147)',  // 苍紫罗兰色
+    'text-davinci-002': 'rgb(199,21,133)',  // 中紫罗兰红色
+    'text-davinci-003': 'rgb(219,112,147)',  // 苍紫罗兰色（与Curie相同，表示同一个系列）
+    'text-davinci-edit-001': 'rgb(255,105,180)',  // 热粉色
+    'text-embedding-ada-002': 'rgb(255,182,193)',  // 浅粉红
+    'text-embedding-v1': 'rgb(255,174,185)',  // 浅粉红色（略有区别）
+    'text-moderation-latest': 'rgb(255,130,171)',  // 强粉色
+    'text-moderation-stable': 'rgb(255,160,122)',  // 浅珊瑚色（与Babbage相同，表示同一类功能）
+    'tts-1': 'rgb(255,140,0)',  // 深橙色
+    'tts-1-1106': 'rgb(255,165,0)',  // 橙色
+    'tts-1-hd': 'rgb(255,215,0)',  // 金色
+    'tts-1-hd-1106': 'rgb(255,223,0)',  // 金黄色（略有区别）
+    'whisper-1': 'rgb(245,245,220)'  // 米色
+}
+
 export function stringToColor(str) {
     let sum = 0;
     // 对字符串中的每个字符进行操作

web/src/pages/Detail/index.js

@@ -3,7 +3,13 @@ import {Button, Col, Form, Layout, Row, Spin} from "@douyinfe/semi-ui";
 import VChart from '@visactor/vchart';
 import {useEffectOnce} from "usehooks-ts";
 import {API, isAdmin, showError, timestamp2string, timestamp2string1} from "../../helpers";
-import {getQuotaWithUnit, renderNumber, renderQuotaNumberWithDigit} from "../../helpers/render";
+import {
+    getQuotaWithUnit, modelColorMap,
+    renderNumber,
+    renderQuota,
+    renderQuotaNumberWithDigit,
+    stringToColor
+} from "../../helpers/render";
 
 const Detail = (props) => {
 
@@ -23,8 +29,8 @@ const Detail = (props) => {
     const [modelDataPieChart, setModelDataPieChart] = useState(null);
     const [loading, setLoading] = useState(false);
     const [quotaData, setQuotaData] = useState([]);
-    const [quotaDataPie, setQuotaDataPie] = useState([]);
-    const [quotaDataLine, setQuotaDataLine] = useState([]);
+    const [consumeQuota, setConsumeQuota] = useState(0);
+    const [times, setTimes] = useState(0);
 
     const handleInputChange = (value, name) => {
         setInputs((inputs) => ({...inputs, [name]: value}));
@@ -48,7 +54,8 @@ const Detail = (props) => {
         },
         title: {
             visible: true,
-            text: '模型消耗分布（小时）'
+            text: '模型消耗分布（小时）',
+            subtext: '0'
         },
         bar: {
             // The state style of bar
@@ -85,6 +92,9 @@ const Detail = (props) => {
                     return array;
                 }
             }
+        },
+        color: {
+            specified: modelColorMap
         }
     };
 
@@ -140,6 +150,9 @@ const Detail = (props) => {
                     }
                 ]
             }
+        },
+        color: {
+            specified: modelColorMap
         }
     };
 
@@ -200,8 +213,12 @@ const Detail = (props) => {
         }
         let pieData = [];
         let lineData = [];
+        let consumeQuota = 0;
+        let times = 0;
         for (let i = 0; i < data.length; i++) {
             const item = data[i];
+            consumeQuota += item.quota;
+            times += item.count;
             // 合并model_name
             let pieItem = pieData.find(it => it.type === item.model_name);
             if (pieItem) {
@@ -225,12 +242,22 @@ const Detail = (props) => {
                     "Usage": parseFloat(getQuotaWithUnit(item.quota))
                 });
             }
-
         }
+        setConsumeQuota(consumeQuota);
+        setTimes(times);
+
         // sort by count
         pieData.sort((a, b) => b.value - a.value);
-        pieChart.updateData('id0', pieData);
-        lineChart.updateData('barData', lineData);
+        spec_pie.title.subtext = `总计：${renderNumber(times)}`;
+        spec_pie.data[0].values = pieData;
+
+        spec_line.title.subtext = `总计：${renderQuota(consumeQuota, 2)}`;
+        spec_line.data[0].values = lineData;
+        pieChart.updateSpec(spec_pie);
+        lineChart.updateSpec(spec_line);
+
+        // pieChart.updateData('id0', pieData);
+        // lineChart.updateData('barData', lineData);
         pieChart.reLayout();
         lineChart.reLayout();
     }