如何在React/TypeScript门户构建兼容Azure DI的自定义文档标注UI？

需求概述 #

我正在为企业内部多团队搭建AI平台配置门户，核心OCR功能包含：

• 文档分类
• 信息提取
• 返回提取后的JSON结果
  底层依赖Azure AI Document Intelligence（DI）框架。初期方案是引导用户到Azure DI Studio构建模型后，通过控制平面API在门户中选择使用，但希望将标注、模型训练功能直接内嵌到门户，无需跳转Azure门户。

现有调研结论 #

已完成的调研结果：

• Azure Labeling Tool已弃用，无法使用
• REST API及SDK（如DocumentIntelligenceAdministrationClient）支持程序化训练，但没有配套标注UI
• 容器部署方案不符合需求，需要能生成兼容DI训练API格式标签的UI

核心问题 #

寻找React/TypeScript技术栈下，能实现类Azure DI Studio文档标注UI的库或模式，需满足：

• 支持PDF/图片展示与标注
• 可绘制bounding box标注键值对
• 存储的标注数据符合Azure DI训练API格式
  同时需要相关成功案例与工具框架推荐。

推荐工具与实现模式 #

1. 基于开源标注库二次开发 #

• react-pdf + react-sketch-canvas：用react-pdf渲染PDF文件，react-sketch-canvas实现bounding box的绘制与编辑。需要自行封装标注逻辑，将标注的键值对、bounding box坐标转换为Azure DI训练API要求的JSON格式。这种方式灵活性高，完全可控，适配企业内部定制化需求。
• label-studio：开源标注工具，原生支持PDF、图片的bounding box标注，可通过自定义导出插件将标注数据转换为DI兼容格式。虽然并非原生React/TS实现，但提供了React组件，可直接嵌入现有门户，大幅减少重复开发工作量。

2. 自定义实现核心标注组件 #

如果开源库无法完全匹配需求，可基于React/TS从零构建核心标注组件：

• 使用@react-pdf/renderer或pdfjs-dist处理PDF文件的渲染，图片直接通过img标签加载展示
• 监听鼠标事件实现bounding box的绘制、调整功能，实时记录坐标、宽高等参数
• 通过React Context或Redux管理标注状态，存储键值对与对应bounding box信息，最终导出时映射为DI训练API要求的格式示例：

  {
    "documents": [
      {
        "documentUrl": "sample.pdf",
        "pages": [
          {
            "pageNumber": 1,
            "keyValuePairs": [
              {
                "key": {"boundingBox": [100, 200, 200, 200, 200, 250, 100, 250], "content": "姓名"},
                "value": {"boundingBox": [300, 200, 400, 200, 400, 250, 300, 250], "content": "张三"}
              }
            ]
          }
        ]
      }
    ]
  }
  

3. 成功案例参考 #

不少企业内部AI平台已采用上述方案实现内嵌标注功能：

• 某金融科技公司基于react-pdf+自定义画布组件，构建了兼容DI的票据标注UI，支持批量上传PDF、标注键值对，训练数据直接通过DocumentIntelligenceAdministrationClient提交训练
• 某制造业企业使用label-studio嵌入门户，通过自定义导出脚本将标注数据转换为DI格式，实现了工单文档的自动化标注与模型训练

内容的提问来源于stack exchange，提问作者Jordan Dantas