From 419f1e07d1b80d5a909d9cd0fab93b08e21faad4 Mon Sep 17 00:00:00 2001 From: jialin Date: Thu, 17 Oct 2024 09:24:15 +0800 Subject: [PATCH] refactor: rerank item --- config/routes.ts | 2 +- src/assets/styles/common.less | 4 + src/global.less | 4 + .../playground/components/ground-reranker.tsx | 187 ++++++++++-------- .../playground/components/input-list.tsx | 156 ++++++++------- .../playground/components/message-input.tsx | 10 +- .../playground/components/params-settings.tsx | 4 +- .../playground/components/reranker-params.tsx | 1 + .../playground/components/upload-file.tsx | 4 +- .../playground/components/upload-img.tsx | 19 +- src/pages/playground/index.tsx | 4 +- src/pages/playground/rerank.tsx | 6 +- src/pages/playground/style/input-list.less | 12 +- src/pages/playground/style/rerank.less | 16 ++ src/utils/read-html.ts | 3 +- 15 files changed, 250 insertions(+), 182 deletions(-) create mode 100644 src/pages/playground/style/rerank.less diff --git a/config/routes.ts b/config/routes.ts index be0ef44e..97c2a897 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -9,7 +9,7 @@ export default [ }, { name: 'playground', - icon: 'Comment', + icon: 'ExperimentOutlined', path: '/playground', routes: [ { diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less index 3816fe1d..5076c00c 100644 --- a/src/assets/styles/common.less +++ b/src/assets/styles/common.less @@ -132,6 +132,10 @@ gap: 8px; } +.line-24 { + line-height: 24px; +} + .relative { position: relative; } diff --git a/src/global.less b/src/global.less index 31e810a8..a4cd0eb4 100644 --- a/src/global.less +++ b/src/global.less @@ -139,6 +139,10 @@ html { } } + .css-var-r11.ant-menu-css-var { + --ant-menu-item-color: var(--color-text-1); + } + .css-var-rf.ant-menu-css-var, .css-var-ri.ant-menu-css-var, .css-var-rh.ant-menu-css-var { diff --git a/src/pages/playground/components/ground-reranker.tsx b/src/pages/playground/components/ground-reranker.tsx index 7165101a..595a95b6 100644 --- a/src/pages/playground/components/ground-reranker.tsx +++ b/src/pages/playground/components/ground-reranker.tsx @@ -1,8 +1,13 @@ import useOverlayScroller from '@/hooks/use-overlay-scroller'; import useRequestToken from '@/hooks/use-request-token'; -import { ClearOutlined, InboxOutlined } from '@ant-design/icons'; +import { + ClearOutlined, + PlusOutlined, + SearchOutlined, + UploadOutlined +} from '@ant-design/icons'; import { useIntl, useSearchParams } from '@umijs/max'; -import { Button, Spin } from 'antd'; +import { Button, Divider, Spin, Tooltip } from 'antd'; import classNames from 'classnames'; import 'overlayscrollbars/overlayscrollbars.css'; import { @@ -16,6 +21,7 @@ import { import { rerankerQuery } from '../apis'; import { MessageItem } from '../config/types'; import '../style/ground-left.less'; +import '../style/rerank.less'; import '../style/system-message-wrap.less'; import FileList from './file-list'; import InputList from './input-list'; @@ -52,6 +58,7 @@ const GroundReranker: React.FC = forwardRef((props, ref) => { const controllerRef = useRef(null); const scroller = useRef(null); const currentMessageRef = useRef(null); + const inputListRef = useRef(null); const paramsRef = useRef(null); const messageListLengthCache = useRef(0); const requestToken = useRef(null); @@ -128,7 +135,7 @@ const GroundReranker: React.FC = forwardRef((props, ref) => { content: result.results?.map((item: any) => { return { uid: item.index, - text: `${item.document?.text?.slice(0, 100) || ''}`, + text: `${item.document?.text?.slice(0, 500) || ''}`, docIndex: item.index, title: documentList[item.index]?.name || '', score: item.relevance_score @@ -177,6 +184,9 @@ const GroundReranker: React.FC = forwardRef((props, ref) => { return preList.filter((item) => item.uid !== uid); }); }; + const handleAddText = () => { + inputListRef.current?.handleAdd(); + }; const handleTextListChange = ( list: { text: string; uid: number | string; name: string }[] @@ -219,53 +229,92 @@ const GroundReranker: React.FC = forwardRef((props, ref) => { }, [textList.length, fileList.length]); return ( -
+
-
- <> -
- - Results - -
- } - /> - {loading && ( - -
- - )} +
+
+

+ Documents +

+
+
+ + Support: {acceptType}}> + + + + +
+
- -
-
- + +
+ +
+
+
+ +
-
- - - Click or drag file to this area to upload - -
- support {acceptType} - + <> +
+ + Results + +
+ } + /> + {loading && ( + +
+ + )} +
+ +
+
} loading={loading} disabled={!parameters.model} isEmpty={true} @@ -277,6 +326,7 @@ const GroundReranker: React.FC = forwardRef((props, ref) => { placeholer={intl.formatMessage({ id: 'playground.input.keyword.holder' })} + tools={Query} />
@@ -284,50 +334,15 @@ const GroundReranker: React.FC = forwardRef((props, ref) => { className={classNames('params-wrapper', { collapsed: collapse })} - style={{ - overflow: 'hidden', - paddingBottom: 16 - }} + ref={paramsRef} > -
-
- -

- Documents - -

-
-
- -
- -
-
+
+
diff --git a/src/pages/playground/components/input-list.tsx b/src/pages/playground/components/input-list.tsx index b72945db..9ab67fc7 100644 --- a/src/pages/playground/components/input-list.tsx +++ b/src/pages/playground/components/input-list.tsx @@ -1,60 +1,64 @@ import RowTextarea from '@/components/seal-form/row-textarea'; -import { - MinusCircleOutlined, - PlusCircleOutlined, - PlusOutlined -} from '@ant-design/icons'; +import { DeleteOutlined } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Button, Tooltip } from 'antd'; -import React, { useRef } from 'react'; +import React, { forwardRef, useImperativeHandle, useRef } from 'react'; import '../style/input-list.less'; interface InputListProps { + ref?: any; textList: { text: string; uid: number | string; name: string }[]; onChange?: ( textList: { text: string; uid: number | string; name: string }[] ) => void; } -const InputList: React.FC = ({ textList, onChange }) => { - const intl = useIntl(); - const messageId = useRef(0); +const InputList: React.FC = forwardRef( + ({ textList, onChange }, ref) => { + const intl = useIntl(); + const messageId = useRef(0); - const setMessageId = () => { - messageId.current = messageId.current + 1; - }; + const setMessageId = () => { + messageId.current = messageId.current + 1; + }; - const handleAdd = () => { - setMessageId(); - const dataList = [...textList]; - dataList.push({ - text: '', - uid: messageId.current, - name: `Text ${dataList.length + 1}` - }); - onChange?.(dataList); - }; + const handleAdd = () => { + setMessageId(); + const dataList = [...textList]; + dataList.push({ + text: '', + uid: messageId.current, + name: `Text ${dataList.length + 1}` + }); + onChange?.(dataList); + }; - const handleDelete = (text: { text: string; uid: number | string }) => { - const dataList = [...textList]; - const index = dataList.findIndex((item) => item.uid === text.uid); - dataList.splice(index, 1); - onChange?.(dataList); - }; + const handleDelete = (text: { text: string; uid: number | string }) => { + const dataList = [...textList]; + const index = dataList.findIndex((item) => item.uid === text.uid); + dataList.splice(index, 1); + onChange?.(dataList); + }; - const handleTextChange = ( - value: string, - text: { text: string; uid: number | string } - ) => { - const dataList = [...textList]; - const index = dataList.findIndex((item) => item.uid === text.uid); - dataList[index].text = value; - onChange?.(dataList); - }; + const handleTextChange = ( + value: string, + text: { text: string; uid: number | string } + ) => { + const dataList = [...textList]; + const index = dataList.findIndex((item) => item.uid === text.uid); + dataList[index].text = value; + onChange?.(dataList); + }; - return ( -
- {textList.length === 0 && ( + useImperativeHandle(ref, () => ({ + handleAdd, + handleDelete, + handleTextChange + })); + + return ( +
+ {/* {textList.length === 0 && ( - )} - {textList.map((text, index) => { - return ( -
-
- handleTextChange(e.target.value, text)} - > -
- - - - - {index === textList.length - 1 && ( + )} */} + {textList.map((text, index) => { + return ( +
+
+ handleTextChange(e.target.value, text)} + > +
+ - )} - -
- ); - })} -
- ); -}; + {/* {index === textList.length - 1 && ( + + + + )} */} + +
+ ); + })} +
+ ); + } +); export default React.memo(InputList); diff --git a/src/pages/playground/components/message-input.tsx b/src/pages/playground/components/message-input.tsx index 0597587a..cf99ebaf 100644 --- a/src/pages/playground/components/message-input.tsx +++ b/src/pages/playground/components/message-input.tsx @@ -65,8 +65,10 @@ interface MessageInputProps { instanceId: symbol; })[] ) => void; + submitIcon?: React.ReactNode; presetPrompt?: (list: CurrentMessage[]) => void; addMessage?: (message: CurrentMessage) => void; + tools?: React.ReactNode; loading: boolean; showModelSelection?: boolean; disabled: boolean; @@ -90,7 +92,10 @@ const MessageInput: React.FC = ({ disabled, isEmpty, scope, + submitIcon, placeholer, + tools, + shouldResetMessage = true }) => { const { TextArea } = Input; @@ -345,6 +350,7 @@ const MessageInput: React.FC = ({
+ {tools} {scope !== 'reranker' && ( <> ) : ( diff --git a/src/pages/playground/components/params-settings.tsx b/src/pages/playground/components/params-settings.tsx index cbcfedd2..1cb88058 100644 --- a/src/pages/playground/components/params-settings.tsx +++ b/src/pages/playground/components/params-settings.tsx @@ -163,7 +163,7 @@ const ParamsSettings: React.FC = ({
{showModelSelector && ( <> -

+

{intl.formatMessage({ id: 'playground.model' })}

@@ -184,7 +184,7 @@ const ParamsSettings: React.FC = ({ )} -

+

{intl.formatMessage({ id: 'playground.parameters' })}

diff --git a/src/pages/playground/components/reranker-params.tsx b/src/pages/playground/components/reranker-params.tsx index be49a912..5bd4a71f 100644 --- a/src/pages/playground/components/reranker-params.tsx +++ b/src/pages/playground/components/reranker-params.tsx @@ -148,6 +148,7 @@ const ParamsSettings: React.FC = ({
{ <> +

Parameters

name="model" rules={[ diff --git a/src/pages/playground/components/upload-file.tsx b/src/pages/playground/components/upload-file.tsx index 9513165b..1feb0d46 100644 --- a/src/pages/playground/components/upload-file.tsx +++ b/src/pages/playground/components/upload-file.tsx @@ -116,7 +116,7 @@ const UploadImg: React.FC = ({ return ( <> - = ({