From 21cd4b67f010babce47d7c5c3b2962abe4d730ab Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 21 Feb 2025 16:03:39 +0800
Subject: [PATCH] chore: rerank init params

---
 .../playground/components/ground-reranker.tsx | 128 ++++++------------
 src/pages/playground/config/index.ts          |   3 +
 src/pages/playground/hooks/use-init-meta.ts   |   3 +
 3 files changed, 44 insertions(+), 90 deletions(-)

diff --git a/src/pages/playground/components/ground-reranker.tsx b/src/pages/playground/components/ground-reranker.tsx
index be46f61a..20cd3c9d 100644
--- a/src/pages/playground/components/ground-reranker.tsx
+++ b/src/pages/playground/components/ground-reranker.tsx
@@ -9,7 +9,7 @@ import {
   PlusOutlined,
   SendOutlined
 } from '@ant-design/icons';
-import { useIntl, useSearchParams } from '@umijs/max';
+import { useIntl } from '@umijs/max';
 import { Button, Checkbox, Form, Input, Spin, Tag, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
@@ -26,7 +26,9 @@ import {
 } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { rerankerQuery } from '../apis';
-import { MessageItem, ParamsSchema } from '../config/types';
+import { ParamsSchema } from '../config/types';
+import { LLM_METAKEYS } from '../hooks/config';
+import { useInitLLmMeta } from '../hooks/use-init-meta';
 import '../style/ground-left.less';
 import '../style/rerank.less';
 import '../style/system-message-wrap.less';
@@ -41,7 +43,7 @@ interface MessageProps {
   ref?: any;
 }
 
-const paramsConfig: ParamsSchema[] = [
+const fieldConfig: ParamsSchema[] = [
   {
     type: 'InputNumber',
     name: 'top_n',
@@ -61,32 +63,20 @@ const paramsConfig: ParamsSchema[] = [
   }
 ];
 
-const initialValues = {
-  top_n: 3
-};
-
 const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
   const { modelList } = props;
-  const acceptType =
-    '.txt, .doc, .docx, .xls, .xlsx, .csv, .md, .pdf, .eml, .msg, .ppt, .pptx, .xml, .epub, .html';
-  const messageId = useRef<number>(0);
-  const [messageList, setMessageList] = useState<MessageItem[]>([]);
 
+  const messageId = useRef<number>(0);
   const intl = useIntl();
   const requestSource = useRequestToken();
-  const [searchParams] = useSearchParams();
-  const selectModel = searchParams.get('model') || '';
-  const [parameters, setParams] = useState<any>({});
   const [show, setShow] = useState(false);
   const [loading, setLoading] = useState(false);
   const [tokenResult, setTokenResult] = useState<any>(null);
   const [collapse, setCollapse] = useState(false);
   const scroller = useRef<any>(null);
   const inputListRef = useRef<any>(null);
-  const paramsRef = useRef<any>(null);
   const messageListLengthCache = useRef<number>(0);
   const requestToken = useRef<any>(null);
-  const formRef = useRef<any>(null);
   const multiplePasteEnable = useRef<boolean>(true);
   const [isEmptyText, setIsEmptyText] = useState<boolean>(false);
   const [fileList, setFileList] = useState<
@@ -130,8 +120,21 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
 
   const { initialize, updateScrollerPosition: updateDocumentScrollerPosition } =
     useOverlayScroller();
-  const { initialize: innitializeParams, updateScrollerPosition } =
-    useOverlayScroller();
+
+  const {
+    handleOnValuesChange,
+    formRef,
+    paramsConfig,
+    initialValues,
+    parameters,
+    paramsRef,
+    modelMeta,
+    formFields
+  } = useInitLLmMeta(props, {
+    defaultValues: { top_n: 3 },
+    defaultParamsConfig: fieldConfig,
+    metaKeys: LLM_METAKEYS
+  });
 
   useImperativeHandle(ref, () => {
     return {
@@ -148,14 +151,14 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     return generateRerankCode({
       api: '/v1/rerank',
       parameters: {
-        ...parameters,
+        ..._.pick(parameters, ['model', ..._.split(formFields, ',')]),
         query: queryValue,
         documents: [...textList, ...fileList]
           .map((item) => item.text)
           .filter((text) => text)
       }
     });
-  }, [parameters, queryValue, textList, fileList]);
+  }, [parameters, formFields, queryValue, textList, fileList]);
 
   // [0.1, 1.0]
   const normalizValue = (data: { min: number; max: number; value: number }) => {
@@ -290,30 +293,6 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
       newTextList = _.sortBy(newTextList, 'rank');
       setSortIndexMap(sortMap);
       setTextList(newTextList);
-
-      setMessageList([
-        {
-          title: 'Results',
-          role: '',
-          content: result.results?.map((item: any) => {
-            const percent: number = normalizValue({
-              min: minValue,
-              max: maxValue,
-              value: item.relevance_score
-            });
-            return {
-              uid: setMessageId(),
-              text: `${item.document?.text?.slice(0, 500) || ''}`,
-              docIndex: item.index,
-              title: documentList[item.index]?.name || '',
-              score: item.relevance_score,
-              extra: renderPercent(percent),
-              normalizValue: percent
-            };
-          }),
-          uid: setMessageId()
-        }
-      ]);
     } catch (error: any) {
       setTokenResult({
         error: true,
@@ -336,20 +315,6 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     setShow(false);
   };
 
-  const handleUpdateFileList = (
-    files: { text: string; name: string; uid: number | string }[]
-  ) => {
-    console.log('files:', files);
-    setFileList((preList) => {
-      return [...preList, ...files];
-    });
-  };
-
-  const handleDeleteFile = (uid: number | string) => {
-    setFileList((preList) => {
-      return preList.filter((item) => item.uid !== uid);
-    });
-  };
   const handleAddText = () => {
     inputListRef.current?.handleAdd();
   };
@@ -428,12 +393,20 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     []
   );
 
-  const handleModelChange = (value: string) => {
-    const model = modelList.find((item) => item.value === value);
-    if (model) {
-      setMetaData(model.meta || {});
+  const renderExtra = useMemo(() => {
+    if (modelMeta?.n_ctx && modelMeta?.n_slot) {
+      return (
+        <Form.Item>
+          <SealInputNumber
+            disabled
+            label="Max Tokens"
+            value={_.divide(modelMeta?.n_ctx, modelMeta?.n_slot)}
+          ></SealInputNumber>
+        </Form.Item>
+      );
     }
-  };
+    return null;
+  }, modelMeta);
 
   const handleClearDocuments = () => {
     setTextList([
@@ -467,7 +440,6 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
 
   useEffect(() => {
     setMessageId();
-    setMessageList([]);
     setTokenResult(null);
   }, [parameters.model]);
 
@@ -477,16 +449,6 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
   }, [scroller.current, initialize]);
 
-  useEffect(() => {
-    if (paramsRef.current) {
-      innitializeParams(paramsRef.current);
-    }
-  }, [paramsRef.current, innitializeParams]);
-
-  useEffect(() => {
-    updateScrollerPosition();
-  }, [messageList]);
-
   useEffect(() => {
     if (textList.length + fileList.length > messageListLengthCache.current) {
       updateDocumentScrollerPosition();
@@ -630,25 +592,11 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
         <div className="box">
           <DynamicParams
             ref={formRef}
-            setParams={setParams}
-            params={parameters}
-            onModelChange={handleModelChange}
+            onValuesChange={handleOnValuesChange}
             paramsConfig={paramsConfig}
             initialValues={initialValues}
-            selectedModel={selectModel}
             modelList={modelList}
-            extra={
-              metaData?.n_ctx &&
-              metaData?.n_slot && (
-                <Form.Item>
-                  <SealInputNumber
-                    disabled
-                    label="Max Tokens"
-                    value={_.divide(metaData?.n_ctx, metaData?.n_slot)}
-                  ></SealInputNumber>
-                </Form.Item>
-              )
-            }
+            extra={renderExtra}
           />
         </div>
       </div>
diff --git a/src/pages/playground/config/index.ts b/src/pages/playground/config/index.ts
index 976f8266..65e84314 100644
--- a/src/pages/playground/config/index.ts
+++ b/src/pages/playground/config/index.ts
@@ -18,6 +18,9 @@ export const playGroundRoles = [
   }
 ];
 
+export const acceptType =
+  '.txt, .doc, .docx, .xls, .xlsx, .csv, .md, .pdf, .eml, .msg, .ppt, .pptx, .xml, .epub, .html';
+
 export const formatMessageParams = (messageList: any[]) => {
   const result: any[] = [];
 
diff --git a/src/pages/playground/hooks/use-init-meta.ts b/src/pages/playground/hooks/use-init-meta.ts
index c4b95136..0a58b232 100644
--- a/src/pages/playground/hooks/use-init-meta.ts
+++ b/src/pages/playground/hooks/use-init-meta.ts
@@ -143,6 +143,9 @@ export const useInitLLmMeta = (
     extractLLMMeta,
     handleOnModelChange,
     handleOnValuesChange,
+    setModelMeta,
+    setInitialValues,
+    setParams,
     formRef,
     paramsConfig,
     initialValues,