admin777/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): use distinct color palette for group tags

Browse Source
This commit is contained in:
KiGamji 2026-01-27 02:23:36 +05:00
parent d4d395e178
commit 033365a118
1 changed files with 43 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
web/src/helpers/render.jsx
View File

@ -167,21 +167,21 @@ export const getModelCategories = (() => {
gemini: { gemini: {
label: 'Gemini', label: 'Gemini',
icon: <Gemini.Color />, icon: <Gemini.Color />,
filter: (model) => filter: (model) =>
model.model_name.toLowerCase().includes('gemini') || model.model_name.toLowerCase().includes('gemini') ||
model.model_name.toLowerCase().includes('gemma') || model.model_name.toLowerCase().includes('gemma') ||
model.model_name.toLowerCase().includes('learnlm') || model.model_name.toLowerCase().includes('learnlm') ||
model.model_name.toLowerCase().startsWith('embedding-') || model.model_name.toLowerCase().startsWith('embedding-') ||
model.model_name.toLowerCase().includes('text-embedding-004') || model.model_name.toLowerCase().includes('text-embedding-004') ||
model.model_name.toLowerCase().includes('imagen-4') || model.model_name.toLowerCase().includes('imagen-4') ||
model.model_name.toLowerCase().includes('veo-') || model.model_name.toLowerCase().includes('veo-') ||
model.model_name.toLowerCase().includes('aqa') , model.model_name.toLowerCase().includes('aqa'),
}, },
moonshot: { moonshot: {
label: 'Moonshot', label: 'Moonshot',
icon: <Moonshot />, icon: <Moonshot />,
filter: (model) => filter: (model) =>
model.model_name.toLowerCase().includes('moonshot') || model.model_name.toLowerCase().includes('moonshot') ||
model.model_name.toLowerCase().includes('kimi'), model.model_name.toLowerCase().includes('kimi'),
}, },
zhipu: { zhipu: {
@ -189,8 +189,8 @@ export const getModelCategories = (() => {
icon: <Zhipu.Color />, icon: <Zhipu.Color />,
filter: (model) => filter: (model) =>
model.model_name.toLowerCase().includes('chatglm') || model.model_name.toLowerCase().includes('chatglm') ||
model.model_name.toLowerCase().includes('glm-') || model.model_name.toLowerCase().includes('glm-') ||
model.model_name.toLowerCase().includes('cogview') || model.model_name.toLowerCase().includes('cogview') ||
model.model_name.toLowerCase().includes('cogvideo'), model.model_name.toLowerCase().includes('cogvideo'),
}, },
qwen: { qwen: {
@ -206,8 +206,8 @@ export const getModelCategories = (() => {
minimax: { minimax: {
label: 'MiniMax', label: 'MiniMax',
icon: <Minimax.Color />, icon: <Minimax.Color />,
filter: (model) => filter: (model) =>
model.model_name.toLowerCase().includes('abab') || model.model_name.toLowerCase().includes('abab') ||
model.model_name.toLowerCase().includes('minimax'), model.model_name.toLowerCase().includes('minimax'),
}, },
baidu: { baidu: {
@ -233,7 +233,7 @@ export const getModelCategories = (() => {
cohere: { cohere: {
label: 'Cohere', label: 'Cohere',
icon: <Cohere.Color />, icon: <Cohere.Color />,
filter: (model) => filter: (model) =>
model.model_name.toLowerCase().includes('command') || model.model_name.toLowerCase().includes('command') ||
model.model_name.toLowerCase().includes('c4ai-') || model.model_name.toLowerCase().includes('c4ai-') ||
model.model_name.toLowerCase().includes('embed-'), model.model_name.toLowerCase().includes('embed-'),
@ -256,7 +256,7 @@ export const getModelCategories = (() => {
mistral: { mistral: {
label: 'Mistral AI', label: 'Mistral AI',
icon: <Mistral.Color />, icon: <Mistral.Color />,
filter: (model) => filter: (model) =>
model.model_name.toLowerCase().includes('mistral') || model.model_name.toLowerCase().includes('mistral') ||
model.model_name.toLowerCase().includes('codestral') || model.model_name.toLowerCase().includes('codestral') ||
model.model_name.toLowerCase().includes('pixtral') || model.model_name.toLowerCase().includes('pixtral') ||
@ -602,6 +602,34 @@ export function stringToColor(str) {
return colors[i]; return colors[i];
} }
// High-contrast color palette for group tags (avoids similar blue/teal shades)
const groupColors = [
'red',
'orange',
'yellow',
'lime',
'green',
'cyan',
'blue',
'indigo',
'violet',
'purple',
'pink',
'amber',
'grey',
];
export function groupToColor(str) {
// Use a better hash algorithm for more even distribution
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = (hash << 5) - hash + str.charCodeAt(i);
hash = hash & hash;
}
hash = Math.abs(hash);
return groupColors[hash % groupColors.length];
}
// 渲染带有模型图标的标签 // 渲染带有模型图标的标签
export function renderModelTag(modelName, options = {}) { export function renderModelTag(modelName, options = {}) {
const { const {
@ -670,7 +698,7 @@ export function renderGroup(group) {
<span key={group}> <span key={group}>
{groups.map((group) => ( {groups.map((group) => (
<Tag <Tag
color={tagColors[group] || stringToColor(group)} color={tagColors[group] || groupToColor(group)}
key={group} key={group}
shape='circle' shape='circle'
onClick={async (event) => { onClick={async (event) => {