AGI｜RAG文本溯源的PDF高亮显示，让知识一目了然！

最新推荐文章于 2024-08-14 11:46:52 发布

程序猿李巡天

最新推荐文章于 2024-08-14 11:46:52 发布

阅读量1k

点赞数 10

文章标签： agi pdf 人工智能 java 服务器 linux 开源

本文链接：https://blog.csdn.net/m0_59235945/article/details/140879444

版权

工具介绍

在web环境下嵌入页面渲染pdf并不是一个常见的需求，这方面的文档教程也是很匮乏的。

先介绍一下要用到的工具包：pdfjs 和 react-pdf;

● pdfjs：https://github.com/mozilla/pdf.js

● react-pdf：https://github.com/mozilla/pdf.js

实际上 react-pdf 是对pdfjs的进一步封装，但是我们的需求中需要高亮段落，所以仅仅使用 react-pdf不能满足需求，故须引入核心库pdfjs

PDFJS是一个用于显示PDF的模块，主要用于前端显示PDF,但是这个库使用起来还是比较复杂的，主要是由于缺乏API文档，很多时候主要是依靠看源码。

pdf的显示主要分为两种模式：一个是svg的格式、另一个是canvas格式;

如果仅显示纯文本的pdf，svg够用了，但是对于包含有图片的复杂pdf，使用canvas模式是一个更好的选择。

使用说明-业务示例

接下来我们结合业务需求来介绍一下他的使用。

**业务需求：**高亮PDF中指定的段落，并滚动的高亮位置

需求分析：

● 浏览器中PDF预览

● 搜索匹配PDF中的段落

● 高亮效果

● 滚动到高亮位置

难点分析：

● web环境下预览PDF

● 匹配PDF中的高亮段落

匹配算法（核心）
性能优化

● 高亮样式以及滚动到高亮的位置

● 对于大文件的加载、预览优化

基于此我们开始实现pdf高亮溯源的功能。

安装开发工具包

pnpm add pdfjs-dist react-pdf -S

引入react-pdf组件渲染pdf

<Document  
        file={file}  
         {...reastProps}  
        >  
  <Page pageNumber={pageNumber}></Page>  
</Document>

渲染pdf已经完成了，重要的是高亮pdf中的段落以及自动跳转到高亮位置。

高亮匹配算法

设：

PDF文档: D;

PDF中的每一页: P1、P2、…、P(n-1)、Pn;

搜索的段落: S;

S在D中有三种情况:

不匹配
单页匹配
跨页匹配

核心逻辑

如果S在P1中匹配，则返回匹配结果
如果P1不匹配，则累加P2到P1，尝试在P1、P2中匹配S
迭代D中的每一页

核心代码如下：

/**  
 * 按照页解析，pdfjs以TextItem[]的数据格式，将页面的数据暴露出来  
 * 高亮算法的思路是:  
 * 0、取出当前page的文本项，放入累加文本中；  
 * 1、判断累加的文本是否匹配，符合条件的TextItem 打标识  
 * 2、否则开始下一页（将下一页数据累加到文本中）  
 *  
 * resolveItemsChain：由每页的文本项节点组成的链表，头节点空  
 * pointer一个游荡的指针  
 */  
export default class DocumentTracker {  
    maxPage;  
    trackedPage: number = 0; // 已经解析的页码个数  
    resolveItemsChain: resolveItemNode; // 头节点  
    pointer: resolveItemNode | null = null;  
    resolveText = '';  
    highlightMap: HighlightMap = new Map();  
    highlightPageIndexSet: Set<number> = new Set();  
    readonly regex = /[^\u4e00-\u9fa5a-zA-Z0-9]/g;  
  
