From 6ea8cc9986fe3354518d679d662014647132f650 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Tue, 18 Feb 2025 15:48:21 +0800
Subject: [PATCH] chore: copy model-tag from user-view

---
 src/pages/llmodels/components/model-tag.tsx  |  71 ++++++++++
 src/pages/llmodels/components/table-list.tsx | 131 +------------------
 2 files changed, 77 insertions(+), 125 deletions(-)
 create mode 100644 src/pages/llmodels/components/model-tag.tsx

diff --git a/src/pages/llmodels/components/model-tag.tsx b/src/pages/llmodels/components/model-tag.tsx
new file mode 100644
index 00000000..fbea9a61
--- /dev/null
+++ b/src/pages/llmodels/components/model-tag.tsx
@@ -0,0 +1,71 @@
+import IconFont from '@/components/icon-font';
+import {
+  AudioOutlined,
+  PictureOutlined,
+  WechatWorkOutlined
+} from '@ant-design/icons';
+import { Tag } from 'antd';
+import { modelCategoriesMap } from '../config';
+
+const categoryConfig = {
+  [modelCategoriesMap.reranker]: {
+    icon: <IconFont type="icon-rank1" />,
+    color: 'cyan',
+    label: 'Reranker'
+  },
+  [modelCategoriesMap.embedding]: {
+    icon: <IconFont type="icon-cube" />,
+    color: 'purple',
+    label: 'Embedding'
+  },
+  [modelCategoriesMap.text_to_speech]: {
+    icon: <IconFont type="icon-sound-wave" />,
+    color: 'geekblue',
+    label: 'Text-To-Speech'
+  },
+  [modelCategoriesMap.speech_to_text]: {
+    icon: <AudioOutlined />,
+    color: 'processing',
+    label: 'Speech-To-Text'
+  },
+  [modelCategoriesMap.image]: {
+    icon: <PictureOutlined />,
+    color: 'orange',
+    label: 'Image'
+  },
+  [modelCategoriesMap.llm]: {
+    icon: <WechatWorkOutlined />,
+    color: 'green',
+    label: 'LLM'
+  }
+};
+
+interface ModelTagProps {
+  categoryKey: keyof typeof categoryConfig;
+  size?: number;
+}
+
+const ModelTag: React.FC<ModelTagProps> = ({ categoryKey, size }) => {
+  const config = categoryConfig[categoryKey];
+
+  if (!config) return null;
+
+  return (
+    <Tag
+      icon={config.icon}
+      style={{
+        height: size,
+        margin: 0,
+        opacity: 1,
+        paddingInline: 8,
+        borderRadius: 12,
+        transform: 'scale(0.9)'
+      }}
+      color={config.color}
+    >
+      {config.label}
+    </Tag>
+  );
+};
+
+export default ModelTag;
diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx
index 5b4e8101..93a4546c 100644
--- a/src/pages/llmodels/components/table-list.tsx
+++ b/src/pages/llmodels/components/table-list.tsx
@@ -19,28 +19,16 @@ import {
 } from '@/pages/resources/config/types';
 import { handleBatchRequest } from '@/utils';
 import {
-  AudioOutlined,
   DeleteOutlined,
   DownOutlined,
   EditOutlined,
   ExperimentOutlined,
-  PictureOutlined,
   QuestionCircleOutlined,
-  SyncOutlined,
-  WechatWorkOutlined
+  SyncOutlined
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
-import {
-  Button,
-  Dropdown,
-  Input,
-  Select,
-  Space,
-  Tag,
-  Tooltip,
-  message
-} from 'antd';
+import { Button, Dropdown, Input, Select, Space, Tooltip, message } from 'antd';
 import dayjs from 'dayjs';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
@@ -66,6 +54,7 @@ import { FormData, ListItem, ModelInstanceListItem } from '../config/types';
 import DeployDropdown from './deploy-dropdown';
 import DeployModal from './deploy-modal';
 import InstanceItem from './instance-item';
+import ModelTag from './model-tag';
 import UpdateModel from './update-modal';
 import ViewLogsModal from './view-logs-modal';
 
@@ -584,116 +573,6 @@ const Models: React.FC<ModelsProps> = ({
     [handleViewLogs, handleDeleteInstace]
   );
 
-  const renderModelTags = useCallback(
-    (record: ListItem) => {
-      if (record.categories?.includes(modelCategoriesMap.reranker)) {
-        return (
-          <Tag
-            icon={<IconFont type="icon-rank1"></IconFont>}
-            style={{
-              margin: 0,
-              opacity: 1,
-              paddingInline: 8,
-              borderRadius: 12,
-              transform: 'scale(0.9)'
-            }}
-            color="cyan"
-          >
-            Reranker
-          </Tag>
-        );
-      }
-
-      if (record.categories?.includes(modelCategoriesMap.embedding)) {
-        return (
-          <Tag
-            icon={<IconFont type="icon-cube"></IconFont>}
-            style={{
-              margin: 0,
-              opacity: 1,
-              paddingInline: 8,
-              borderRadius: 12,
-              transform: 'scale(0.9)'
-            }}
-            color="purple"
-          >
-            Embedding
-          </Tag>
-        );
-      }
-      if (record.categories?.includes(modelCategoriesMap.text_to_speech)) {
-        return (
-          <Tag
-            icon={<IconFont type="icon-sound-wave"></IconFont>}
-            style={{
-              margin: 0,
-              opacity: 1,
-              paddingInline: 8,
-              borderRadius: 12,
-              transform: 'scale(0.9)'
-            }}
-            color="geekblue"
-          >
-            Text-To-Speech
-          </Tag>
-        );
-      }
-      if (record.categories?.includes(modelCategoriesMap.speech_to_text)) {
-        return (
-          <Tag
-            icon={<AudioOutlined />}
-            style={{
-              margin: 0,
-              opacity: 1,
-              paddingInline: 8,
-              borderRadius: 12,
-              transform: 'scale(0.9)'
-            }}
-            color="processing"
-          >
-            Speech-To-Text
-          </Tag>
-        );
-      }
-      if (record.categories?.includes(modelCategoriesMap.image)) {
-        return (
-          <Tag
-            icon={<PictureOutlined />}
-            style={{
-              margin: 0,
-              opacity: 1,
-              paddingInline: 8,
-              borderRadius: 12,
-              transform: 'scale(0.9)'
-            }}
-            color="orange"
-          >
-            Image
-          </Tag>
-        );
-      }
-      if (record.categories?.includes(modelCategoriesMap.llm)) {
-        return (
-          <Tag
-            icon={<WechatWorkOutlined />}
-            style={{
-              margin: 0,
-              opacity: 1,
-              paddingInline: 8,
-              borderRadius: 12,
-              transform: 'scale(0.9)'
-            }}
-            color="green"
-          >
-            LLM
-          </Tag>
-        );
-      }
-      return null;
-    },
-    [intl]
-  );
-
   const renderChildren = useCallback(
     (list: any, parent?: any) => {
       return (
@@ -939,7 +818,9 @@ const Models: React.FC<ModelsProps> = ({
                   <AutoTooltip ghost>
                     <span className="m-r-5">{text}</span>
                   </AutoTooltip>
-                  {renderModelTags(record)}
+                  <ModelTag
+                    categoryKey={record.categories?.[0] || ''}
+                  ></ModelTag>
                 </span>
               );
             }}