add: The channel icon to which the model belongs

Author: luxlzz6

README.md

@@ -160,11 +160,12 @@ docker-compose ps
 
 
 
-![日志界面](https://github.com/user-attachments/assets/ad248ec2-f8dc-4bfb-ae94-83331df00357)
+![日志界面](https://github.com/user-attachments/assets/f4ce6400-200a-47d5-97d6-4811700625d9)
 
+![模型计费](https://github.com/user-attachments/assets/0389a065-00f3-41ac-9fb1-0c7eccd41d49)
 
 
-![渠道管理](https://github.com/ai365vip/chat-api/assets/154959065/0017e8cb-645b-4c05-aefa-6cd538989278)
+![渠道管理](https://github.com/user-attachments/assets/69a8511c-e976-45a1-b3ab-a33fbbdadbee)
 
 
 

VERSION

@@ -1 +1 @@
-v0.5.1
+v0.5.2

web-user/package-lock.json

@@ -8,6 +8,7 @@
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@lobehub/icons": "^1.80.0",
     "@mui/icons-material": "^5.15.7",
     "@mui/lab": "^5.0.0-alpha.163",
     "@mui/material": "^5.15.7",

web-user/package.json

@@ -8,6 +8,13 @@ export function getSystemName() {
   if (!system_name) return 'Chat API';
   return system_name;
 }
+import { 
+  OpenAI, Claude, Gemini, DeepSeek, Zhipu, Hunyuan, 
+  Spark, Minimax, Yi, Groq, Ollama, 
+  Doubao, Ai360, Midjourney, Flux, Grok, Suno,
+  Pika, Vidu,BaiduCloud,AlibabaCloud,Cohere,Baichuan,Kimi
+} from '@lobehub/icons';
+
 
 export function isMobile() {
   return window.innerWidth <= 600;
@@ -288,3 +295,66 @@ export function removeTrailingSlash(url) {
     return url;
   }
 }
+
+export const getModelIcon = (modelName) => {
+  if (modelName.startsWith('gpt-3')) {
+    return <OpenAI.Avatar size={20} type="gpt3" />;
+  } else if (modelName.startsWith('gpt-4') || modelName.startsWith('chatgpt')) {
+    return <OpenAI.Avatar size={20} type="gpt4" />;
+  } else if (modelName.startsWith('o1') || modelName.startsWith('o3')) {
+    return <OpenAI.Avatar size={20} type="o1" />;
+  } else if (modelName.startsWith('tts') || modelName.startsWith('dall-e') || 
+  modelName.startsWith('whisper') || modelName.startsWith('omni-') || 
+  modelName.startsWith('text-embedding') || modelName.startsWith('text-moderation-')
+   || modelName.startsWith('davinci') ||  modelName.startsWith('babbage')
+  ) {
+    return <OpenAI.Avatar size={20} />;
+  }else if (modelName.startsWith('claude')) {
+    return <Claude.Color size={20} />;
+  } else if (modelName.startsWith('gemini')) {
+    return <Gemini.Color size={20} />;
+  } else if (modelName.startsWith('deepseek')) {
+    return <DeepSeek.Color size={20} />;
+  } else if (modelName.startsWith('glm') || modelName.startsWith('chatglm')) {
+    return <Zhipu.Color size={20} />;
+  } else if (modelName.startsWith('hunyuan')) {
+    return <Hunyuan.Color size={20} />;
+  } else if (modelName.startsWith('Spark')) {
+    return <Spark.Color size={20} />;
+  } else if (modelName.startsWith('abab')) {
+    return <Minimax.Color size={20} />;
+  } else if (modelName.startsWith('moonshot')) {
+    return <Kimi.Color size={20} />;
+  } else if (modelName.startsWith('yi')) {
+    return <Yi.Color size={20} />;
+  } else if (modelName.startsWith('groq')) {
+    return <Groq size={20} />;
+  } else if (modelName.startsWith('ollama') || modelName.startsWith('llama')) {
+    return <Ollama size={20} />;
+  } else if (modelName.startsWith('doubao')) {
+    return <Doubao.Color size={20} />;
+  } else if (modelName.startsWith('360')) {
+    return <Ai360.Color size={20} />;
+  } else if (modelName.startsWith('midjourney') || modelName.startsWith('mj-chat')) {
+    return <Midjourney size={20} />;
+  } else if (modelName.startsWith('flux')) {
+    return <Flux size={20} />;
+  } else if (modelName.startsWith('grok')) {
+    return <Grok size={20} />;
+  } else if (modelName.startsWith('suno')) {
+    return <Suno size={20} />;
+  } else if (modelName.startsWith('pika')) {
+    return <Pika size={20} />;
+  } else if (modelName.startsWith('vidu')) {
+    return <Vidu.Color size={20} />;
+  } else if (modelName.startsWith('ERNIE-')) {
+    return <BaiduCloud.Color size={20} />;
+  } else if (modelName.startsWith('qwen-')) {
+    return <AlibabaCloud.Color size={20} />;
+  } else if (modelName.startsWith('command')) {
+    return <Cohere.Color size={20} />;
+  } else if (modelName.startsWith('Baichuan')) {
+    return <Baichuan.Color size={20} />;
+  }
+  return null;
+};

web-user/src/utils/common.js

@@ -2,6 +2,10 @@ import PropTypes from 'prop-types';
 import { TableRow, TableCell, Tooltip } from '@mui/material';
 import { timestamp2string, renderQuota, showSuccess, showError } from 'utils/common';
 import Label from 'ui-component/Label';
+import { InputOutlined, OutputOutlined, PaidOutlined } from '@mui/icons-material';
+
+import { getModelIcon } from 'utils/common';
+
 import {  blue, grey, orange, red, green } from '@mui/material/colors';
 function renderIsStream(bool) {
   return bool ? (
@@ -180,17 +184,33 @@ export default function LogTableRow({ item }) {
       <TableCell>{renderType(item.type)}</TableCell>
       <TableCell onClick={() => handleCopyToClipboard(item.model_name)}>
           <Label style={{ color: getModelColor(item.model_name) }} variant="outlined">
-            {item.model_name}
+            {getModelIcon(item.model_name)}
+            <span style={{ marginLeft: '4px' }}>{item.model_name}</span>
           </Label>
         </TableCell>
       <TableCell>{item.ip}</TableCell>  
       <TableCell>
         {renderUseTime(item.use_time)}
         {renderIsStream(item.is_stream)}
       </TableCell>
-      <TableCell>{item.prompt_tokens || ''}</TableCell>
-      <TableCell>{item.completion_tokens || ''}</TableCell>
-      <TableCell>{item.quota ? renderQuota(item.quota, 6) : ''}</TableCell>
+      <TableCell>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <InputOutlined fontSize="small" sx={{ color: '#2196F3', marginRight: '4px' }}/>
+          {item.prompt_tokens || ''}
+        </div>
+      </TableCell>
+      <TableCell>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <OutputOutlined fontSize="small" sx={{ color: '#4CAF50', marginRight: '4px' }}/>
+          {item.completion_tokens || ''}
+        </div>
+      </TableCell>
+      <TableCell>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <PaidOutlined fontSize="small" sx={{ color: '#FF9800', marginRight: '4px' }}/>
+          {item.quota ? renderQuota(item.quota, 6) : ''}
+        </div>
+      </TableCell>
       <TableCell>
         {item.multiplier ? (
           <Tooltip title={