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/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]);