ocr_platform/table_line_generator

Table Line Generator

基于 Vue 3 + TypeScript + Konva.js 的表格线条编辑工具。

功能特性

• 📤 上传 OCR JSON + 图片文件进行分析
• 🖱️ 鼠标拖拽调整线条位置
• ⌨️ 键盘快捷键支持 (Ctrl+Z 撤销, Delete 删除等)
• ➕ 添加/删除横线和竖线
• 📐 精确坐标输入调整
• 💾 保存结构 JSON 和绘制后的图片
• 🔄 批量处理多页文档

技术栈

前端

• Vue 3 + TypeScript
• vue-konva (Canvas 绘制)
• Element Plus (UI 组件)
• Pinia (状态管理)
• Vite (构建工具)

后端

• FastAPI
• Python 3.8+
• Pillow (图像处理)
• NumPy (数值计算)

快速开始

1. 安装后端依赖

cd ocr_platform/table_line_generator
pip install -e ./core
pip install -r backend/requirements.txt

2. 启动后端服务

cd ocr_platform/table_line_generator/backend
uvicorn main:app --reload --port 8000

后端服务将在 http://localhost:8000 启动。

3. 安装前端依赖

cd ocr_platform/table_line_generator/frontend
npm install

4. 启动前端开发服务器

cd ocr_platform/table_line_generator/frontend
npm run dev

前端服务将在 http://localhost:5173 启动。

使用说明

上传文件

1. 打开浏览器访问 http://localhost:5173
2. 将 OCR JSON 文件和对应图片拖拽到上传区域
3. 点击"开始分析"按钮

编辑线条

• 拖拽移动: 直接拖拽线条调整位置
• 选中线条: 点击线条进行选中（选中后变为红色）
• 删除线条: 选中后按 Delete 键，或点击工具栏删除按钮
• 添加线条: 点击工具栏"添加横线/竖线"按钮
• 精确调整: 在右侧面板输入精确坐标值

键盘快捷键

快捷键	功能
Ctrl+Z	撤销
Ctrl+Y / Ctrl+Shift+Z	重做
Delete / Backspace	删除选中线条
↑↓	微调横线 ±1px
←→	微调竖线 ±1px
Shift+方向键	微调 ±10px

保存结果

1. 在右侧面板设置输出目录和文件名
2. 点击"保存结果"按钮
3. 将生成结构 JSON 和绘制线条的图片

项目结构

table_line_generator/
├── core/                   # Python 核心模块
│   ├── ocr_parser.py       # OCR 数据解析
│   ├── table_analyzer.py   # 表格结构分析
│   └── drawing_service.py  # 绘图服务
├── backend/                # FastAPI 后端
│   ├── main.py             # 应用入口
│   ├── api/                # API 路由
│   ├── services/           # 业务逻辑
│   ├── models/             # 数据模型
│   └── config/             # 配置文件
└── frontend/               # Vue 3 前端
    ├── src/
    │   ├── components/     # Vue 组件
    │   ├── composables/    # 组合式函数
    │   ├── stores/         # Pinia 状态管理
    │   ├── api/            # API 客户端
    │   └── types/          # TypeScript 类型
    └── package.json

坐标系统说明

• 原图坐标: 所有结构数据使用原图像素坐标
• 显示坐标: 前端显示时乘以 scaleFactor
• 保存时: 直接使用原图坐标，无需转换

对于超过 4096×4096 的大图，系统会自动计算 scaleFactor 进行缩放显示。

依赖关系

本模块依赖 ocr_platform/ocr_utils 中的公共工具函数。如果需要使用图片处理相关的工具函数，可以从 ocr_utils.image_utils 导入。

API 文档

启动后端后，访问 http://localhost:8000/docs 查看 Swagger API 文档。

License

MIT