diff --git a/web/src/pages/flow/constant.tsx b/web/src/pages/flow/constant.tsx
index ecf212925a..f9f25c3ea2 100644
--- a/web/src/pages/flow/constant.tsx
+++ b/web/src/pages/flow/constant.tsx
@@ -410,7 +410,7 @@ export const initialGoogleScholarValues = {
 };
 
 export const initialDeepLValues = {
-  text: 5,
+  top_n: 5,
   auth_key: 'relevance',
 };
 
diff --git a/web/src/pages/flow/deepl-form/index.tsx b/web/src/pages/flow/deepl-form/index.tsx
index f9b76d4aca..cb3400debe 100644
--- a/web/src/pages/flow/deepl-form/index.tsx
+++ b/web/src/pages/flow/deepl-form/index.tsx
@@ -1,5 +1,6 @@
+import TopNItem from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/common-hooks';
-import { Form, InputNumber, Select } from 'antd';
+import { Form, Select } from 'antd';
 import { DeepLSourceLangOptions, DeepLTargetLangOptions } from '../constant';
 import { useBuildSortOptions } from '../form-hooks';
 import { IOperatorForm } from '../interface';
@@ -17,9 +18,7 @@ const DeepLForm = ({ onValuesChange, form }: IOperatorForm) => {
       form={form}
       onValuesChange={onValuesChange}
     >
-      <Form.Item label={t('text')} name={'text'}>
-        <InputNumber></InputNumber>
-      </Form.Item>
+      <TopNItem initialValue={5}></TopNItem>
       <Form.Item label={t('authKey')} name={'auth_key'}>
         <Select options={options}></Select>
       </Form.Item>