refactor: rerank item

2024-11-22 10:00:34 +08:00
parent e05ec3d2d5
commit 419f1e07d1
15 changed files with 250 additions and 182 deletions
@@ -9,7 +9,7 @@ export default [
  },
  {
    name: 'playground',
-    icon: 'Comment',
+    icon: 'ExperimentOutlined',
    path: '/playground',
    routes: [
      {
@@ -132,6 +132,10 @@
  gap: 8px;
 }

+.line-24 {
+  line-height: 24px;
+}
+
 .relative {
  position: relative;
 }
@@ -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 {
@@ -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<MessageProps> = forwardRef((props, ref) => {
  const controllerRef = useRef<any>(null);
  const scroller = useRef<any>(null);
  const currentMessageRef = useRef<any>(null);
+  const inputListRef = useRef<any>(null);
  const paramsRef = useRef<any>(null);
  const messageListLengthCache = useRef<number>(0);
  const requestToken = useRef<any>(null);
@@ -128,7 +135,7 @@ const GroundReranker: React.FC<MessageProps> = 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<MessageProps> = 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<MessageProps> = forwardRef((props, ref) => {
  }, [textList.length, fileList.length]);

  return (
-    <div className="ground-left-wrapper">
+    <div className="ground-left-wrapper rerank">
      <div className="ground-left">
-        <div className="message-list-wrap" ref={scroller}>
-          <>
-            <div className="content">
-              <RerankMessage
-                dataList={messageList}
-                header={
-                  <div className="result-header">
-                    <span className="title">Results</span>
-                    <ReferenceParams
-                      usage={tokenResult}
-                      showOutput={false}
-                    ></ReferenceParams>
-                  </div>
-                }
-              />
-              {loading && (
-                <Spin size="small">
-                  <div style={{ height: '46px' }}></div>
-                </Spin>
-              )}
+        <div className="center">
+          <div className="documents">
+            <h3 className="m-b-20 m-l-10 flex-between flex-center font-size-14 line-24">
+              <span>Documents</span>
+            </h3>
+            <div className="flex-between m-b-8 p-l-8">
+              <div className="flex gap-10">
+                <UploadFile
+                  handleUpdateFileList={handleUpdateFileList}
+                  accept={acceptType}
+                >
+                  <Tooltip title={<span>Support: {acceptType}</span>}>
+                    <Button
+                      size="middle"
+                      icon={<UploadOutlined></UploadOutlined>}
+                    >
+                      Upload File
+                    </Button>
+                  </Tooltip>
+                </UploadFile>
+                <Button size="middle" onClick={handleAddText}>
+                  <PlusOutlined />
+                  Add Text
+                </Button>
+              </div>
+              <Button
+                type="text"
+                icon={<ClearOutlined />}
+                size="middle"
+                onClick={handleClearDocuments}
+              ></Button>
            </div>
-          </>
-        </div>
-        <div
-          style={{
-            height: 70,
-            paddingLeft: 1
-          }}
-        >
-          <UploadFile
-            handleUpdateFileList={handleUpdateFileList}
-            accept={acceptType}
+            <div className="docs-wrapper">
+              <InputList
+                ref={inputListRef}
+                textList={textList}
+                onChange={handleTextListChange}
+              ></InputList>
+              <div style={{ marginTop: 8 }}>
+                <FileList
+                  fileList={fileList}
+                  textListCount={textList.length || 0}
+                  onDelete={handleDeleteFile}
+                ></FileList>
+              </div>
+            </div>
+          </div>
+          <Divider
+            type="vertical"
+            style={{ margin: 0, height: '100%' }}
+          ></Divider>
+          <div
+            className="message-list-wrap"
+            ref={scroller}
+            style={{ paddingInline: 16 }}
          >
-            <div style={{ backgroundColor: 'var(--color-fill-sider)' }}>
-              <InboxOutlined className="font-size-16" />
-              <span className="m-l-10">
-                Click or drag file to this area to upload
-              </span>
-            </div>
-            <span className="text-tertiary">support {acceptType}</span>
-          </UploadFile>
+            <>
+              <div className="content">
+                <RerankMessage
+                  dataList={messageList}
+                  header={
+                    <div className="result-header">
+                      <span className="title">Results</span>
+                      <ReferenceParams
+                        usage={tokenResult}
+                        showOutput={false}
+                      ></ReferenceParams>
+                    </div>
+                  }
+                />
+                {loading && (
+                  <Spin size="small">
+                    <div style={{ height: '46px' }}></div>
+                  </Spin>
+                )}
+              </div>
+            </>
+          </div>
        </div>
+
        <div className="ground-left-footer">
          <MessageInput
            scope="reranker"
+            submitIcon={<SearchOutlined className="font-size-16" />}
            loading={loading}
            disabled={!parameters.model}
            isEmpty={true}
@@ -277,6 +326,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
            placeholer={intl.formatMessage({
              id: 'playground.input.keyword.holder'
            })}
+            tools={<span className="p-l-8">Query</span>}
          />
        </div>
      </div>
@@ -284,50 +334,15 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
        className={classNames('params-wrapper', {
          collapsed: collapse
        })}
-        style={{
-          overflow: 'hidden',
-          paddingBottom: 16
-        }}
+        ref={paramsRef}
      >
-        <div className="box" style={{ paddingInline: 0, height: '100%' }}>
-          <div style={{ padding: collapse ? 0 : '0 16px' }}>
-            <RerankerParams
-              setParams={setParams}
-              params={parameters}
-              selectedModel={selectModel}
-              modelList={modelList}
-            />
-            <h3 className="m-b-20 m-l-10 flex-between flex-center font-size-14">
-              <span>Documents</span>
-              <Button
-                type="text"
-                icon={<ClearOutlined />}
-                size="middle"
-                onClick={handleClearDocuments}
-              ></Button>
-            </h3>
-          </div>
-          <div
-            className="docs-wrapper"
-            ref={paramsRef}
-            style={{
-              height: 'calc(100% - 210px)',
-              padding: '0 16px',
-              overflowY: 'auto'
-            }}
-          >
-            <InputList
-              textList={textList}
-              onChange={handleTextListChange}
-            ></InputList>
-            <div style={{ marginTop: 8 }}>
-              <FileList
-                fileList={fileList}
-                textListCount={textList.length || 0}
-                onDelete={handleDeleteFile}
-              ></FileList>
-            </div>
-          </div>
+        <div className="box" style={{ padding: collapse ? 0 : '0 16px' }}>
+          <RerankerParams
+            setParams={setParams}
+            params={parameters}
+            selectedModel={selectModel}
+            modelList={modelList}
+          />
        </div>
      </div>

@@ -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<InputListProps> = ({ textList, onChange }) => {
-  const intl = useIntl();
-  const messageId = useRef(0);
+const InputList: React.FC<InputListProps> = 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 (
-    <div className="input-list">
-      {textList.length === 0 && (
+    useImperativeHandle(ref, () => ({
+      handleAdd,
+      handleDelete,
+      handleTextChange
+    }));
+
+    return (
+      <div className="input-list">
+        {/* {textList.length === 0 && (
        <Button
          block
          onClick={handleAdd}
@@ -64,47 +68,49 @@ const InputList: React.FC<InputListProps> = ({ textList, onChange }) => {
          <PlusOutlined />
          Add Text
        </Button>
-      )}
-      {textList.map((text, index) => {
-        return (
-          <div key={text.uid} className="input-item">
-            <div className="input-wrap">
-              <RowTextarea
-                label={`${index + 1}.`}
-                value={text.text}
-                placeholder="Input your text"
-                onChange={(e) => handleTextChange(e.target.value, text)}
-              ></RowTextarea>
-            </div>
-            <span className="btn-group">
-              <Tooltip
-                title={intl.formatMessage({ id: 'common.button.delete' })}
-              >
-                <Button
-                  size="small"
-                  type="text"
-                  icon={<MinusCircleOutlined />}
-                  onClick={() => handleDelete(text)}
-                ></Button>
-              </Tooltip>
-              {index === textList.length - 1 && (
+      )} */}
+        {textList.map((text, index) => {
+          return (
+            <div key={text.uid} className="input-item">
+              <div className="input-wrap">
+                <RowTextarea
+                  label={`${index + 1}.`}
+                  value={text.text}
+                  placeholder="Input your text"
+                  onChange={(e) => handleTextChange(e.target.value, text)}
+                ></RowTextarea>
+              </div>
+              <span className="btn-group">
                <Tooltip
-                  title={intl.formatMessage({ id: 'common.button.add' })}
+                  title={intl.formatMessage({ id: 'common.button.delete' })}
                >
                  <Button
+                    danger
                    size="small"
                    type="text"
-                    icon={<PlusCircleOutlined />}
-                    onClick={handleAdd}
+                    icon={<DeleteOutlined></DeleteOutlined>}
+                    onClick={() => handleDelete(text)}
                  ></Button>
                </Tooltip>
-              )}
-            </span>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
+                {/* {index === textList.length - 1 && (
+                  <Tooltip
+                    title={intl.formatMessage({ id: 'common.button.add' })}
+                  >
+                    <Button
+                      size="small"
+                      type="text"
+                      icon={<PlusCircleOutlined />}
+                      onClick={handleAdd}
+                    ></Button>
+                  </Tooltip>
+                )} */}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);

 export default React.memo(InputList);
@@ -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<MessageInputProps> = ({
  disabled,
  isEmpty,
  scope,
+  submitIcon,
  placeholer,
+  tools,
+
  shouldResetMessage = true
 }) => {
  const { TextArea } = Input;
@@ -345,6 +350,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
    <div className="messageInput">
      <div className="tool-bar">
        <div className="actions">
+          {tools}
          {scope !== 'reranker' && (
            <>
              <Button
@@ -441,7 +447,9 @@ const MessageInput: React.FC<MessageInputProps> = ({
                size="middle"
                disabled={isDisabled}
              >
-                <SendOutlined rotate={0} className="font-size-14" />
+                {submitIcon ?? (
+                  <SendOutlined rotate={0} className="font-size-14" />
+                )}
              </Button>
            </Tooltip>
          ) : (
@@ -163,7 +163,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
      <div>
        {showModelSelector && (
          <>
-            <h3 className="m-b-20 m-l-10 font-size-14">
+            <h3 className="m-b-20 m-l-10 font-size-14 line-24">
              {intl.formatMessage({ id: 'playground.model' })}
            </h3>
            <Form.Item<ParamsSettingsFormProps>
@@ -184,7 +184,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
            </Form.Item>
          </>
        )}
-        <h3 className="m-b-20 m-l-10 flex-between flex-center font-size-14">
+        <h3 className="m-b-20 m-l-10 flex-between flex-center font-size-14 line-24">
          <span>{intl.formatMessage({ id: 'playground.parameters' })}</span>
        </h3>
        <Form.Item<ParamsSettingsFormProps>
@@ -148,6 +148,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
      <div>
        {
          <>
+            <h3 className="m-b-20 m-l-10 font-size-14 line-24">Parameters</h3>
            <Form.Item<ParamsSettingsFormProps>
              name="model"
              rules={[
@@ -116,7 +116,7 @@ const UploadImg: React.FC<UploadImgProps> = ({

  return (
    <>
-      <Upload.Dragger
+      <Upload
        ref={uploadRef}
        multiple
        action="/"
@@ -132,7 +132,7 @@ const UploadImg: React.FC<UploadImgProps> = ({
            <Button size={size} icon={<PaperClipOutlined />} />
          </Tooltip>
        )}
-      </Upload.Dragger>
+      </Upload>
    </>
  );
 };
@@ -3,11 +3,12 @@ import { useIntl } from '@umijs/max';
 import { Button, Tooltip, Upload } from 'antd';
 import type { UploadFile } from 'antd/es/upload';
 import { RcFile } from 'antd/es/upload';
-import { debounce } from 'lodash';
+import { debounce, round } from 'lodash';
 import React, { useCallback, useRef } from 'react';

 interface UploadImgProps {
  size?: 'small' | 'middle' | 'large';
+  height?: number;
  handleUpdateImgList: (
    imgList: { dataUrl: string; uid: number | string }[]
  ) => void;
@@ -15,6 +16,7 @@ interface UploadImgProps {

 const UploadImg: React.FC<UploadImgProps> = ({
  handleUpdateImgList,
+  height = 100,
  size = 'small'
 }) => {
  const intl = useIntl();
@@ -36,6 +38,21 @@ const UploadImg: React.FC<UploadImgProps> = ({
    [handleUpdateImgList, intl]
  );

+  const getImgDimensions = useCallback(
+    (file: any): Promise<{ ratio: number }> => {
+      return new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => {
+          resolve({ ratio: round(img.width / img.height, 2) });
+        };
+        img.onerror = () => {
+          resolve({ ratio: 1 });
+        };
+        img.src = URL.createObjectURL(file);
+      });
+    },
+    []
+  );
  const handleChange = useCallback(
    async (info: any) => {
      const { fileList } = info;
@@ -190,7 +190,9 @@ const Playground: React.FC = () => {
      header={{
        title: (
          <div className="flex items-center">
-            {intl.formatMessage({ id: 'menu.playground.chat' })}
+            <span className="font-600">
+              {intl.formatMessage({ id: 'menu.playground.chat' })}
+            </span>
            {
              <Segmented
                options={optionsList}
@@ -98,11 +98,7 @@ const PlaygroundRerank: React.FC = () => {
    <PageContainer
      ghost
      header={{
-        title: (
-          <div className="flex items-center">
-            {intl.formatMessage({ id: 'menu.playground.rerank' })}
-          </div>
-        ),
+        title: intl.formatMessage({ id: 'menu.playground.rerank' }),
        breadcrumb: {}
      }}
      extra={renderExtra()}
@@ -8,10 +8,15 @@
    align-items: center;
    justify-content: space-between;
    padding: 0;
+    padding-right: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid var(--ant-color-split);

+    .btn-group {
+      display: none;
+    }
+
    &:hover {
      background-color: var(--ant-color-fill-tertiary);

@@ -28,12 +33,5 @@
    .input-wrap {
      flex: 1;
    }
-
-    .btn-group {
-      width: 60px;
-      margin-left: 8px;
-      display: flex;
-      gap: 8px;
-    }
  }
 }
@@ -0,0 +1,16 @@
+.ground-left-wrapper.rerank {
+  .center {
+    display: flex;
+    height: 100%;
+
+    .documents {
+      width: 390px;
+      padding: 16px;
+      padding-left: 32px;
+    }
+
+    .message-list-wrap {
+      flex: 1;
+    }
+  }
+}
@@ -7,7 +7,8 @@ export default function readHtmlContent(file: File): Promise<string> {
      const parser = new DOMParser();
      const doc = parser.parseFromString(fileContent, 'text/html');
      const textContent = doc.body.textContent || '';
-      resolve(textContent);
+      const cleanedTextContent = textContent.replace(/[\t\n]/g, '').trim();
+      resolve(cleanedTextContent);
    };
    reader.onerror = (error) => reject(error);
    reader.readAsText(file);