天花板级前端工程师才能玩转的工具?前端AI应用集合重磅开源

Posted 小生方勤

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了天花板级前端工程师才能玩转的工具?前端AI应用集合重磅开源相关的知识,希望对你有一定的参考价值。

【导读】


在前端应用人脸识别、人像分割等 AI 能力已经广泛分布于各类场景中,其在低延迟、数据隐私保护、服务资源节省等方面都有明显的应用优势。随着人工智能技术的不断发展,越来越多的深度学习模型在保持超轻量的同时也拥有高精度的特点,使得前端可实现的 AI 应用范围不断扩大。

近期,百度飞桨团队联合飞桨开发者专家(PPDE) 陈千鹤,发布了支持一站式 AI 能力的前端应用集合,大幅提升了 AI 模型的易用性和可移植性。主要特色包括:

  • 提供视觉模型7种、web 端 demo 和小程序端 demo 共计6个,覆盖人脸检测、文字识别等经典计算机视觉技术应用方向;

  • 提供开箱即用 demo 和 npm 包调用两种方式,灵活易用;

  • 支持自定义修改前后处理参数、更换模型等定制化需求。

话不多说,先看 demo!

web 前端应用集合:包括人脸检测、人像分割、手势识别、1000种物品识别。

人脸检测

OCR 文字检测与识别动图

小程序应用:

图像识别小游戏

demo 传送门:

https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/


 详细的使用流程 

■ demo 使用

整体优化后的计算机视觉网页端 demo 体验步骤十分简单。

在浏览器中打开 http://localhost:5173/main/index.html 网址即可看到如下界面,点击左侧不同的功能即可体验 OCR、图像检测、分割功能。

■ 进阶使用

以 PP-OCR js 模型为例,只需要通过指令 npm install@paddle-js-models/ocr,使用方式如下:

其中,ocr.recognize()函数的输入参数 img 是 HTML ImageElement 格式的数据。

如果要在前端项目中直接使用其他 demo 中的 AI 能力,只需要在 https://www.npmjs.com/search?q=paddle-js-models 中选择相应的包,通过指令 npm install 包名即可完成安装。

■ 更换模型、自定义前后处理参数

>> 更换模型

参考如下步骤:

步骤1:将模型转成 js 格式,参考如下命令:

步骤2:修改代码替换默认的模型。以 OCR demo 为例:

注:

OCR 文本识别 demo 模型部署的源代码链接:

https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/web_demo/demo/src/pages/cv/ocr/TextRecognition/

ocr.init()函数有两个参数,分别为检测模型参数和识别模型参数,源码参考:

https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/web_demo/packages/paddlejs-models/ocr/src/index.ts#L52

>> 自定义前后处理参数

以 OCR 文本检测 demo 为例,期望修改文本检测后处理的参数实现扩大文本检测框的效果。

修改前:

参数调整前,文本检测效果如下:

通过给 detect()函数传入文本检测的后处理参数,修改后代码如下:

注:

OCR 文本检测 demo 模型部署的源代码链接:

https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/web_demo/demo/src/pages/cv/ocr/TextDetection/

扩大检测框后,重新运行 demo,文本检测效果如下:

有关 PP-OCR js 模型预测的细节,参考以下链接。

https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/web_demo/packages/paddlejs-models/ocr

更多 demo 应用方法可以在 FastDeploy 中查阅。

https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js

FastDeploy 简介

FastDeploy 是一款易用高效的推理部署工具箱。已支持 TensorRT、Paddle Inference、OpenVINO、ONNX Runtime、Paddle.js 等(Paddle Lite、RKNN等开发中),多硬件统一 API 部署体验;覆盖业界 CV、NLP、Speech 等热门 AI 模型60+,提供开箱即用的部署体验。


 深度学习模型优化经验揭秘 

由于前端环境和计算资源限制,在前端部署深度学习模型时,我们对模型的性能有着更严格的要求,简单来说,模型需要足够轻量化。理论上模型的输入 shape 越小、模型大小越小,则对应的模型的 flops 越小,在前端运行也能更流畅。经验总结,使用 Paddle.js 部署的模型存储尽量不超过5M。

本次发布的 demo 中的模型性能数据如下表所示。其中,主要针对 PP-OCRv3 模型进行了优化,因其涉及多个模型的串联(文本检测和文本识别),对单个模型的性能要求更严格,通过通道裁剪、知识蒸馏等技术进一步进行模型轻量化后,整体系统存储从 12.3M 压缩至4.3M,在 Mac M1 机器上使用 Google Chrome 测试推理速度仅需350ms,流畅度显著升级,相比旧版本模型压缩65%,预测速度提升87.5%。

注:flops 统计不包含前后处理


 加入 FastDeploy js 技术交流群 

入群福利

  • 第一时间获取 FastDeploy 产品最新信息及学习资料

  • 近距离与各企业部署大佬互动交流

  • 近距离与 FastDeploy 研发同学交流讨论

入群方式

微信扫描下方二维码,关注公众号,填写问卷后进入微信群

▎更多阅读

飞桨官网:

https://www.paddlepaddle.org.cn

FastDeploy 项目地址:

https://github.com/PaddlePaddle/FastDeploy

PaddleOCR 项目地址:

GitHub: https://github.com/PaddlePaddle/PaddleOCR

Gitee: https://gitee.com/paddlepaddle/PaddleOCR

以上是关于天花板级前端工程师才能玩转的工具?前端AI应用集合重磅开源的主要内容,如果未能解决你的问题,请参考以下文章

Web前端培训:有哪些好用的前端开发工具呢?

免费讲座 · 即将开始独角兽大牛教你如何玩转chrome

前端工程实训

前端如何才能彻底掌握webpack?

天花板级别的python读取文件方法,简直奈斯到不行

玩转前端进大厂,轻松高效的学习秘籍来啦~