feat: Add hint for operators, round to square, input variable, readable operator ID. #3056 (#3057)

### What problem does this PR solve?

feat: Add hint for operators, round to square, input variable, readable
operator ID. #3056

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/pages/user-setting/setting-model/constant.ts

@@ -1,48 +1,3 @@
-// Please lowercase the file name
-export const IconMap = {
-  'Tongyi-Qianwen': 'tongyi',
-  Moonshot: 'moonshot',
-  OpenAI: 'openai',
-  'ZHIPU-AI': 'zhipu',
-  文心一言: 'wenxin',
-  Ollama: 'ollama',
-  Xinference: 'xinference',
-  DeepSeek: 'deepseek',
-  VolcEngine: 'volc_engine',
-  BaiChuan: 'baichuan',
-  Jina: 'jina',
-  MiniMax: 'chat-minimax',
-  Mistral: 'mistral',
-  'Azure-OpenAI': 'azure',
-  Bedrock: 'bedrock',
-  Gemini: 'gemini',
-  Groq: 'groq-next',
-  OpenRouter: 'open-router',
-  LocalAI: 'local-ai',
-  StepFun: 'stepfun',
-  NVIDIA: 'nvidia',
-  'LM-Studio': 'lm-studio',
-  'OpenAI-API-Compatible': 'openai-api',
-  cohere: 'cohere',
-  LeptonAI: 'lepton-ai',
-  TogetherAI: 'together-ai',
-  PerfXCloud: 'perfx-cloud',
-  Upstage: 'upstage',
-  'novita.ai': 'novita-ai',
-  SILICONFLOW: 'siliconflow',
-  '01.AI': 'yi',
-  Replicate: 'replicate',
-  'Tencent Hunyuan': 'hunyuan',
-  'XunFei Spark': 'spark',
-  BaiduYiyan: 'yiyan',
-  'Fish Audio': 'fish-audio',
-  'Tencent Cloud': 'tencent-cloud',
-  Anthropic: 'anthropic',
-  'Voyage AI': 'voyage',
-  'Google Cloud': 'google-cloud',
-  HuggingFace: 'huggingface',
-};
-
 export const BedrockRegionList = [
   'us-east-1',
   'us-west-2',

web/src/pages/user-setting/setting-model/index.tsx

@@ -1,14 +1,9 @@
 import { ReactComponent as MoreModelIcon } from '@/assets/svg/more-model.svg';
-import SvgIcon from '@/components/svg-icon';
+import { LlmIcon } from '@/components/svg-icon';
 import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
 import { LlmItem, useSelectLlmList } from '@/hooks/llm-hooks';
+import { CloseCircleOutlined, SettingOutlined } from '@ant-design/icons';
 import {
-  CloseCircleOutlined,
-  SettingOutlined,
-  UserOutlined,
-} from '@ant-design/icons';
-import {
-  Avatar,
   Button,
   Card,
   Col,
@@ -31,7 +26,6 @@ import TencentCloudModal from './Tencent-modal';
 import ApiKeyModal from './api-key-modal';
 import AzureOpenAIModal from './azure-openai-modal';
 import BedrockModal from './bedrock-modal';
-import { IconMap } from './constant';
 import FishAudioModal from './fish-audio-modal';
 import GoogleModal from './google-modal';
 import {
@@ -58,16 +52,6 @@ import SystemModelSettingModal from './system-model-setting-modal';
 import VolcEngineModal from './volcengine-modal';
 import YiyanModal from './yiyan-modal';
 
-const LlmIcon = ({ name }: { name: string }) => {
-  const icon = IconMap[name as keyof typeof IconMap];
-
-  return icon ? (
-    <SvgIcon name={`llm/${icon}`} width={48} height={48}></SvgIcon>
-  ) : (
-    <Avatar shape="square" size="large" icon={<UserOutlined />} />
-  );
-};
-
 const { Text } = Typography;
 interface IModelCardProps {
   item: LlmItem;