feat: transform the parser's data structure and add Image to TestingResult (#63)

* feat: add Image to TestingResult

* feat: transform the parser's data structure

web/src/components/image.tsx

@@ -0,0 +1,19 @@
+import { api_host } from '@/utils/api';
+
+interface IImage {
+  id: string;
+  className: string;
+}
+
+const Image = ({ id, className, ...props }: IImage) => {
+  return (
+    <img
+      {...props}
+      src={`${api_host}/document/image/${id}`}
+      alt=""
+      className={className}
+    />
+  );
+};
+
+export default Image;

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx

@@ -1,7 +1,7 @@
+import Image from '@/components/image';
 import { IChunk } from '@/interfaces/database/knowledge';
 import { api_host } from '@/utils/api';
 import { Card, Checkbox, CheckboxProps, Flex, Popover, Switch } from 'antd';
-
 import { useState } from 'react';
 import styles from './index.less';
 
@@ -13,22 +13,6 @@ interface IProps {
   handleCheckboxClick: (chunkId: string, checked: boolean) => void;
 }
 
-interface IImage {
-  id: string;
-  className: string;
-}
-// Pass onMouseEnter and onMouseLeave to img tag using props
-const Image = ({ id, className, ...props }: IImage) => {
-  return (
-    <img
-      {...props}
-      src={`${api_host}/document/image/${id}`}
-      alt=""
-      className={className}
-    />
-  );
-};
-
 const ChunkCard = ({
   item,
   checked,

web/src/pages/add-knowledge/components/knowledge-dataset/knowledge-upload-file/index.tsx

@@ -28,7 +28,7 @@ import {
   UploadProps,
 } from 'antd';
 import classNames from 'classnames';
-import { ReactElement, useEffect, useRef, useState } from 'react';
+import { ReactElement, useEffect, useMemo, useRef, useState } from 'react';
 import { Nullable } from 'typings';
 import { Link, useDispatch, useNavigate, useSelector } from 'umi';
 
@@ -63,6 +63,24 @@ const UploaderItem = ({
 
   const documentId = file?.response?.id;
 
+  const parserList = useMemo(() => {
+    return parserArray.map((x) => {
+      const arr = x.split(':');
+      return { value: arr[0], label: arr[1] };
+    });
+  }, [parserArray]);
+
+  const saveParser = (parserId: string) => {
+    dispatch({
+      type: 'kFModel/document_change_parser',
+      payload: {
+        parser_id: parserId,
+        doc_id: documentId,
+        parser_config: parserConfig,
+      },
+    });
+  };
+
   const onChange = (e: RadioChangeEvent) => {
     const val = e.target.value;
     setValue(val);
@@ -72,12 +90,12 @@ const UploaderItem = ({
   const content = (
     <Radio.Group onChange={onChange} value={value}>
       <Space direction="vertical">
-        {parserArray.map(
+        {parserList.map(
           (
             x, // value is lowercase, key is uppercase
           ) => (
-            <Radio value={x.toLowerCase()} key={x}>
+            <Radio value={x.value} key={x.value}>
-              {x}
+              {x.label}
             </Radio>
           ),
         )}
@@ -92,17 +110,6 @@ const UploaderItem = ({
     }
   };
 
-  const saveParser = (parserId: string) => {
-    dispatch({
-      type: 'kFModel/document_change_parser',
-      payload: {
-        parser_id: parserId,
-        doc_id: documentId,
-        parser_config: parserConfig,
-      },
-    });
-  };
-
   useEffect(() => {
     setValue(defaultParserId);
   }, [defaultParserId]);

web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less

@@ -33,4 +33,11 @@
     font-size: 12px;
     font-weight: 500;
   }
+  .image {
+    width: 100px;
+  }
+  .imagePreview {
+    display: block;
+    width: 260px;
+  }
 }

web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx

@@ -1,6 +1,15 @@
 import { ReactComponent as SelectedFilesCollapseIcon } from '@/assets/svg/selected-files-collapse.svg';
+import Image from '@/components/image';
 import { ITestingChunk } from '@/interfaces/database/knowledge';
-import { Card, Collapse, Flex, Pagination, PaginationProps, Space } from 'antd';
+import {
+  Card,
+  Collapse,
+  Flex,
+  Pagination,
+  PaginationProps,
+  Popover,
+  Space,
+} from 'antd';
 import { useDispatch, useSelector } from 'umi';
 import { TestingModelState } from '../model';
 import styles from './index.less';
@@ -92,7 +101,22 @@ const TestingResult = ({ handleTesting }: IProps) => {
       >
         {chunks.map((x) => (
           <Card key={x.chunk_id} title={<ChunkTitle item={x}></ChunkTitle>}>
+            <Flex gap={'middle'}>
+              {x.img_id && (
+                <Popover
+                  placement="topRight"
+                  content={
+                    <Image
+                      id={x.img_id}
+                      className={styles.imagePreview}
+                    ></Image>
+                  }
+                >
+                  <Image id={x.img_id} className={styles.image}></Image>
+                </Popover>
+              )}
               <div>{x.content_with_weight}</div>
+            </Flex>
           </Card>
         ))}
       </Flex>