Skip to content

phsl / new-api

Go to a project
Commit dec5aeaf by CaIon
Options

perf: 美化数据看板

parent ac78d4ba
Showing with 73 additions and 7 deletions
web/src/helpers/render.js
...@@ -116,6 +116,45 @@ const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo', ...@@ -116,6 +116,45 @@ const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo',
'purple', 'red', 'teal', 'violet', 'yellow' '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) { export function stringToColor(str) {
let sum = 0; let sum = 0;
// 对字符串中的每个字符进行操作 // 对字符串中的每个字符进行操作
......
web/src/pages/Detail/index.js
...@@ -3,7 +3,13 @@ import {Button, Col, Form, Layout, Row, Spin} from "@douyinfe/semi-ui"; ...@@ -3,7 +3,13 @@ import {Button, Col, Form, Layout, Row, Spin} from "@douyinfe/semi-ui";
import VChart from '@visactor/vchart'; import VChart from '@visactor/vchart';
import {useEffectOnce} from "usehooks-ts"; import {useEffectOnce} from "usehooks-ts";
import {API, isAdmin, showError, timestamp2string, timestamp2string1} from "../../helpers"; 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) => { const Detail = (props) => {
...@@ -23,8 +29,8 @@ const Detail = (props) => { ...@@ -23,8 +29,8 @@ const Detail = (props) => {
const [modelDataPieChart, setModelDataPieChart] = useState(null); const [modelDataPieChart, setModelDataPieChart] = useState(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [quotaData, setQuotaData] = useState([]); const [quotaData, setQuotaData] = useState([]);
const [quotaDataPie, setQuotaDataPie] = useState([]); const [consumeQuota, setConsumeQuota] = useState(0);
const [quotaDataLine, setQuotaDataLine] = useState([]); const [times, setTimes] = useState(0);
const handleInputChange = (value, name) => { const handleInputChange = (value, name) => {
setInputs((inputs) => ({...inputs, [name]: value})); setInputs((inputs) => ({...inputs, [name]: value}));
...@@ -48,7 +54,8 @@ const Detail = (props) => { ...@@ -48,7 +54,8 @@ const Detail = (props) => {
}, },
title: { title: {
visible: true, visible: true,
text: '模型消耗分布（小时）' text: '模型消耗分布（小时）',
subtext: '0'
}, },
bar: { bar: {
// The state style of bar // The state style of bar
...@@ -85,6 +92,9 @@ const Detail = (props) => { ...@@ -85,6 +92,9 @@ const Detail = (props) => {
return array; return array;
} }
} }
},
color: {
specified: modelColorMap
} }
}; };
...@@ -140,6 +150,9 @@ const Detail = (props) => { ...@@ -140,6 +150,9 @@ const Detail = (props) => {
} }
] ]
} }
},
color: {
specified: modelColorMap
} }
}; };
...@@ -200,8 +213,12 @@ const Detail = (props) => { ...@@ -200,8 +213,12 @@ const Detail = (props) => {
} }
let pieData = []; let pieData = [];
let lineData = []; let lineData = [];
let consumeQuota = 0;
let times = 0;
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
const item = data[i]; const item = data[i];
consumeQuota += item.quota;
times += item.count;
// 合并model_name // 合并model_name
let pieItem = pieData.find(it => it.type === item.model_name); let pieItem = pieData.find(it => it.type === item.model_name);
if (pieItem) { if (pieItem) {
...@@ -225,12 +242,22 @@ const Detail = (props) => { ...@@ -225,12 +242,22 @@ const Detail = (props) => {
"Usage": parseFloat(getQuotaWithUnit(item.quota)) "Usage": parseFloat(getQuotaWithUnit(item.quota))
}); });
} }
} }
setConsumeQuota(consumeQuota);
setTimes(times);
// sort by count // sort by count
pieData.sort((a, b) => b.value - a.value); pieData.sort((a, b) => b.value - a.value);
pieChart.updateData('id0', pieData); spec_pie.title.subtext = `总计：${renderNumber(times)}`;
lineChart.updateData('barData', lineData); 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(); pieChart.reLayout();
lineChart.reLayout(); lineChart.reLayout();
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment