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

web/src/helpers/render.jsx

@@ -175,7 +175,7 @@ export const getModelCategories = (() => {
           model.model_name.toLowerCase().includes('text-embedding-004') ||
           model.model_name.toLowerCase().includes('imagen-4') ||
           model.model_name.toLowerCase().includes('veo-') ||
-          model.model_name.toLowerCase().includes('aqa') ,
+          model.model_name.toLowerCase().includes('aqa'),
       },
       moonshot: {
         label: 'Moonshot',
@@ -602,6 +602,34 @@ export function stringToColor(str) {
   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 = {}) {
   const {
@@ -670,7 +698,7 @@ export function renderGroup(group) {
     <span key={group}>
       {groups.map((group) => (
         <Tag
-          color={tagColors[group] || stringToColor(group)}
+          color={tagColors[group] || groupToColor(group)}
           key={group}
           shape='circle'
           onClick={async (event) => {