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)
2026-01-19 11:45:10 +08:00 · 2026-01-09 17:39:40 +08:00
parent b65daeb945
commit 64b1e0b4c3
11 changed files with 94 additions and 72 deletions
--- a/web/src/hooks/logic-hooks/use-build-options.ts
+++ b/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,
+  };
+}
--- a/web/src/locales/en.ts
+++ b/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!',
--- a/web/src/pages/user-setting/setting-model/modal/azure-openai-modal/index.tsx
+++ b/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: [
-        { label: 'chat', value: 'chat' },
-        { label: 'embedding', value: 'embedding' },
-        { label: 'image2text', value: 'image2text' },
-      ],
+      options: buildModelTypeOptions(['chat', 'embedding', 'image2text']),
      defaultValue: 'embedding',
      validation: {
        message: t('modelTypeMessage'),
--- a/web/src/pages/user-setting/setting-model/modal/bedrock-modal/index.tsx
+++ b/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={[
-                  { label: 'chat', value: 'chat' },
-                  { label: 'embedding', value: 'embedding' },
-                ]}
+                options={buildModelTypeOptions(['chat', 'embedding'])}
                placeholder={t('modelTypeMessage')}
              />
            )}
--- a/web/src/pages/user-setting/setting-model/modal/fish-audio-modal/index.tsx
+++ b/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') },
    },
--- a/web/src/pages/user-setting/setting-model/modal/google-modal/index.tsx
+++ b/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: [
-        { label: 'chat', value: 'chat' },
-        { label: 'image2text', value: 'image2text' },
-      ],
+      options: buildModelTypeOptions(['chat', 'image2text']),
      defaultValue: 'chat',
      validation: {
        message: t('modelTypeMessage'),
--- a/web/src/pages/user-setting/setting-model/modal/next-tencent-modal/index.tsx
+++ b/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'),
--- a/web/src/pages/user-setting/setting-model/modal/ollama-modal/index.tsx
+++ b/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] ||
--- a/web/src/pages/user-setting/setting-model/modal/spark-modal/index.tsx
+++ b/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: [
-        { label: 'chat', value: 'chat' },
-        { label: 'tts', value: 'tts' },
-      ],
+      options: buildModelTypeOptions(['chat', 'tts']),
      defaultValue: 'chat',
      validation: {
        message: t('modelTypeMessage'),
--- a/web/src/pages/user-setting/setting-model/modal/volcengine-modal/index.tsx
+++ b/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: [
-        { label: 'chat', value: 'chat' },
-        { label: 'embedding', value: 'embedding' },
-        { label: 'image2text', value: 'image2text' },
-      ],
+      options: buildModelTypeOptions(['chat', 'embedding', 'image2text']),
      defaultValue: 'chat',
    },
    {
--- a/web/src/pages/user-setting/setting-model/modal/yiyan-modal/index.tsx
+++ b/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: [
-        { label: 'chat', value: 'chat' },
-        { label: 'embedding', value: 'embedding' },
-        { label: 'rerank', value: 'rerank' },
-      ],
+      options: buildModelTypeOptions(['chat', 'embedding', 'rerank']),
      defaultValue: 'chat',
    },
    {