TextIn OCR Frontend前端开源组件库发布！
为什么开源 TextIn OCR Frontend 前端组件库？
在 TextIn 社群中，我们时常接到用户反馈，调取 API 进行票据等文件批量识别后，需要另行完成前端工程，实现比对环节。为助力用户节省工程成本，TextIn 团队正式开源 OCR Frontend 前端组件库，便于用户搭建前端界面，完成识别结果审核，提升使用体验。
此外，对于有翻译、校对等需求的开发者，也可灵活应用开源组件库，进行二次开发。
TextIn OCR Frontend 是一个用于展示 Textin 识别结果的 React 组件库，支持文件预览、坐标回显和结果展示。
组件库适配票据类解析结果（key-value）的展示，前端界面案例见下图。
特性
-
📄 支持图片和 PDF 文件预览
-
🎯 支持文本区域坐标回显和高亮
-
🔄 预览区域和识别结果双向联动
-
📊 支持 JSON 格式结果展示
-
🎨 TODO：可自定义样式和主题
安装与使用
拉取项目
git clone https://github.com/intsig-textin/textin-ocr-frontend.git
npm install textin-ocr-frontend
# 或
yarn add textin-ocr-frontend
快速开始
import { FilePreview, ResultView, JsonView } from "textin-ocr-frontend";functionApp() {
return (<div style={{ display: "flex" }}><div style={{ flex: 1 }}><FilePreview src="path/to/image.jpg" rects={rects} pages={pages} /></div><div style={{ flex: 1 }}><ResultView resultList={resultList} /></div></div>);
}
组件说明
1. FilePreview 文件预览组件
文件预览组件，支持 PDF 和图片预览，支持缩放、旋转、分页等功能。
Props
2. ResultView 结果展示组件
结果展示组件，支持表格和列表两种展示方式。
Props
3. MarkLayer 标注层组件
标注层组件，用于在图片显示标注框。
Props
4. JsonView JSON 展示组件
JSON 数据展示组件，用于格式化展示 JSON 数据。 本项目 JSON 数据采用react-json-view库渲染，API 保持一致，详细属性可参考其官方文档。
Props
API Interface 定义
PDFSrc
PDF 文件源配置
interface DocumentInitParameters {[key: string]: any;url?: string | URL;data?: TypedArray | ArrayBuffer | Array<number> | string;httpHeaders?: Object;withCredentials?: boolean;password?: string;length?: boolean;
}type PDFSrc = DocumentInitParameters;
IRectItem
标注框数据
interface IRectItem {[key: string]: any;key?: string;type?: string;rect_type?: string;uid: string;parent_uid?: string;content_id: string;parent_id?: string;position: number[];angle?: number;render_text?: string;
}
IPageItem
页面数据
interface IPageItem {page_number: number;duration: number;ppi: number;width: number;height: number;angle?: number;
}
IResultListItem
结果列表项
interface IResultListItem extends IRectItem {type: string;description: string;no: number;list: IFieldItem[];flightList: IFieldItem[][];page_id?: number;
}
IFieldItem
字段项
interface IFieldItem extends IOriginFieldItem {uid: string;parent_uid?: string;
}interface IOriginFieldItem {key: string;type?: string;value: string;description: string;position: number[];
}
ToolbarOptions
工具栏配置
interface ToolbarOptions {tools: PreviewToolItem[];
}interface PreviewToolItem {Icon: React.ComponentType<any>;onClick: () => void;type: string;disabled?: boolean;
}
PreviewToolItem
工具栏配置项
interface PreviewToolItem {Icon: React.ComponentType<any>; // 工具栏图标组件onClick: () => void; // 点击事件处理函数type: string; // 工具类型disabled?: boolean; // 是否禁用
}
Hooks
useContentLinkage
用于实现预览区域和识别结果的双向联动。
const { activeContentId, activeParentContentId, registerLinkage } =useContentLinkage({viewContainerRef,resultContainerRef,});
参数
返回值
usePDFMarkLayer
用于在 PDF 文档上实现标注层功能。
const { run } = usePDFMarkLayer({containerRef,pdfViewerRef,rects,pages,dpi,activeContentId,showMark,
});
参数
返回值
usePreviewTool
用于实现预览工具栏功能，包括缩放、旋转和 1:1 还原。
const { tools, scale, rotate, position, onMouseDown, onWheel, resizeScale } =usePreviewTool({viewContainerRef,viewRef,toolbarOptions,});
参数
返回值
示例
图片示例
import { useLayoutEffect, useRef, useState } from "react";
import FilePreview from "../components/FilePreview";
import { RadioGroup } from "../components/RadioGroup";
import ResultView from "../components/ResultView";
import { imageExample } from "./data";
import JsonView from "../components/JsonView";
import { useContentLinkage } from "../hooks/useContentLinkage";export default functionImageExample() {const [resultTab, setResultTab] = useState("text");const viewContainerRef = useRef<HTMLElement | null>(null);const resultContainerRef = useRef<HTMLElement | null>(null);const { activeParentContentId, activeContentId, registerLinkage } =useContentLinkage({viewContainerRef,resultContainerRef,});useLayoutEffect(() => {registerLinkage();}, []);return (<divstyle={{display: "flex",width: "100%",height: "calc(100% - 80px)",padding: 16,textAlign: "center",columnGap: 32,}}><div style={{ flex: 4, minWidth: "40%", maxWidth: "60%" }}><div style={{ margin: 16 }}>预览</div><divstyle={{position: "relative",overflow: "hidden",maxWidth: "100%",maxHeight: "calc(100% - 80px)",height: "calc(100% - 80px)",}}><FilePreviewsrc={imageExample.src}rects={imageExample.rects}pages={imageExample.pages}getContainerRef={viewContainerRef}activeContentId={activeContentId}/></div></div><div style={{ flex: 6, minWidth: "40%", maxWidth: "60%" }}><RadioGroupstyle={{ margin: 16 }}optionStyle={{ flex: 1 }}type="line"options={[{ label: "识别结果", value: "text" },{ label: "JSON结果", value: "json" },]}value={resultTab}onChange={setResultTab}/>{resultTab === "text" && (<ResultViewstyle={{position: "relative",overflow: "auto",maxWidth: "100%",maxHeight: "calc(100% - 80px)",height: "calc(100% - 80px)",}}// resultList={example2.result}resultList={imageExample.result}getContainerRef={resultContainerRef}activeContentId={activeContentId}activeParentContentId={activeParentContentId}/>)}{resultTab === "json" && (<JsonViewstyle={{padding: "0 16px",height: "calc(100% - 80px)",overflow: "auto",}}src={imageExample.json}/>)}</div></div>);
}
PDF 示例
import { useLayoutEffect, useRef, useState } from "react";
import FilePreview from "../components/FilePreview";
import { RadioGroup } from "../components/RadioGroup";
import ResultView from "../components/ResultView";
import { pdfExample } from "./data";
import JsonView from "../components/JsonView";
import { useContentLinkage } from "../hooks/useContentLinkage";export default functionPDFExample() {const [resultTab, setResultTab] = useState("text");const viewContainerRef = useRef<HTMLElement | null>(null);const resultContainerRef = useRef<HTMLElement | null>(null);const { activeParentContentId, activeContentId, registerLinkage } =useContentLinkage({viewContainerRef,resultContainerRef,});useLayoutEffect(() => {registerLinkage();}, []);return (<divstyle={{display: "flex",width: "100%",height: "calc(100vh - 100px)",padding: 16,textAlign: "center",columnGap: 32,}}><div style={{ flex: 4, minWidth: "40%", maxWidth: "60%" }}><div style={{ margin: 16 }}>预览</div><divstyle={{position: "relative",overflow: "hidden",maxWidth: "100%",maxHeight: "calc(100% - 80px)",height: "calc(100% - 80px)",}}><FilePreviewsrc={{url: pdfExample.src,}}rects={pdfExample.rects}pages={pdfExample.pages}getContainerRef={viewContainerRef}activeContentId={activeContentId}/></div></div><div style={{ flex: 6, minWidth: "40%", maxWidth: "60%" }}><RadioGroupstyle={{ margin: 16 }}optionStyle={{ flex: 1 }}type="line"options={[{ label: "识别结果", value: "text" },{ label: "JSON结果", value: "json" },]}value={resultTab}onChange={setResultTab}/>{resultTab === "text" && (<ResultViewstyle={{position: "relative",overflow: "auto",maxWidth: "100%",maxHeight: "calc(100% - 80px)",height: "calc(100% - 80px)",}}resultList={pdfExample.result}getContainerRef={resultContainerRef}activeContentId={activeContentId}activeParentContentId={activeParentContentId}/>)}{resultTab === "json" && (<JsonViewstyle={{padding: "0 16px",height: "calc(100% - 80px)",overflow: "auto",}}src={pdfExample.json}/>)}</div></div>);
}
二次开发
项目基于 vite 和 react 构建，您可将该项目 fork 到本地自主扩展：
拉取项目
git clone https://github.com/intsig-textin/textin-ocr-frontend.git
安装依赖
npm install
启动项目
npm run dev
浏览器访问 http://localhost:5173/
在线预览前端界面：https://cc.co/16YSTY
以上为 TextIn OCR Frontend 开源组件库当前版本介绍。根据规划，组件库将持续迭代，实现：
-
组件支持更多自定义配置、样式覆盖等特性
-
支持可编辑、复制、导出结果
-
支持更多复杂类型识别结果展示
在线体验
https://cc.co/16YSTY