xinyin025/new-api
1
0
Fork 0
mirror of https://github.com/linux-do/new-api.git synced 2025-09-17 16:06:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: 美化数据看板

Browse Source
This commit is contained in:
CaIon 2024-01-10 17:49:55 +08:00
parent a3b726dd82
commit e2317524f9
2 changed files with 73 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/helpers/render.js
View File

@ -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;
// 对字符串中的每个字符进行操作

41
web/src/pages/Detail/index.js
View File

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