Feat: The translation model type options should be consistent with the model's labels. #1036 (#12537)

### What problem does this PR solve?

Feat: The translation model type options should be consistent with the
model's labels. #1036

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/logic-hooks/use-build-options.ts

@@ -1,5 +1,6 @@
 import { SwitchLogicOperator } from '@/constants/agent';
 import { buildOptions } from '@/utils/form';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export function useBuildSwitchLogicOperatorOptions() {
@@ -10,3 +11,21 @@ export function useBuildSwitchLogicOperatorOptions() {
     'flow.switchLogicOperatorOptions',
   );
 }
+
+export function useBuildModelTypeOptions() {
+  const { t } = useTranslation();
+
+  const buildModelTypeOptions = useCallback(
+    (list: string[]) => {
+      return list.map((x) => ({
+        value: x,
+        label: t(`setting.modelTypes.${x}`),
+      }));
+    },
+    [t],
+  );
+
+  return {
+    buildModelTypeOptions,
+  };
+}

web/src/locales/en.ts

@@ -1233,6 +1233,15 @@ Example: Virtual Hosted Style`,
             'Vision Language Model with LMDeploy Engine (Experimental)',
         },
       },
+      modelTypes: {
+        chat: 'Chat',
+        embedding: 'Embedding',
+        rerank: 'Rerank',
+        sequence2text: 'sequence2text',
+        tts: 'TTS',
+        image2text: 'OCR',
+        speech2text: 'ASR',
+      },
     },
     message: {
       registered: 'Registered!',

web/src/pages/user-setting/setting-model/modal/azure-openai-modal/index.tsx

@@ -5,6 +5,7 @@ import {
 } from '@/components/dynamic-form';
 import { Modal } from '@/components/ui/modal/modal';
 import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
+import { useBuildModelTypeOptions } from '@/hooks/logic-hooks/use-build-options';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
 import { FieldValues } from 'react-hook-form';
@@ -19,6 +20,7 @@ const AzureOpenAIModal = ({
 }: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
   const { t } = useTranslate('setting');
   const { t: tg } = useCommonTranslation();
+  const { buildModelTypeOptions } = useBuildModelTypeOptions();
 
   const fields: FormFieldConfig[] = [
     {
@@ -26,11 +28,7 @@ const AzureOpenAIModal = ({
       label: t('modelType'),
       type: FormFieldType.Select,
       required: true,
-      options: [
+      options: buildModelTypeOptions(['chat', 'embedding', 'image2text']),
-        { label: 'chat', value: 'chat' },
-        { label: 'embedding', value: 'embedding' },
-        { label: 'image2text', value: 'image2text' },
-      ],
       defaultValue: 'embedding',
       validation: {
         message: t('modelTypeMessage'),

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

@@ -6,6 +6,7 @@ import { Input } from '@/components/ui/input';
 import { Modal } from '@/components/ui/modal/modal';
 import { Segmented } from '@/components/ui/segmented';
 import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
+import { useBuildModelTypeOptions } from '@/hooks/logic-hooks/use-build-options';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -32,6 +33,7 @@ const BedrockModal = ({
 }: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
   const { t } = useTranslate('setting');
   const { t: ct } = useCommonTranslation();
+  const { buildModelTypeOptions } = useBuildModelTypeOptions();
 
   const FormSchema = z
     .object({
@@ -160,10 +162,7 @@ const BedrockModal = ({
               <SelectWithSearch
                 value={field.value}
                 onChange={field.onChange}
-                options={[
+                options={buildModelTypeOptions(['chat', 'embedding'])}
-                  { label: 'chat', value: 'chat' },
-                  { label: 'embedding', value: 'embedding' },
-                ]}
                 placeholder={t('modelTypeMessage')}
               />
             )}

web/src/pages/user-setting/setting-model/modal/fish-audio-modal/index.tsx

@@ -5,6 +5,7 @@ import {
 } from '@/components/dynamic-form';
 import { Modal } from '@/components/ui/modal/modal';
 import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
+import { useBuildModelTypeOptions } from '@/hooks/logic-hooks/use-build-options';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
 import { FieldValues } from 'react-hook-form';
@@ -19,6 +20,7 @@ const FishAudioModal = ({
 }: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
   const { t } = useTranslate('setting');
   const { t: tc } = useCommonTranslation();
+  const { buildModelTypeOptions } = useBuildModelTypeOptions();
 
   const fields: FormFieldConfig[] = [
     {
@@ -26,7 +28,7 @@ const FishAudioModal = ({
       label: t('modelType'),
       type: FormFieldType.Select,
       required: true,
-      options: [{ label: 'tts', value: 'tts' }],
+      options: buildModelTypeOptions(['tts']),
       defaultValue: 'tts',
       validation: { message: t('modelTypeMessage') },
     },

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

@@ -5,6 +5,7 @@ import {
 } from '@/components/dynamic-form';
 import { Modal } from '@/components/ui/modal/modal';
 import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
+import { useBuildModelTypeOptions } from '@/hooks/logic-hooks/use-build-options';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
 import { FieldValues } from 'react-hook-form';
@@ -19,6 +20,7 @@ const GoogleModal = ({
 }: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
   const { t } = useTranslate('setting');
   const { t: tc } = useCommonTranslation();
+  const { buildModelTypeOptions } = useBuildModelTypeOptions();
 
   const fields: FormFieldConfig[] = [
     {
@@ -26,10 +28,7 @@ const GoogleModal = ({
       label: t('modelType'),
       type: FormFieldType.Select,
       required: true,
-      options: [
+      options: buildModelTypeOptions(['chat', 'image2text']),
-        { label: 'chat', value: 'chat' },
-        { label: 'image2text', value: 'image2text' },
-      ],
       defaultValue: 'chat',
       validation: {
         message: t('modelTypeMessage'),

web/src/pages/user-setting/setting-model/modal/next-tencent-modal/index.tsx

@@ -5,6 +5,7 @@ import {
 } from '@/components/dynamic-form';
 import { Modal } from '@/components/ui/modal/modal';
 import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
+import { useBuildModelTypeOptions } from '@/hooks/logic-hooks/use-build-options';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
 import { FieldValues } from 'react-hook-form';
@@ -21,6 +22,7 @@ const TencentCloudModal = ({
 }) => {
   const { t } = useTranslate('setting');
   const { t: tc } = useCommonTranslation();
+  const { buildModelTypeOptions } = useBuildModelTypeOptions();
 
   const fields: FormFieldConfig[] = [
     {
@@ -28,7 +30,7 @@ const TencentCloudModal = ({
       label: t('modelType'),
       type: FormFieldType.Select,
       required: true,
-      options: [{ label: 'speech2text', value: 'speech2text' }],
+      options: buildModelTypeOptions(['speech2text']),
       defaultValue: 'speech2text',
       validation: {
         message: t('modelTypeMessage'),

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

@@ -6,6 +6,7 @@ import {
 import { Modal } from '@/components/ui/modal/modal';
 import { LLMFactory } from '@/constants/llm';
 import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
+import { useBuildModelTypeOptions } from '@/hooks/logic-hooks/use-build-options';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
 import { useMemo } from 'react';
@@ -33,49 +34,6 @@ const llmFactoryToUrlMap: Partial<Record<LLMFactory, string>> = {
   [LLMFactory.TokenPony]: 'https://docs.tokenpony.cn/#/',
 };
 
-const optionsMap: Partial<
-  Record<LLMFactory, { label: string; value: string }[]>
-> & {
-  Default: { label: string; value: string }[];
-} = {
-  [LLMFactory.HuggingFace]: [
-    { label: 'embedding', value: 'embedding' },
-    { label: 'chat', value: 'chat' },
-    { label: 'rerank', value: 'rerank' },
-  ],
-  [LLMFactory.LMStudio]: [
-    { label: 'chat', value: 'chat' },
-    { label: 'embedding', value: 'embedding' },
-    { label: 'image2text', value: 'image2text' },
-  ],
-  [LLMFactory.Xinference]: [
-    { label: 'chat', value: 'chat' },
-    { label: 'embedding', value: 'embedding' },
-    { label: 'rerank', value: 'rerank' },
-    { label: 'image2text', value: 'image2text' },
-    { label: 'sequence2text', value: 'speech2text' },
-    { label: 'tts', value: 'tts' },
-  ],
-  [LLMFactory.ModelScope]: [{ label: 'chat', value: 'chat' }],
-  [LLMFactory.GPUStack]: [
-    { label: 'chat', value: 'chat' },
-    { label: 'embedding', value: 'embedding' },
-    { label: 'rerank', value: 'rerank' },
-    { label: 'sequence2text', value: 'speech2text' },
-    { label: 'tts', value: 'tts' },
-  ],
-  [LLMFactory.OpenRouter]: [
-    { label: 'chat', value: 'chat' },
-    { label: 'image2text', value: 'image2text' },
-  ],
-  Default: [
-    { label: 'chat', value: 'chat' },
-    { label: 'embedding', value: 'embedding' },
-    { label: 'rerank', value: 'rerank' },
-    { label: 'image2text', value: 'image2text' },
-  ],
-};
-
 const OllamaModal = ({
   visible,
   hideModal,
@@ -90,6 +48,47 @@ const OllamaModal = ({
 }) => {
   const { t } = useTranslate('setting');
   const { t: tc } = useCommonTranslation();
+  const { buildModelTypeOptions } = useBuildModelTypeOptions();
+
+  const optionsMap: Partial<
+    Record<LLMFactory, { label: string; value: string }[]>
+  > & {
+    Default: { label: string; value: string }[];
+  } = {
+    [LLMFactory.HuggingFace]: buildModelTypeOptions([
+      'embedding',
+      'chat',
+      'rerank',
+    ]),
+    [LLMFactory.LMStudio]: buildModelTypeOptions([
+      'chat',
+      'embedding',
+      'image2text',
+    ]),
+    [LLMFactory.Xinference]: buildModelTypeOptions([
+      'chat',
+      'embedding',
+      'rerank',
+      'image2text',
+      'speech2text',
+      'tts',
+    ]),
+    [LLMFactory.ModelScope]: buildModelTypeOptions(['chat']),
+    [LLMFactory.GPUStack]: buildModelTypeOptions([
+      'chat',
+      'embedding',
+      'rerank',
+      'speech2text',
+      'tts',
+    ]),
+    [LLMFactory.OpenRouter]: buildModelTypeOptions(['chat', 'image2text']),
+    Default: buildModelTypeOptions([
+      'chat',
+      'embedding',
+      'rerank',
+      'image2text',
+    ]),
+  };
 
   const url =
     llmFactoryToUrlMap[llmFactory as LLMFactory] ||

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

@@ -5,6 +5,7 @@ import {
 } from '@/components/dynamic-form';
 import { Modal } from '@/components/ui/modal/modal';
 import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
+import { useBuildModelTypeOptions } from '@/hooks/logic-hooks/use-build-options';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
 import omit from 'lodash/omit';
@@ -20,6 +21,7 @@ const SparkModal = ({
 }: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
   const { t } = useTranslate('setting');
   const { t: tc } = useCommonTranslation();
+  const { buildModelTypeOptions } = useBuildModelTypeOptions();
 
   const fields: FormFieldConfig[] = [
     {
@@ -27,10 +29,7 @@ const SparkModal = ({
       label: t('modelType'),
       type: FormFieldType.Select,
       required: true,
-      options: [
+      options: buildModelTypeOptions(['chat', 'tts']),
-        { label: 'chat', value: 'chat' },
-        { label: 'tts', value: 'tts' },
-      ],
       defaultValue: 'chat',
       validation: {
         message: t('modelTypeMessage'),

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

@@ -5,6 +5,7 @@ import {
 } from '@/components/dynamic-form';
 import { Modal } from '@/components/ui/modal/modal';
 import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
+import { useBuildModelTypeOptions } from '@/hooks/logic-hooks/use-build-options';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
 import { FieldValues } from 'react-hook-form';
@@ -24,6 +25,7 @@ const VolcEngineModal = ({
 }: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
   const { t } = useTranslate('setting');
   const { t: tc } = useCommonTranslation();
+  const { buildModelTypeOptions } = useBuildModelTypeOptions();
 
   const fields: FormFieldConfig[] = [
     {
@@ -31,11 +33,7 @@ const VolcEngineModal = ({
       label: t('modelType'),
       type: FormFieldType.Select,
       required: true,
-      options: [
+      options: buildModelTypeOptions(['chat', 'embedding', 'image2text']),
-        { label: 'chat', value: 'chat' },
-        { label: 'embedding', value: 'embedding' },
-        { label: 'image2text', value: 'image2text' },
-      ],
       defaultValue: 'chat',
     },
     {

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

@@ -5,6 +5,7 @@ import {
 } from '@/components/dynamic-form';
 import { Modal } from '@/components/ui/modal/modal';
 import { useCommonTranslation, useTranslate } from '@/hooks/common-hooks';
+import { useBuildModelTypeOptions } from '@/hooks/logic-hooks/use-build-options';
 import { IModalProps } from '@/interfaces/common';
 import { IAddLlmRequestBody } from '@/interfaces/request/llm';
 import { FieldValues } from 'react-hook-form';
@@ -19,6 +20,7 @@ const YiyanModal = ({
 }: IModalProps<IAddLlmRequestBody> & { llmFactory: string }) => {
   const { t } = useTranslate('setting');
   const { t: tc } = useCommonTranslation();
+  const { buildModelTypeOptions } = useBuildModelTypeOptions();
 
   const fields: FormFieldConfig[] = [
     {
@@ -26,11 +28,7 @@ const YiyanModal = ({
       label: t('modelType'),
       type: FormFieldType.Select,
       required: true,
-      options: [
+      options: buildModelTypeOptions(['chat', 'embedding', 'rerank']),
-        { label: 'chat', value: 'chat' },
-        { label: 'embedding', value: 'embedding' },
-        { label: 'rerank', value: 'rerank' },
-      ],
       defaultValue: 'chat',
     },
     {