    constructor(maxPage = 3, regex?: RegExp) {  
        this.maxPage = maxPage;  
  
        this.resolveItemsChain = {  
            value: [],  
            next: null,  
            prev: null  
        }  
    }  
    // 这里使用双向链表来优化算法  
    async track(items: TextItem[], pageIndex: number, text: string) {  
        // 最多跨页: maxPage  
        if (this.trackedPage >= this.maxPage && this.resolveItemsChain.next) {  
            const len = this.resolveItemsChain.next.value.reduce((prev, cur) => {  
                return prev.concat(cur.str)  
            }, '').replace(this.regex, '').length;  
            this.resolveText = this.resolveText.slice(len)  
            this.resolveItemsChain.next.prev = null  
            this.resolveItemsChain.next = this.resolveItemsChain.next.next  
        }  
  
        const resolveItems: TextItem[] = [];  
  
        this.pointer = this.resolveItemsChain;  
        while (this.pointer.next != null) {  
            this.pointer = this.pointer.next  
        }  
  
        this.pointer.next = {value: resolveItems, next: null, prev: this.pointer} // 双向  
        this.pointer = this.pointer.next  
        this.trackedPage += 1;  
  
        const searchText = text.replace(this.regex, '');  
        for (let index = 0; index < items.length; index++) {  
            resolveItems.push(items[index])  
            this.resolveText += items[index].str.replace(this.regex, '');  
            if (this.resolveText.indexOf(searchText) != -1) {  
                // resolveItems has been searched Text  
                let str = '';  
  
                while (this.pointer.prev) {  
                    const resolveItems = this.pointer.value;  
                    for (let reverseIndex = resolveItems.length - 1; reverseIndex >= 0; reverseIndex--) {  
                        str = resolveItems[reverseIndex].str.replace(this.regex, '') + str;  
                        if(this.highlightMap.has(pageIndex)){  
                            this.highlightMap.get(pageIndex)?.push(reverseIndex)  
                        }else {  
                            this.highlightMap.set(pageIndex, [reverseIndex])  
                        }  
                        this.highlightPageIndexSet.add(pageIndex)  
                        if (str.indexOf(searchText) != -1) {  
                            return true  
                        }  
                    }  
  
                    this.pointer = this.pointer.prev  
                }  
            }  
        }  
  
        return false  
    }  
}

通过高亮算法我们已经拿到了段落的高亮信息：第几页第几项

结下来就是高亮并滚动

滚动到高亮位置

这里我们借用H5锚点来滚动到目标段落，涉及到“打锚点”以及“跳转到锚点”两个关键：

打锚点指的是匹配到目标段落后，标记段落

跳转到锚点就是跳转到高亮的位置，跳转时机很重要，需要在匹配完成，指定段落渲染之后才能跳转到对应的锚点，并且在计算量比较大的单线程环境中，滚动行为容易被打断（页面其他地方平凡的刷新）。需要优化处理滚动的时机。

上述有大量的对于pdf信息的计算存储，对于内存消耗以及cpu资源是十分消耗的，需要进行必要的优化：

优化

网络下载优化
渲染优化
高亮匹配优化
滚动优化

网络下载优化：浏览器缓存策略（对于太大的文件会失效）

● 渲染优化

单线成任务阻塞，web worker渲染PDF

pdfjs.GlobalWorkerOptions.workerSrc = new URL('worker.js', import.meta.url).toString();

只渲染高亮所在的页的文本层，可以提升80%的性能

const renderPDF = (hitInfo) => {  
  return (page) => {  
    return hitInfo.has(page)? <Page page={page}></Page> : false;  
  }  
};

● 高亮匹配优化

缓存命中优化：针对每次高亮的信息做缓存

const hitInfo = hit ? cached[hashKey] : calculateHitInfo(hashKey)；

快速失败：当高亮信息匹配失败时，抛出异常信息，优先渲染pdf

const getHighlightInfo = () => {  
  if(failure){  
    throw Error('some message!')  
  }  
};  
  
try {  
  const hitInfo = getHighlightInfo();  
  renderPDF(hitInfo);  
} catch {  
  renderPDF(null);  
}

● 滚动优化

页面中如果有大量的计算和渲染任务，那么程序的滚动指令可能会被打断，对此可以使用web api 来判断每一帧执行完成后是否有足够的时间去完成滚动

// 等待其他密集型任务先行执行，寻找每一帧的闲置时间，并且在超时5s放入循环队列，交给事件循环处理此任务  
requestIdleCallback((idle) => {  
  console.log("idle", idle.timeRemaining());  
  // 滚动指令  
}, { timeout: 5000 });

总结

web环境中页面内嵌渲染PDF是一种常见的需求，但是高亮搜索文档中的段落（不是关键字，段落来自大模型）有难度。

如何学习大模型 AI ？

由于新岗位的生产效率，要优于被取代岗位的生产效率，所以实际上整个社会的生产效率是提升的。

但是具体到个人，只能说是：

“最先掌握AI的人，将会比较晚掌握AI的人有竞争优势”。

这句话，放在计算机、互联网、移动互联网的开局时期，都是一样的道理。

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

在这里插入图片描述