feat: Add component DeepL #1739 (#1870)

### What problem does this PR solve?

feat: Add component DeepL #1739

### Type of change


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

web/src/locales/en.ts

@@ -661,6 +661,12 @@ The above is the content you need to summarize.`,
       yearHigh: 'Year high',
       patents: 'Patents',
       data: 'Data',
+      deepL: 'DeepL',
+      deepLDescription:
+        'This component is used to get translations from https://www.deepl.com/. Typically, it provides a more specialized translation result.',
+      authKey: 'Auth key',
+      sourceLang: 'Source language',
+      targetLang: 'Target language',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -619,6 +619,12 @@ export default {
       yearHigh: '結束年份',
       patents: '專利',
       data: '數據',
+      deepL: 'DeepL',
+      deepLDescription:
+        '此元件用於從 https://www.deepl.com/ 取得翻譯。通常，它提供更專業的翻譯結果。',
+      authKey: '授權鍵',
+      sourceLang: '原始語言',
+      targetLang: '目標語言',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -637,6 +637,12 @@ export default {
       yearHigh: '结束年份',
       patents: '专利',
       data: '数据',
+      deepL: 'DeepL',
+      deepLDescription:
+        '该组件用于从 https://www.deepl.com/ 获取翻译。通常，它提供更专业的翻译结果。',
+      authKey: '授权键',
+      sourceLang: '源语言',
+      targetLang: '目标语言',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/flow/constant.tsx

@@ -1,6 +1,7 @@
 import { ReactComponent as ArXivIcon } from '@/assets/svg/arxiv.svg';
 import { ReactComponent as BaiduIcon } from '@/assets/svg/baidu.svg';
 import { ReactComponent as BingIcon } from '@/assets/svg/bing.svg';
+import { ReactComponent as DeepLIcon } from '@/assets/svg/deepl.svg';
 import { ReactComponent as DuckIcon } from '@/assets/svg/duck.svg';
 import { ReactComponent as GoogleScholarIcon } from '@/assets/svg/google-scholar.svg';
 import { ReactComponent as GoogleIcon } from '@/assets/svg/google.svg';
@@ -46,6 +47,7 @@ export enum Operator {
   Google = 'Google',
   Bing = 'Bing',
   GoogleScholar = 'GoogleScholar',
+  DeepL = 'DeepL',
 }
 
 export const operatorIconMap = {
@@ -66,6 +68,7 @@ export const operatorIconMap = {
   [Operator.Google]: GoogleIcon,
   [Operator.Bing]: BingIcon,
   [Operator.GoogleScholar]: GoogleScholarIcon,
+  [Operator.DeepL]: DeepLIcon,
 };
 
 export const operatorMap = {
@@ -149,6 +152,7 @@ export const operatorMap = {
   },
   [Operator.Bing]: {},
   [Operator.GoogleScholar]: {},
+  [Operator.DeepL]: {},
 };
 
 export const componentMenuList = [
@@ -200,6 +204,9 @@ export const componentMenuList = [
   {
     name: Operator.GoogleScholar,
   },
+  {
+    name: Operator.DeepL,
+  },
 ];
 
 export const initialRetrievalValues = {
@@ -304,6 +311,11 @@ export const initialGoogleScholarValues = {
   patents: true,
 };
 
+export const initialDeepLValues = {
+  text: 5,
+  auth_key: 'relevance',
+};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -368,6 +380,7 @@ export const RestrictedUpstreamMap = {
   [Operator.Google]: [Operator.Begin, Operator.Retrieval],
   [Operator.Bing]: [Operator.Begin, Operator.Retrieval],
   [Operator.GoogleScholar]: [Operator.Begin, Operator.Retrieval],
+  [Operator.DeepL]: [Operator.Begin, Operator.Retrieval],
 };
 
 export const NodeMap = {
@@ -388,6 +401,7 @@ export const NodeMap = {
   [Operator.Google]: 'ragNode',
   [Operator.Bing]: 'ragNode',
   [Operator.GoogleScholar]: 'ragNode',
+  [Operator.DeepL]: 'ragNode',
 };
 
 export const LanguageOptions = [
@@ -1299,6 +1313,7 @@ export const GoogleLanguageOptions = [
     language_name: 'Zulu',
   },
 ].map((x) => ({ label: x.language_name, value: x.language_code }));
+
 export const GoogleCountryOptions = [
   {
     country_code: 'af',
@@ -2353,3 +2368,74 @@ export const BingLanguageOptions = [
   { label: 'Ukrainian uk', value: 'uk' },
   { label: 'Vietnamese vi', value: 'vi' },
 ];
+
+export const DeepLSourceLangOptions = [
+  { label: 'Arabic [1]', value: 'AR' },
+  { label: 'Bulgarian', value: 'BG' },
+  { label: 'Czech', value: 'CS' },
+  { label: 'Danish', value: 'DA' },
+  { label: 'German', value: 'DE' },
+  { label: 'Greek', value: 'EL' },
+  { label: 'English', value: 'EN' },
+  { label: 'Spanish', value: 'ES' },
+  { label: 'Estonian', value: 'ET' },
+  { label: 'Finnish', value: 'FI' },
+  { label: 'French', value: 'FR' },
+  { label: 'Hungarian', value: 'HU' },
+  { label: 'Indonesian', value: 'ID' },
+  { label: 'Italian', value: 'IT' },
+  { label: 'Japanese', value: 'JA' },
+  { label: 'Korean', value: 'KO' },
+  { label: 'Lithuanian', value: 'LT' },
+  { label: 'Latvian', value: 'LV' },
+  { label: 'Norwegian Bokmål', value: 'NB' },
+  { label: 'Dutch', value: 'NL' },
+  { label: 'Polish', value: 'PL' },
+  { label: 'Portuguese (all Portuguese varieties mixed)', value: 'PT' },
+  { label: 'Romanian', value: 'RO' },
+  { label: 'Russian', value: 'RU' },
+  { label: 'Slovak', value: 'SK' },
+  { label: 'Slovenian', value: 'SL' },
+  { label: 'Swedish', value: 'SV' },
+  { label: 'Turkish', value: 'TR' },
+  { label: 'Ukrainian', value: 'UK' },
+  { label: 'Chinese', value: 'ZH' },
+];
+export const DeepLTargetLangOptions = [
+  { label: 'Arabic [1]', value: 'AR' },
+  { label: 'Bulgarian', value: 'BG' },
+  { label: 'Czech', value: 'CS' },
+  { label: 'Danish', value: 'DA' },
+  { label: 'German', value: 'DE' },
+  { label: 'Greek', value: 'EL' },
+  { label: 'English (British)', value: 'EN-GB' },
+  { label: 'English (American)', value: 'EN-US' },
+  { label: 'Spanish', value: 'ES' },
+  { label: 'Estonian', value: 'ET' },
+  { label: 'Finnish', value: 'FI' },
+  { label: 'French', value: 'FR' },
+  { label: 'Hungarian', value: 'HU' },
+  { label: 'Indonesian', value: 'ID' },
+  { label: 'Italian', value: 'IT' },
+  { label: 'Japanese', value: 'JA' },
+  { label: 'Korean', value: 'KO' },
+  { label: 'Lithuanian', value: 'LT' },
+  { label: 'Latvian', value: 'LV' },
+  { label: 'Norwegian Bokmål', value: 'NB' },
+  { label: 'Dutch', value: 'NL' },
+  { label: 'Polish', value: 'PL' },
+  { label: 'Portuguese (Brazilian)', value: 'PT-BR' },
+  {
+    label:
+      'Portuguese (all Portuguese varieties excluding Brazilian Portuguese)',
+    value: 'PT-PT',
+  },
+  { label: 'Romanian', value: 'RO' },
+  { label: 'Russian', value: 'RU' },
+  { label: 'Slovak', value: 'SK' },
+  { label: 'Slovenian', value: 'SL' },
+  { label: 'Swedish', value: 'SV' },
+  { label: 'Turkish', value: 'TR' },
+  { label: 'Ukrainian', value: 'UK' },
+  { label: 'Chinese (simplified)', value: 'ZH' },
+];

web/src/pages/flow/deepl-form/index.tsx

@@ -0,0 +1,36 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, InputNumber, Select } from 'antd';
+import { DeepLSourceLangOptions, DeepLTargetLangOptions } from '../constant';
+import { useBuildSortOptions } from '../form-hooks';
+import { IOperatorForm } from '../interface';
+
+const DeepLForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const options = useBuildSortOptions();
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <Form.Item label={t('text')} name={'text'}>
+        <InputNumber></InputNumber>
+      </Form.Item>
+      <Form.Item label={t('authKey')} name={'auth_key'}>
+        <Select options={options}></Select>
+      </Form.Item>
+      <Form.Item label={t('sourceLang')} name={'source_lang'}>
+        <Select options={DeepLSourceLangOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('targetLang')} name={'target_lang'}>
+        <Select options={DeepLTargetLangOptions}></Select>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DeepLForm;

web/src/pages/flow/flow-drawer/index.tsx

@@ -24,6 +24,7 @@ import RetrievalForm from '../retrieval-form';
 import RewriteQuestionForm from '../rewrite-question-form';
 import WikipediaForm from '../wikipedia-form';
 
+import DeepLForm from '../deepl-form';
 import styles from './index.less';
 
 interface IProps {
@@ -48,6 +49,7 @@ const FormMap = {
   [Operator.Google]: GoogleForm,
   [Operator.Bing]: BingForm,
   [Operator.GoogleScholar]: GoogleScholarForm,
+  [Operator.DeepL]: DeepLForm,
 };
 
 const EmptyContent = () => <div>empty</div>;

web/src/pages/flow/form-hooks.ts

@@ -1,4 +1,5 @@
-import { useCallback } from 'react';
+import { useTranslate } from '@/hooks/common-hooks';
+import { useCallback, useMemo } from 'react';
 import { Operator } from './constant';
 import useGraphStore from './store';
 
@@ -71,3 +72,15 @@ export const useHandleFormSelectChange = (nodeId?: string) => {
 
   return { handleSelectChange };
 };
+
+export const useBuildSortOptions = () => {
+  const { t } = useTranslate('flow');
+
+  const options = useMemo(() => {
+    return ['data', 'relevance'].map((x) => ({
+      value: x,
+      label: t(x),
+    }));
+  }, [t]);
+  return options;
+};

web/src/pages/flow/google-scholar-form/index.tsx

@@ -3,6 +3,7 @@ import { useTranslate } from '@/hooks/common-hooks';
 import { DatePicker, DatePickerProps, Form, Select, Switch } from 'antd';
 import dayjs from 'dayjs';
 import { useCallback, useMemo } from 'react';
+import { useBuildSortOptions } from '../form-hooks';
 import { IOperatorForm } from '../interface';
 
 const YearPicker = ({
@@ -33,12 +34,7 @@ const YearPicker = ({
 const GoogleScholarForm = ({ onValuesChange, form }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
-  const options = useMemo(() => {
-    return ['data', 'relevance'].map((x) => ({
-      value: x,
-      label: t(x),
-    }));
-  }, [t]);
+  const options = useBuildSortOptions();
 
   return (
     <Form

web/src/pages/flow/hooks.ts

@@ -35,6 +35,7 @@ import {
   initialBeginValues,
   initialBingValues,
   initialCategorizeValues,
+  initialDeepLValues,
   initialDuckValues,
   initialGenerateValues,
   initialGoogleScholarValues,
@@ -99,6 +100,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.Google]: initialGoogleValues,
       [Operator.Bing]: initialBingValues,
       [Operator.GoogleScholar]: initialGoogleScholarValues,
+      [Operator.DeepL]: initialDeepLValues,
     };
   }, [llmId]);