diff --git a/web/src/hooks/llm-hooks.tsx b/web/src/hooks/llm-hooks.tsx
index f7689857b..e4deb055f 100644
--- a/web/src/hooks/llm-hooks.tsx
+++ b/web/src/hooks/llm-hooks.tsx
@@ -14,7 +14,7 @@ import {
 } from '@/interfaces/request/llm';
 import userService from '@/services/user-service';
 import { sortLLmFactoryListBySpecifiedOrder } from '@/utils/common-util';
-import { getLLMIconName } from '@/utils/llm-util';
+import { getLLMIconName, getRealModelName } from '@/utils/llm-util';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Flex, message } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';
@@ -45,7 +45,7 @@ export const useSelectLlmOptions = () => {
       return {
         label: key,
         options: value.map((x) => ({
-          label: x.llm_name,
+          label: getRealModelName(x.llm_name),
           value: `${x.llm_name}@${x.fid}`,
           disabled: !x.available,
         })),
@@ -66,7 +66,7 @@ function buildLlmOptionsWithIcon(x: IThirdOAIModel) {
           height={26}
           size={'small'}
         />
-        <span>{x.llm_name}</span>
+        <span>{getRealModelName(x.llm_name)}</span>
       </Flex>
     ),
     value: `${x.llm_name}@${x.fid}`,
@@ -198,6 +198,7 @@ export const useSelectLlmList = () => {
       name: key,
       logo: factoryList.find((x) => x.name === key)?.logo ?? '',
       ...value,
+      llm: value.llm.map((x) => ({ ...x, name: getRealModelName(x.name) })),
     }));
   }, [myLlmList, factoryList]);
 
diff --git a/web/src/utils/llm-util.ts b/web/src/utils/llm-util.ts
index 0d2a2cfde..a2e875a83 100644
--- a/web/src/utils/llm-util.ts
+++ b/web/src/utils/llm-util.ts
@@ -11,3 +11,8 @@ export const getLlmNameAndFIdByLlmId = (llmId?: string) => {
 
   return { fId, llmName };
 };
+
+// The names of the large models returned by the interface are similar to "deepseek-r1___OpenAI-API"
+export function getRealModelName(llmName: string) {
+  return llmName.split('__').at(0) ?? '';
+}