feat: Add component BaiduFanyi #1739 (#1874)

### What problem does this PR solve?

feat: Add component BaiduFanyi #1739

### Type of change


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

web/src/assets/svg/baidu-fanyi.svg

@@ -0,0 +1,6 @@
+<svg t="1723105072852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6651"
+    width="200" height="200">
+    <path
+        d="M682.667 85.333a256 256 0 0 1 256 256v341.334a256 256 0 0 1-256 256H341.333a256 256 0 0 1-256-256V341.333a256 256 0 0 1 256-256h341.334zM354.816 412.16h-48.128c-11.264 0-19.115 2.56-23.552 7.68-4.096 4.437-6.144 11.947-6.144 22.528 0 11.947 2.39 20.139 7.168 24.576 3.115 3.968 8.875 6.315 17.195 6.955l5.333 0.213h17.92c4.565 0 7.21 1.877 7.979 5.675l0.213 2.517v194.048a32.341 32.341 0 0 0-6.144 19.968c0 8.192 2.39 15.53 7.168 22.016 4.779 6.485 11.093 9.728 18.944 9.728 6.827 0 14.677-2.219 23.552-6.656 36.864-13.995 59.05-23.723 66.56-29.184 8.064-2.09 12.587-8.533 13.61-19.2l0.214-4.864v-1.536c3.84 2.987 8.832 4.821 15.061 5.419l4.907 0.213h79.872v37.888a34.133 34.133 0 0 0 8.192 23.552c6.485 8.192 15.872 12.288 28.16 12.288 13.312 0 22.87-4.267 28.672-12.8a34.347 34.347 0 0 0 6.87-17.707l0.298-5.333v-37.888h81.92c10.923 0 19.115-3.243 24.576-9.728 3.755-4.437 5.632-11.264 5.632-20.48 0-10.923-2.219-18.09-6.656-21.504-3.84-3.285-9.6-5.248-17.365-5.888l-6.187-0.256h-81.92v-36.352h68.096c10.24 0 17.579-2.901 22.016-8.704 2.73-3.413 4.096-9.728 4.096-18.944 0-11.947-2.39-19.456-7.168-22.528a23.723 23.723 0 0 0-14.08-5.419l-4.864-0.213h-68.096v-8.192c0-11.264-3.243-20.139-9.728-26.624a37.547 37.547 0 0 0-26.112-9.216c-11.605 0-20.31 3.072-26.112 9.216a33.067 33.067 0 0 0-9.941 21.205l-0.299 5.419v8.192h-65.536c-8.875 0-15.19 1.707-18.944 5.12-4.779 4.096-7.168 11.776-7.168 23.04 0 10.24 2.39 17.408 7.168 21.504 3.84 3.285 8.619 5.248 14.421 5.888l4.523 0.256h65.536V614.4h-79.872c-10.581 0-18.09 1.877-22.528 5.632-3.968 3.115-6.315 8.747-6.955 16.853l-0.213 5.163v1.024c-3.413-5.803-11.435-8.704-24.064-8.704l-10.88 4.224-11.136 4.48V458.24c0-16.043-3.243-27.819-9.728-35.328-5.845-6.144-15.573-9.643-29.227-10.539l-7.125-0.213z m317.952-123.904h-192c-16.384 0.683-25.088 10.07-26.112 28.16 0.939 15.659 8.064 24.704 21.419 27.093l4.693 0.555h158.208c3.755 0 5.632 1.365 5.632 4.096 0 5.803-10.752 14.848-32.256 27.136-9.557 6.144-19.797 12.117-30.72 17.92a603.003 603.003 0 0 1-60.928-31.232 29.27 29.27 0 0 0-22.016-9.728c-8.533 0-15.53 2.219-20.992 6.656-9.899 7.51-14.848 14.677-14.848 21.504 0 4.779 4.608 10.752 13.824 17.92 11.264 8.875 24.235 17.579 38.912 26.112-21.163 9.216-44.715 18.432-70.656 27.648-8.192 6.827-12.288 14.848-12.288 24.064 0 6.485 2.901 13.141 8.704 19.968 6.144 6.827 14.677 10.24 25.6 10.24 12.63-1.024 37.888-9.557 75.776-25.6a829.759 829.759 0 0 0 43.008-20.992c20.48 8.533 42.667 16.896 66.56 25.088 11.947 3.413 23.21 6.144 33.792 8.192 11.264 2.048 20.821 3.072 28.672 3.072 10.581 0 18.603-3.755 24.064-11.264a28.885 28.885 0 0 0 8.192-20.48c0-10.923-4.779-18.261-14.336-22.016a789.803 789.803 0 0 1-82.432-22.528 962.734 962.734 0 0 0 38.912-29.184c24.917-21.163 37.376-39.253 37.376-54.272 0-16.043-4.779-28.843-14.336-38.4-5.973-5.675-16.768-8.875-32.427-9.557l-6.997-0.171z m-346.112-10.24c-8.533 0-16.384 2.048-23.552 6.144-8.192 4.437-12.288 11.776-12.288 22.016 0 2.39 1.365 5.29 4.096 8.704 18.09 18.773 33.963 37.888 47.616 57.344 4.096 7.85 11.435 11.776 22.016 11.776 13.312 0 24.405-4.95 33.28-14.848 3.413-2.73 5.12-8.363 5.12-16.896 0-6.144-7.339-17.75-22.016-34.816-12.97-15.019-23.723-25.43-32.256-31.232-5.461-5.461-12.8-8.192-22.016-8.192z"
+        fill="#1C90FF" p-id="6652"></path>
+</svg>

