Feat: Rendering recall test page #3221 (#7689)

### What problem does this PR solve?

Feat: Rendering recall test page #3221
### Type of change


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

web/src/components/rerank.tsx

@@ -4,7 +4,8 @@ import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
 import { Select as AntSelect, Form, message, Slider } from 'antd';
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { SingleFormSlider } from './ui/dual-range-slider';
+import { z } from 'zod';
+import { SliderInputFormField } from './slider-input-form-field';
 import {
   FormControl,
   FormField,
@@ -63,6 +64,14 @@ export const RerankItem = () => {
   );
 };
 
+export const topKSchema = {
+  top_k: z.number().optional(),
+};
+
+export const initialTopKValue = {
+  top_k: 1024,
+};
+
 const Rerank = () => {
   const { t } = useTranslate('knowledgeDetails');
 
@@ -143,7 +152,7 @@ function RerankFormField() {
 }
 
 export function RerankFormFields() {
-  const { control, watch } = useFormContext();
+  const { watch } = useFormContext();
   const { t } = useTranslate('knowledgeDetails');
   const rerankId = watch(RerankId);
 
@@ -151,23 +160,13 @@ export function RerankFormFields() {
     <>
       <RerankFormField></RerankFormField>
       {rerankId && (
-        <FormField
-          control={control}
+        <SliderInputFormField
           name={'top_k'}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel tooltip={t('topKTip')}>{t('topK')}</FormLabel>
-              <FormControl>
-                <SingleFormSlider
-                  {...field}
-                  max={2048}
-                  min={1}
-                ></SingleFormSlider>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+          label={t('topK')}
+          max={2048}
+          min={1}
+          tooltip={t('topKTip')}
+        ></SliderInputFormField>
       )}
     </>
   );