再添神器!Paddle.js 发布 OCR SDK
The following article is from 百度App技术 Author 常莹 张静媛
关键词:OCR、Paddle.js、PaddleOCR
GEEK TALK
01
前言
GEEK TALK
02
PaddleOCR
在模型效果上,相对于 PP-OCR mobile 版本提升超 7%; 在速度上,相对于 PP-OCR server 版本提升超过 220%; 在模型大小上,11.6M 的总大小,服务器端和移动端都可以轻松部署。
GEEK TALK
03
@paddlejs-models/ocr
@paddlejs-models/ocr 是运行在浏览器端的模型 SDK,提供文本识别 AI 能力。SDK 封装两个API:init(模型初始化)和 recognize(文本识别),核心代码如下:
import * as ocr from '@paddlejs-models/ocr';
// 模型初始化
await ocr.init();
// 获取文本识别结果API,img为用户上传图片,option为可选参数
// option.canvas as HTMLElementCanvas:若用户需要绘制文本框选区域,传入canvas元素
// option.style as object:若用户需要配置canvas 样式,传入style 对象
// option.style.strokeStyle as string:文本框选颜色
// option.style.lineWidth as number:文本框选线段宽度
// option.style.fillStyle as string:文本框选填充颜色
const res = await ocr.recognize(img, option?);
// 识别文字结果
console.log(res.text);
// 文本区域坐标
console.log(res.points);import * as ocr from '@paddlejs-models/ocr';
// 模型初始化
await ocr.init();
// 获取文本识别结果API,img为用户上传图片,option为可选参数
// option.canvas as HTMLElementCanvas:若用户需要绘制文本框选区域,传入canvas元素
// option.style as object:若用户需要配置canvas 样式,传入style 对象
// option.style.strokeStyle as string:文本框选颜色
// option.style.lineWidth as number:文本框选线段宽度
// option.style.fillStyle as string:文本框选填充颜色
const res = await ocr.recognize(img, option?);
// 识别文字结果
console.log(res.text);
// 文本区域坐标
console.log(res.points);
GitHub 项目:
https://github.com/PaddlePaddle/Paddle.js/tree/master/packages/paddlejs-models/ocr
丨整体流程图
丨模型转换
pip3 install paddlejsconverter
# paddle_model_file_path 为ocr_det/ocr_rec PaddlePaddle模型本地路径
# paddle_param_file_path 为ocr_det/ocr_rec PaddlePaddle模型参数本地路径
# paddlejs_model_directory 为转换完成的paddlejs模型本地路径(开发者自定义)
paddlejsconverter \
--modelPath=<paddle_model_file_path> \
--paramPath=<paddle_param_file_path> \
--outputDir=<paddlejs_model_directory>
丨模型初始化
detectRunner = new Runner({
modelPath: 'https://paddlejs.bj.bcebos.com/models/ocr_det_new',
mean: [0.485, 0.456, 0.406],
std: [0.229, 0.224, 0.225],
bgr: true
});
const detectInit = detectRunner.init();
recRunner = new Runner({
modelPath: 'https://paddlejs.bj.bcebos.com/models/ocr_rec_new',
mean: [0.5, 0.5, 0.5],
std: [0.5, 0.5, 0.5],
bgr: true
});
const recInit = recRunner.init();
return await Promise.all([detectInit, recInit]);
Runner.init
API 主要完成模型加载、神经网络生成以及模型预热过程,由于我们使用 WebGL backend 计算,所以在预热过程中需要完成着色器(shader)编译以及权重数据上传至纹理(texture)。丨模型推理运行时
1. 文本检测
预处理
对长图处理:
对宽图处理:
推理
根据二值化图像获取所有文本框轮廓 根据轮廓信息获取最小外接矩形,返回矩形的顶点坐标和宽高最小值 根据二值化图像和矩形框坐标计算矩形框的置信度 扩张文本框大小,返回扩张后的轮廓信息 根据扩张后的轮廓信息计算最小外接矩形 将最终的矩形框映射回原图,获取矩形框的顶点坐标
2. 文本识别
预处理
推理
丨效果展示
GEEK TALK
05
Benchmark
评估环境:
MacBook Pro A2141(16英寸/i7/16G/512GSSD)
评估耗时阶段为图像预测耗时,不包括图像的预处理和后处理
针对OCR实际应用场景,随机收集的50张图像
浏览器环境
模型名称 | ch_ppocr_mobile | ch_PP-OCRv2 |
检测耗时(WebGL) | 139ms | 258ms |
END
推荐阅读: