From a14c14ee4cbdd3b2d1107bca1a08faa1b5a5e2b0 Mon Sep 17 00:00:00 2001 From: billchen Date: Fri, 1 Mar 2024 16:37:11 +0800 Subject: [PATCH] feat: hightlight pdf --- .../components/document-preview/hooks.ts | 25 +++++++++++++++++++ .../components/document-preview/index.tsx | 20 ++++++++++++--- .../components/knowledge-chunk/hooks.ts | 14 ++++++++++- .../components/knowledge-chunk/index.tsx | 4 ++- .../components/knowledge-chunk/model.ts | 4 +-- 5 files changed, 60 insertions(+), 7 deletions(-) diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hooks.ts b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hooks.ts index f15990587..41eeb452a 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hooks.ts +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/hooks.ts @@ -1,4 +1,5 @@ import { useSize } from 'ahooks'; +import { CustomTextRenderer } from 'node_modules/react-pdf/dist/esm/shared/types'; import { useCallback, useEffect, useState } from 'react'; export const useDocumentResizeObserver = () => { @@ -18,3 +19,27 @@ export const useDocumentResizeObserver = () => { return { containerWidth, setContainerRef }; }; + +function highlightPattern(text: string, pattern: string, pageNumber: number) { + const finalText = ''; + console.info(text); + if (pageNumber === 2) { + return `${text}`; + } + if (text.trim() !== '' && pattern.match(text)) { + // return pattern.replace(text, (value) => `${value}`); + return `${text}`; + } + return text.replace(pattern, (value) => `${value}`); +} + +export const useHighlightText = (searchText: string = '') => { + const textRenderer: CustomTextRenderer = useCallback( + (textItem) => { + return highlightPattern(textItem.str, searchText, textItem.pageNumber); + }, + [searchText], + ); + + return textRenderer; +}; diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.tsx index 57d3a4ac4..2df5d8896 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/index.tsx @@ -5,8 +5,10 @@ import { Document, Page, pdfjs } from 'react-pdf'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; import 'react-pdf/dist/esm/Page/TextLayer.css'; -import { useDocumentResizeObserver } from './hooks'; +import { useDocumentResizeObserver, useHighlightText } from './hooks'; +import { Spin } from 'antd'; +import { useGetSelectedChunk } from '../../hooks'; import styles from './index.less'; pdfjs.GlobalWorkerOptions.workerSrc = new URL( @@ -14,10 +16,17 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL( import.meta.url, ).toString(); -const DocumentPreview = () => { +interface IProps { + selectedChunkId: string; +} + +const DocumentPreview = ({ selectedChunkId }: IProps) => { const [numPages, setNumPages] = useState(); const { documentId } = useGetKnowledgeSearchParams(); const { containerWidth, setContainerRef } = useDocumentResizeObserver(); + const selectedChunk = useGetSelectedChunk(selectedChunkId); + console.info(selectedChunk?.content_with_weight); + const textRenderer = useHighlightText(selectedChunk?.content_with_weight); function onDocumentLoadSuccess({ numPages }: { numPages: number }): void { setNumPages(numPages); @@ -29,12 +38,17 @@ const DocumentPreview = () => { return (
- + } + > {Array.from(new Array(numPages), (el, index) => ( ))} diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts b/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts index e84d47650..134f8db21 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts @@ -1,4 +1,4 @@ -import { IKnowledgeFile } from '@/interfaces/database/knowledge'; +import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge'; import { useCallback, useState } from 'react'; import { useSelector } from 'umi'; @@ -9,6 +9,13 @@ export const useSelectDocumentInfo = () => { return documentInfo; }; +export const useSelectChunkList = () => { + const chunkList: IChunk[] = useSelector( + (state: any) => state.chunkModel.data, + ); + return chunkList; +}; + export const useHandleChunkCardClick = () => { const [selectedChunkId, setSelectedChunkId] = useState(''); @@ -18,3 +25,8 @@ export const useHandleChunkCardClick = () => { return { handleChunkCardClick, selectedChunkId }; }; + +export const useGetSelectedChunk = (selectedChunkId: string) => { + const chunkList: IChunk[] = useSelectChunkList(); + return chunkList.find((x) => x.chunk_id === selectedChunkId); +}; diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx index f69f42f9b..907b7b64e 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx @@ -205,7 +205,9 @@ const Chunk = () => { {documentInfo.type === 'pdf' && (
- +
)} diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/model.ts b/web/src/pages/add-knowledge/components/knowledge-chunk/model.ts index 793a53ea5..5d9089a98 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/model.ts +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/model.ts @@ -1,5 +1,5 @@ import { BaseState } from '@/interfaces/common'; -import { IKnowledgeFile } from '@/interfaces/database/knowledge'; +import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge'; import kbService from '@/services/kbService'; import { message } from 'antd'; import { pick } from 'lodash'; @@ -7,7 +7,7 @@ import { pick } from 'lodash'; import { DvaModel } from 'umi'; export interface ChunkModelState extends BaseState { - data: any[]; + data: IChunk[]; total: number; isShowCreateModal: boolean; chunk_id: string;