web/src/locales/en.ts

@@ -670,6 +670,61 @@ The above is the content you need to summarize.`,
       gitHub: 'GitHub',
       githubDescription:
         'This component is used to search the repository from https://github.com/. Top N specifies the number of search results to be adjusted.',
+      baiduFanyi: 'BaiduFanyi',
+      baiduFanyiDescription:
+        'This component is used to get translations from https://fanyi.baidu.com/. Typically, it provides a more specialized translation result',
+      appid: 'App id',
+      secretKey: 'Secret key',
+      domain: 'Domain',
+      transType: 'Translation type',
+      baiduSecretKeyOptions: {
+        translate: 'General translation',
+        fieldtranslate: 'Field translation',
+      },
+      baiduDomainOptions: {
+        it: 'Information technology',
+        finance: 'Financial and economics',
+        machinery: 'Machinery manufacturing',
+        senimed: 'Biomedicine',
+        novel: 'Online literature',
+        academic: 'Academic paper',
+        aerospace: 'Aerospace',
+        wiki: 'Humanities and social sciences',
+        news: 'News and information',
+        law: 'Laws and regulations',
+        contract: 'Contract',
+      },
+      baiduSourceLangOptions: {
+        auto: 'Auto detect',
+        zh: 'Chinese',
+        en: 'English',
+        yue: 'Cantonese',
+        wyw: 'Classical Chinese',
+        jp: 'Japanese',
+        kor: 'Korean',
+        fra: 'French',
+        spa: 'Spanish',
+        th: 'Thai',
+        ara: 'Arabic',
+        ru: 'Russian',
+        pt: 'Portuguese',
+        de: 'German',
+        it: 'Italian',
+        el: 'Greek',
+        nl: 'Dutch',
+        pl: 'Polish',
+        bul: 'Bulgarian',
+        est: 'Estonian',
+        dan: 'Danish',
+        fin: 'Finnish',
+        cs: 'Czech',
+        rom: 'Romanian',
+        slo: 'Slovenian',
+        swe: 'Swedish',
+        hu: 'Hungarian',
+        cht: 'Traditional Chinese',
+        vie: 'Vietnamese',
+      },
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -628,6 +628,61 @@ export default {
       gitHub: 'GitHub',
       gitHubDescription:
         '此元件用於從 https://github.com/ 搜尋儲存庫。 Top N 指定要調整的搜尋結果的數量。',
+      baiduFanyi: '百度翻譯',
+      baiduFanyiDescription:
+        '此組件用於從https://fanyi.baidu.com/取得翻譯。通常，它提供更專業的翻譯結果',
+      appid: 'App id',
+      secretKey: '秘鑰',
+      domain: '領域',
+      transType: '翻譯類型',
+      baiduSecretKeyOptions: {
+        translate: '一般翻譯',
+        fieldtranslate: '領域翻譯',
+      },
+      baiduDomainOptions: {
+        it: '資訊科技領域',
+        finance: '金融財經領域',
+        machinery: '機械製造領域',
+        senimed: '生物醫藥領域',
+        novel: '網路文學領域',
+        academic: '學術論文領域',
+        aerospace: '航空航太領域',
+        wiki: '人文社科領域',
+        news: '新聞資訊領域',
+        law: '法律法規領域',
+        contract: '合約領域',
+      },
+      baiduSourceLangOptions: {
+        auto: '自動偵測',
+        zh: '中文',
+        en: '英語',
+        yue: '粵語',
+        wyw: '文言文',
+        jp: '日文',
+        kor: '韓文',
+        fra: '法文',
+        spa: '西班牙文',
+        th: '泰語',
+        ara: '阿拉伯語',
+        ru: '俄文',
+        pt: '葡萄牙語',
+        de: '德語',
+        it: '義大利語',
+        el: '希臘文',
+        nl: '荷蘭語',
+        pl: '波蘭語',
+        bul: '保加利亞語',
+        est: '愛沙尼亞語',
+        dan: '丹麥語',
+        fin: '芬蘭語',
+        cs: '捷克語',
+        rom: '羅馬尼亞語',
+        slo: '斯洛維尼亞語',
+        swe: '瑞典語',
+        hu: '匈牙利語',
+        cht: '繁體中文',
+        vie: '越南語',
+      },
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -646,6 +646,61 @@ export default {
       gitHub: 'GitHub',
       githubDescription:
         '该组件用于从 https://github.com/ 搜索仓库。Top N 指定需要调整的搜索结果数量。',
+      baiduFanyi: '百度翻译',
+      baiduFanyiDescription:
+        '该组件用于从 https://fanyi.baidu.com/ 获取翻译。通常，它提供更专业的翻译结果',
+      appid: 'App id',
+      secretKey: '秘钥',
+      domain: '领域',
+      transType: '翻译类型',
+      baiduSecretKeyOptions: {
+        translate: '通用翻译',
+        fieldtranslate: '领域翻译',
+      },
+      baiduDomainOptions: {
+        it: '信息技术领域',
+        finance: '金融财经领域',
+        machinery: '机械制造领域',
+        senimed: '生物医药领域',
+        novel: '网络文学领域',
+        academic: '学术论文领域',
+        aerospace: '航空航天领域',
+        wiki: '人文社科领域',
+        news: '新闻资讯领域',
+        law: '法律法规领域',
+        contract: '合同领域',
+      },
+      baiduSourceLangOptions: {
+        auto: '自动检测',
+        zh: '中文',
+        en: '英语',
+        yue: '粤语',
+        wyw: '文言文',
+        jp: '日语',
+        kor: '韩语',
+        fra: '法语',
+        spa: '西班牙语',
+        th: '泰语',
+        ara: '阿拉伯语',
+        ru: '俄语',
+        pt: '葡萄牙语',
+        de: '德语',
+        it: '意大利语',
+        el: '希腊语',
+        nl: '荷兰语',
+        pl: '波兰语',
+        bul: '保加利亚语',
+        est: '爱沙尼亚语',
+        dan: '丹麦语',
+        fin: '芬兰语',
+        cs: '捷克语',
+        rom: '罗马尼亚语',
+        slo: '斯洛文尼亚语',
+        swe: '瑞典语',
+        hu: '匈牙利语',
+        cht: '繁体中文',
+        vie: '越南语',
+      },
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/flow/baidu-fanyi-form/index.tsx

@@ -0,0 +1,70 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Input, Select } from 'antd';
+import { useMemo } from 'react';
+import {
+  BaiduFanyiDomainOptions,
+  BaiduFanyiSourceLangOptions,
+} from '../constant';
+import { IOperatorForm } from '../interface';
+
+const BaiduFanyiForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const options = useMemo(() => {
+    return ['translate', 'fieldtranslate'].map((x) => ({
+      value: x,
+      label: t(`baiduSecretKeyOptions.${x}`),
+    }));
+  }, [t]);
+
+  const baiduFanyiOptions = useMemo(() => {
+    return BaiduFanyiDomainOptions.map((x) => ({
+      value: x,
+      label: t(`baiduDomainOptions.${x}`),
+    }));
+  }, [t]);
+
+  const baiduFanyiSourceLangOptions = useMemo(() => {
+    return BaiduFanyiSourceLangOptions.map((x) => ({
+      value: x,
+      label: t(`baiduSourceLangOptions.${x}`),
+    }));
+  }, [t]);
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <Form.Item label={t('appid')} name={'appid'}>
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label={t('secretKey')} name={'secret_key'}>
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label={t('transType')} name={'trans_type'}>
+        <Select options={options}></Select>
+      </Form.Item>
+      <Form.Item noStyle dependencies={['model_type']}>
+        {({ getFieldValue }) =>
+          getFieldValue('trans_type') === 'fieldtranslate' && (
+            <Form.Item label={t('domain')} name={'domain'}>
+              <Select options={baiduFanyiOptions}></Select>
+            </Form.Item>
+          )
+        }
+      </Form.Item>
+      <Form.Item label={t('sourceLang')} name={'source_lang'}>
+        <Select options={baiduFanyiSourceLangOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('targetLang')} name={'target_lang'}>
+        <Select options={baiduFanyiSourceLangOptions}></Select>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default BaiduFanyiForm;

web/src/pages/flow/constant.tsx

@@ -1,4 +1,5 @@
 import { ReactComponent as ArXivIcon } from '@/assets/svg/arxiv.svg';
+import { ReactComponent as baiduFanyiIcon } from '@/assets/svg/baidu-fanyi.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';
@@ -50,6 +51,7 @@ export enum Operator {
   GoogleScholar = 'GoogleScholar',
   DeepL = 'DeepL',
   GitHub = 'GitHub',
+  BaiduFanyi = 'BaiduFanyi',
 }
 
 export const operatorIconMap = {
@@ -72,6 +74,7 @@ export const operatorIconMap = {
   [Operator.GoogleScholar]: GoogleScholarIcon,
   [Operator.DeepL]: DeepLIcon,
   [Operator.GitHub]: GithubIcon,
+  [Operator.BaiduFanyi]: baiduFanyiIcon,
 };
 
 export const operatorMap = {
@@ -157,6 +160,7 @@ export const operatorMap = {
   [Operator.GoogleScholar]: {},
   [Operator.DeepL]: {},
   [Operator.GitHub]: {},
+  [Operator.BaiduFanyi]: {},
 };
 
 export const componentMenuList = [
@@ -214,6 +218,9 @@ export const componentMenuList = [
   {
     name: Operator.GitHub,
   },
+  {
+    name: Operator.BaiduFanyi,
+  },
 ];
 
 export const initialRetrievalValues = {
@@ -327,6 +334,12 @@ export const initialGithubValues = {
   top_n: 5,
 };
 
+export const initialBaiduFanyiValues = {
+  appid: 'xxx',
+  secret_key: 'xxx',
+  trans_type: 'translate',
+};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -393,6 +406,7 @@ export const RestrictedUpstreamMap = {
   [Operator.GoogleScholar]: [Operator.Begin, Operator.Retrieval],
   [Operator.DeepL]: [Operator.Begin, Operator.Retrieval],
   [Operator.GitHub]: [Operator.Begin, Operator.Retrieval],
+  [Operator.BaiduFanyi]: [Operator.Begin, Operator.Retrieval],
 };
 
 export const NodeMap = {
@@ -415,6 +429,7 @@ export const NodeMap = {
   [Operator.GoogleScholar]: 'ragNode',
   [Operator.DeepL]: 'ragNode',
   [Operator.GitHub]: 'ragNode',
+  [Operator.BaiduFanyi]: 'ragNode',
 };
 
 export const LanguageOptions = [
@@ -2452,3 +2467,49 @@ export const DeepLTargetLangOptions = [
   { label: 'Ukrainian', value: 'UK' },
   { label: 'Chinese (simplified)', value: 'ZH' },
 ];
+
+export const BaiduFanyiDomainOptions = [
+  'it',
+  'finance',
+  'machinery',
+  'senimed',
+  'novel',
+  'academic',
+  'aerospace',
+  'wiki',
+  'news',
+  'law',
+  'contract',
+];
+
+export const BaiduFanyiSourceLangOptions = [
+  'auto',
+  'zh',
+  'en',
+  'yue',
+  'wyw',
+  'jp',
+  'kor',
+  'fra',
+  'spa',
+  'th',
+  'ara',
+  'ru',
+  'pt',
+  'de',
+  'it',
+  'el',
+  'nl',
+  'pl',
+  'bul',
+  'est',
+  'dan',
+  'fin',
+  'cs',
+  'rom',
+  'slo',
+  'swe',
+  'hu',
+  'cht',
+  'vie',
+];

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

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 import { Node } from 'reactflow';
 import AnswerForm from '../answer-form';
 import ArXivForm from '../arxiv-form';
+import BaiduFanyiForm from '../baidu-fanyi-form';
 import BaiduForm from '../baidu-form';
 import BeginForm from '../begin-form';
 import BingForm from '../bing-form';
@@ -52,6 +53,7 @@ const FormMap = {
   [Operator.GoogleScholar]: GoogleScholarForm,
   [Operator.DeepL]: DeepLForm,
   [Operator.GitHub]: GithubForm,
+  [Operator.BaiduFanyi]: BaiduFanyiForm,
 };
 
 const EmptyContent = () => <div>empty</div>;

web/src/pages/flow/flow-sider/index.less

@@ -11,4 +11,6 @@
 
 .siderContent {
   padding: 10px 4px;
+  overflow: auto;
+  height: calc(100vh - 80px);
 }

web/src/pages/flow/hooks.ts

@@ -31,6 +31,7 @@ import {
   Operator,
   RestrictedUpstreamMap,
   initialArXivValues,
+  initialBaiduFanyiValues,
   initialBaiduValues,
   initialBeginValues,
   initialBingValues,
@@ -103,6 +104,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.GoogleScholar]: initialGoogleScholarValues,
       [Operator.DeepL]: initialDeepLValues,
       [Operator.GitHub]: initialGithubValues,
+      [Operator.BaiduFanyi]: initialBaiduFanyiValues,
     };
   }, [llmId]);