From b261e61d89cf5e7e7a2c2df964c1a052cd7c32d2 Mon Sep 17 00:00:00 2001 From: bill Date: Thu, 8 Aug 2024 14:44:05 +0800 Subject: [PATCH] feat: Add component DeepL #1739 --- web/src/assets/svg/deepl.svg | 13 +++ web/src/locales/en.ts | 6 ++ web/src/locales/zh-traditional.ts | 6 ++ web/src/locales/zh.ts | 6 ++ web/src/pages/flow/constant.tsx | 86 +++++++++++++++++++ web/src/pages/flow/deepl-form/index.tsx | 36 ++++++++ web/src/pages/flow/flow-drawer/index.tsx | 2 + web/src/pages/flow/form-hooks.ts | 15 +++- .../pages/flow/google-scholar-form/index.tsx | 8 +- web/src/pages/flow/hooks.ts | 2 + 10 files changed, 173 insertions(+), 7 deletions(-) create mode 100644 web/src/assets/svg/deepl.svg create mode 100644 web/src/pages/flow/deepl-form/index.tsx diff --git a/web/src/assets/svg/deepl.svg b/web/src/assets/svg/deepl.svg new file mode 100644 index 00000000000..c0b430d5ecb --- /dev/null +++ b/web/src/assets/svg/deepl.svg @@ -0,0 +1,13 @@ + + + + + + \ No newline at end of file diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index bae6ea8e793..5571cb2c35b 100644 --- a/web/src/locales/en.ts +++ b/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', diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts index e266259029d..4e3ec74c114 100644 --- a/web/src/locales/zh-traditional.ts +++ b/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”', diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index d22a3ba1bdf..1c8de8b8023 100644 --- a/web/src/locales/zh.ts +++ b/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', diff --git a/web/src/pages/flow/constant.tsx b/web/src/pages/flow/constant.tsx index 62d6c85b226..46a8f997157 100644 --- a/web/src/pages/flow/constant.tsx +++ b/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' }, +]; diff --git a/web/src/pages/flow/deepl-form/index.tsx b/web/src/pages/flow/deepl-form/index.tsx new file mode 100644 index 00000000000..f9b76d4acac --- /dev/null +++ b/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 ( +
+ + + + + + + + + + + + +
+ ); +}; + +export default DeepLForm; diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx index 52c25c3bfd5..6173b683f18 100644 --- a/web/src/pages/flow/flow-drawer/index.tsx +++ b/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 = () =>
empty
; diff --git a/web/src/pages/flow/form-hooks.ts b/web/src/pages/flow/form-hooks.ts index 24558a3f722..92e84cee479 100644 --- a/web/src/pages/flow/form-hooks.ts +++ b/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; +}; diff --git a/web/src/pages/flow/google-scholar-form/index.tsx b/web/src/pages/flow/google-scholar-form/index.tsx index 9dfa973b4ae..5ee4236f7e0 100644 --- a/web/src/pages/flow/google-scholar-form/index.tsx +++ b/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 (
{ [Operator.Google]: initialGoogleValues, [Operator.Bing]: initialBingValues, [Operator.GoogleScholar]: initialGoogleScholarValues, + [Operator.DeepL]: initialDeepLValues, }; }, [llmId]);