mirror of
https://github.com/PaddlePaddle/FastDeploy.git
synced 2025-10-08 10:00:29 +08:00
[Doc] Update English version of some documents (#1084)
* Create README_CN.md * Update README.md * Update README_CN.md * Create README_CN.md * Update README.md * Create README_CN.md * Update README.md * Create README_CN.md * Update README.md * Create README_CN.md * Update README.md * Create README_CN.md * Update README.md * Create README_CN.md * Update README.md * Create README_CN.md * Update README.md * Update README.md * Update README_CN.md * Create README_CN.md * Update README.md * Update README.md * Update and rename README_en.md to README_CN.md * Update WebDemo.md * Update and rename WebDemo_en.md to WebDemo_CN.md * Update and rename DEVELOPMENT_cn.md to DEVELOPMENT_CN.md * Update DEVELOPMENT_CN.md * Update DEVELOPMENT.md * Update RNN.md * Update and rename RNN_EN.md to RNN_CN.md * Update README.md * Update and rename README_en.md to README_CN.md * Update README.md * Update and rename README_en.md to README_CN.md * Update README.md * Update README_cn.md * Rename README_cn.md to README_CN.md * Update README.md * Update README_cn.md * Rename README_cn.md to README_CN.md * Update export.md * Update and rename export_EN.md to export_CN.md * Update README.md * Update README.md * Create README_CN.md * Update README.md * Update README.md * Update kunlunxin.md * Update classification_result.md * Update classification_result_EN.md * Rename classification_result_EN.md to classification_result_CN.md * Update detection_result.md * Update and rename detection_result_EN.md to detection_result_CN.md * Update face_alignment_result.md * Update and rename face_alignment_result_EN.md to face_alignment_result_CN.md * Update face_detection_result.md * Update and rename face_detection_result_EN.md to face_detection_result_CN.md * Update face_recognition_result.md * Update and rename face_recognition_result_EN.md to face_recognition_result_CN.md * Update headpose_result.md * Update and rename headpose_result_EN.md to headpose_result_CN.md * Update keypointdetection_result.md * Update and rename keypointdetection_result_EN.md to keypointdetection_result_CN.md * Update matting_result.md * Update and rename matting_result_EN.md to matting_result_CN.md * Update mot_result.md * Update and rename mot_result_EN.md to mot_result_CN.md * Update ocr_result.md * Update and rename ocr_result_EN.md to ocr_result_CN.md * Update segmentation_result.md * Update and rename segmentation_result_EN.md to segmentation_result_CN.md * Update README.md * Update README.md * Update quantize.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md
This commit is contained in:
HCQ14
@@ -1,42 +1,40 @@
|
||||
[English](README_en.md) | 简体中文
|
||||
English | [简体中文](README_CN.md)
|
||||
|
||||
# 前端AI应用
|
||||
# Front-end AI application
|
||||
|
||||
人工智能技术的快速发展带动了计算机视觉、自然语言处理领域的产业升级。另外，随着PC和移动设备上算力的稳步增强、模型压缩技术迭代更新以及各种创新需求的不断催生，在浏览器中部署AI模型实现前端智能已经具备了良好的基础条件。
|
||||
针对前端部署AI深度学习模型困难的问题，百度开源了Paddle.js前端深度学习模型部署框架，可以很容易的将深度学习模型部署到前端项目中。
|
||||
The development of artificial intelligence technology has led to industrial upgrading in the fields of computer vision(CV) and natural language processing(NLP). In addition, the deployment of AI models in browsers to achieve front-end intelligence has already provided good basic conditions with the steady increase in computing power on PCs and mobile devices, iterative updates of model compression technologies, and the continuous emergence of various innovative needs.
|
||||
In response to the difficulty of deploying AI deep learning models on the front-end, Baidu has open-sourced the Paddle.js front-end deep learning model deployment framework, which can easily deploy deep learning models into front-end projects.
|
||||
|
||||
## Paddle.js简介
|
||||
# Introduction of Paddle.js
|
||||
|
||||
[Paddle.js](https://github.com/PaddlePaddle/Paddle.js)是百度`PaddlePaddle`的web方向子项目，是一个运行在浏览器中的开源深度学习框架。`Paddle.js`可以加载`PaddlePaddle`动转静的模型，经过`Paddle.js`的模型转换工具`paddlejs-converter`转换成浏览器友好的模型，易于在线推理预测使用。`Paddle.js`支持`WebGL/WebGPU/WebAssembly`的浏览器中运行，也可以在百度小程序和微信小程序环境下运行。
|
||||
[Paddle.js](https://github.com/PaddlePaddle/Paddle.js) is a web sub-project of Baidu `PaddlePaddle`, an open source deep learning framework running in the browser. `Paddle.js` can load the deep learning model trained by `PaddlePaddle`, and convert it into a browser-friendly model through the model conversion tool `paddlejs-converter` of `Paddle.js`, which is easy to use for online reasoning and prediction. `Paddle.js` supports running in browsers of `WebGL/WebGPU/WebAssembly`, and can also run in the environment of Baidu applet and WeChat applet.
|
||||
|
||||
简言之，利用Paddle.js，我们可以在浏览器、小程序等前端应用场景上线AI功能，包括但不限于目标检测，图像分割，OCR，物品分类等AI能力。
|
||||
Finally, we can launch AI functions in front-end application scenarios such as browsers and mini-program using `Paddle.js`, including but not limited to AI capabilities such as object detection, image segmentation, OCR, and item classification.
|
||||
|
||||
## Web Demo使用
|
||||
## Web Demo
|
||||
|
||||
在浏览器中直接运行官方demo参考[文档](./WebDemo.md)
|
||||
Refer to this [document](./WebDemo.md) for steps to run computer vision demo in the browser.
|
||||
|
||||
|demo名称|web demo目录|可视化|
|
||||
|demo|web demo directory|visualization|
|
||||
|-|-|-|
|
||||
|目标检测|[ScrewDetection、FaceDetection](./web_demo/src/pages/cv/detection/)| <img src="https://user-images.githubusercontent.com/26592129/196874536-b7fa2c0a-d71f-4271-8c40-f9088bfad3c9.png" height="200px">|
|
||||
|人像分割背景替换|[HumanSeg](./web_demo/src/pages/cv/segmentation/HumanSeg)|<img src="https://user-images.githubusercontent.com/26592129/196874452-4ef2e770-fbb3-4a35-954b-f871716d6669.png" height="200px">|
|
||||
|物体识别|[GestureRecognition、ItemIdentification](./web_demo/src/pages/cv/recognition/)|<img src="https://user-images.githubusercontent.com/26592129/196874416-454e6bb0-4ebd-4b51-a88a-8c40614290ae.png" height="200px">|
|
||||
|object detection|[ScrewDetection、FaceDetection](./web_demo/src/pages/cv/detection/)| <img src="https://user-images.githubusercontent.com/26592129/196874536-b7fa2c0a-d71f-4271-8c40-f9088bfad3c9.png" height="200px">|
|
||||
|human segmentation|[HumanSeg](./web_demo/src/pages/cv/segmentation/HumanSeg)|<img src="https://user-images.githubusercontent.com/26592129/196874452-4ef2e770-fbb3-4a35-954b-f871716d6669.png" height="200px">|
|
||||
|classification|[GestureRecognition、ItemIdentification](./web_demo/src/pages/cv/recognition/)|<img src="https://user-images.githubusercontent.com/26592129/196874416-454e6bb0-4ebd-4b51-a88a-8c40614290ae.png" height="200px">|
|
||||
|OCR|[TextDetection、TextRecognition](./web_demo/src/pages/cv/ocr/)|<img src="https://user-images.githubusercontent.com/26592129/196874354-1b5eecb0-f273-403c-aa6c-4463bf6d78db.png" height="200px">|
|
||||
|
||||
|
||||
## 微信小程序Demo使用
|
||||
## Wechat Mini-program
|
||||
|
||||
在微信小程序运行官方demo参考[文档](./mini_program/README.md)
|
||||
Run the official demo reference in the WeChat mini-program [document](./mini_program/README.md)
|
||||
|
||||
|名称|目录|
|
||||
|Name|Directory|
|
||||
|-|-|
|
||||
|OCR文本检测| [ocrdetecXcx](./mini_program/ocrdetectXcx/) |
|
||||
|OCR文本识别| [ocrXcx](./mini_program/ocrXcx/) |
|
||||
|目标检测| coming soon |
|
||||
|图像分割| coming soon |
|
||||
|物品分类| coming soon |
|
||||
|
||||
|OCR Text Detection| [ocrdetecXcx](./mini_program/ocrdetectXcx/) |
|
||||
|OCR Text Recognition| [ocrXcx](./mini_program/ocrXcx/) |
|
||||
|object detection| coming soon |
|
||||
|Image segmentation | coming soon |
|
||||
|Item Category| coming soon |
|
||||
|
||||
## Contributor
|
||||
|
||||
感谢飞桨开发者专家(PPDE) 陈千鹤(github: [chenqianhe](https://github.com/chenqianhe))贡献的Web demo, 小程序。
|
||||
|
||||
Thanks to Paddle Paddle Developer Expert (PPDE) Chen Qianhe (github: [chenqianhe](https://github.com/chenqianhe)) for the Web demo, mini-program.
|
||||
|
||||
42
examples/application/js/README_CN.md
Normal file
42
examples/application/js/README_CN.md
Normal file
@@ -0,0 +1,42 @@
|
||||
[English](README.md) | 简体中文
|
||||
|
||||
# 前端AI应用
|
||||
|
||||
人工智能技术的快速发展带动了计算机视觉、自然语言处理领域的产业升级。另外，随着PC和移动设备上算力的稳步增强、模型压缩技术迭代更新以及各种创新需求的不断催生，在浏览器中部署AI模型实现前端智能已经具备了良好的基础条件。
|
||||
针对前端部署AI深度学习模型困难的问题，百度开源了Paddle.js前端深度学习模型部署框架，可以很容易的将深度学习模型部署到前端项目中。
|
||||
|
||||
## Paddle.js简介
|
||||
|
||||
[Paddle.js](https://github.com/PaddlePaddle/Paddle.js)是百度`PaddlePaddle`的web方向子项目，是一个运行在浏览器中的开源深度学习框架。`Paddle.js`可以加载`PaddlePaddle`动转静的模型，经过`Paddle.js`的模型转换工具`paddlejs-converter`转换成浏览器友好的模型，易于在线推理预测使用。`Paddle.js`支持`WebGL/WebGPU/WebAssembly`的浏览器中运行，也可以在百度小程序和微信小程序环境下运行。
|
||||
|
||||
简言之，利用Paddle.js，我们可以在浏览器、小程序等前端应用场景上线AI功能，包括但不限于目标检测，图像分割，OCR，物品分类等AI能力。
|
||||
|
||||
## Web Demo使用
|
||||
|
||||
在浏览器中直接运行官方demo参考[文档](./WebDemo.md)
|
||||
|
||||
|demo名称|web demo目录|可视化|
|
||||
|-|-|-|
|
||||
|目标检测|[ScrewDetection、FaceDetection](./web_demo/src/pages/cv/detection/)| <img src="https://user-images.githubusercontent.com/26592129/196874536-b7fa2c0a-d71f-4271-8c40-f9088bfad3c9.png" height="200px">|
|
||||
|人像分割背景替换|[HumanSeg](./web_demo/src/pages/cv/segmentation/HumanSeg)|<img src="https://user-images.githubusercontent.com/26592129/196874452-4ef2e770-fbb3-4a35-954b-f871716d6669.png" height="200px">|
|
||||
|物体识别|[GestureRecognition、ItemIdentification](./web_demo/src/pages/cv/recognition/)|<img src="https://user-images.githubusercontent.com/26592129/196874416-454e6bb0-4ebd-4b51-a88a-8c40614290ae.png" height="200px">|
|
||||
|OCR|[TextDetection、TextRecognition](./web_demo/src/pages/cv/ocr/)|<img src="https://user-images.githubusercontent.com/26592129/196874354-1b5eecb0-f273-403c-aa6c-4463bf6d78db.png" height="200px">|
|
||||
|
||||
|
||||
## 微信小程序Demo使用
|
||||
|
||||
在微信小程序运行官方demo参考[文档](./mini_program/README.md)
|
||||
|
||||
|名称|目录|
|
||||
|-|-|
|
||||
|OCR文本检测| [ocrdetecXcx](./mini_program/ocrdetectXcx/) |
|
||||
|OCR文本识别| [ocrXcx](./mini_program/ocrXcx/) |
|
||||
|目标检测| coming soon |
|
||||
|图像分割| coming soon |
|
||||
|物品分类| coming soon |
|
||||
|
||||
|
||||
## Contributor
|
||||
|
||||
感谢飞桨开发者专家(PPDE) 陈千鹤(github: [chenqianhe](https://github.com/chenqianhe))贡献的Web demo, 小程序。
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
English | [简体中文](README.md)
|
||||
|
||||
# Front-end AI application
|
||||
|
||||
The development of artificial intelligence technology has led to industrial upgrading in the fields of computer vision(CV) and natural language processing(NLP). In addition, the deployment of AI models in browsers to achieve front-end intelligence has already provided good basic conditions with the steady increase in computing power on PCs and mobile devices, iterative updates of model compression technologies, and the continuous emergence of various innovative needs.
|
||||
In response to the difficulty of deploying AI deep learning models on the front-end, Baidu has open-sourced the Paddle.js front-end deep learning model deployment framework, which can easily deploy deep learning models into front-end projects.
|
||||
|
||||
# Introduction of Paddle.js
|
||||
|
||||
[Paddle.js](https://github.com/PaddlePaddle/Paddle.js) is a web sub-project of Baidu `PaddlePaddle`, an open source deep learning framework running in the browser. `Paddle.js` can load the deep learning model trained by `PaddlePaddle`, and convert it into a browser-friendly model through the model conversion tool `paddlejs-converter` of `Paddle.js`, which is easy to use for online reasoning and prediction. `Paddle.js` supports running in browsers of `WebGL/WebGPU/WebAssembly`, and can also run in the environment of Baidu applet and WeChat applet.
|
||||
|
||||
Finally, we can launch AI functions in front-end application scenarios such as browsers and mini-program using `Paddle.js`, including but not limited to AI capabilities such as object detection, image segmentation, OCR, and item classification.
|
||||
|
||||
## Web Demo
|
||||
|
||||
Refer to this [document](./WebDemo_en.md) for steps to run computer vision demo in the browser.
|
||||
|
||||
|demo|web demo directory|visualization|
|
||||
|-|-|-|
|
||||
|object detection|[ScrewDetection、FaceDetection](./web_demo/src/pages/cv/detection/)| <img src="https://user-images.githubusercontent.com/26592129/196874536-b7fa2c0a-d71f-4271-8c40-f9088bfad3c9.png" height="200px">|
|
||||
|human segmentation|[HumanSeg](./web_demo/src/pages/cv/segmentation/HumanSeg)|<img src="https://user-images.githubusercontent.com/26592129/196874452-4ef2e770-fbb3-4a35-954b-f871716d6669.png" height="200px">|
|
||||
|classification|[GestureRecognition、ItemIdentification](./web_demo/src/pages/cv/recognition/)|<img src="https://user-images.githubusercontent.com/26592129/196874416-454e6bb0-4ebd-4b51-a88a-8c40614290ae.png" height="200px">|
|
||||
|OCR|[TextDetection、TextRecognition](./web_demo/src/pages/cv/ocr/)|<img src="https://user-images.githubusercontent.com/26592129/196874354-1b5eecb0-f273-403c-aa6c-4463bf6d78db.png" height="200px">|
|
||||
|
||||
|
||||
## Wechat Mini-program
|
||||
|
||||
Run the official demo reference in the WeChat mini-program [document](./mini_program/README.md)
|
||||
|
||||
|Name|Directory|
|
||||
|-|-|
|
||||
|OCR Text Detection| [ocrdetecXcx](./mini_program/ocrdetectXcx/) |
|
||||
|OCR Text Recognition| [ocrXcx](./mini_program/ocrXcx/) |
|
||||
|object detection| coming soon |
|
||||
|Image segmentation | coming soon |
|
||||
|Item Category| coming soon |
|
||||
|
||||
## Contributor
|
||||
|
||||
Thanks to Paddle Paddle Developer Expert (PPDE) Chen Qianhe (github: [chenqianhe](https://github.com/chenqianhe)) for the Web demo, mini-program.
|
||||
@@ -1,174 +1,176 @@
|
||||
[English](WebDemo_en.md) | 简体中文
|
||||
English | [简体中文](WebDemo_CN.md)
|
||||
|
||||
# Web Demo介绍
|
||||
# Introduction to Web Demo
|
||||
|
||||
- [简介](#0)
|
||||
- [1. 快速开始](#1)
|
||||
- [2. npm包调用](#2)
|
||||
- [3. 模型替换](#3)
|
||||
- [4. 自定义前后处理参数](#4)
|
||||
- [5. 其他](#5)
|
||||
- [Introduction](#0)
|
||||
- [1. Quick Start](#1)
|
||||
- [2. npm package call](#2)
|
||||
- [3. Model Replacement](#3)
|
||||
- [4. custom hyperparameters](#4)
|
||||
- [5. Other](#5)
|
||||
|
||||
<a name="0"></a>
|
||||
## 简介
|
||||
## Introduction
|
||||
|
||||
本项目基于[Paddle.js](https://github.com/PaddlePaddle/Paddle.js)在浏览器中实现目标检测，人像分割，OCR，物品分类等计算机视觉任务。
|
||||
Based on [Paddle.js](https://github.com/PaddlePaddle/Paddle.js), this project implements computer vision tasks such as target detection, portrait segmentation, OCR, and item classification in the browser.
|
||||
|
||||
|
||||
|demo名称|web demo组件|源码目录|npm包|
|
||||
|demo name|web demo component|source directory|npm package|
|
||||
|-|-|-|-|
|
||||
|人脸检测|[FaceDetection](./web_demo/src/pages/cv/detection/FaceDetection/)| [facedetect](./package/packages/paddlejs-models/facedetect)|[@paddle-js-models/facedetect](https://www.npmjs.com/package/@paddle-js-models/facedetect)|
|
||||
|螺丝钉检测|[ScrewDetection](./web_demo/src/pages/cv/detection/ScrewDetection)| [detect](./package/packages/paddlejs-models/detect)|[@paddle-js-models/detect](https://www.npmjs.com/package/@paddle-js-models/detect)|
|
||||
|人像分割背景替换|[HumanSeg](./web_demo/src/pages/cv/segmentation/HumanSeg)|[humanseg](./package/packages/paddlejs-models/humanseg)|[@paddle-js-models/humanseg](https://www.npmjs.com/package/@paddle-js-models/humanseg)|
|
||||
|手势识别AI猜丁壳|[GestureRecognition](./web_demo/src/pages/cv/recognition/GestureRecognition)|[gesture](./package/packages/paddlejs-models/gesture)|[@paddle-js-models/gesture](https://www.npmjs.com/package/@paddle-js-models/gesture)|
|
||||
|1000种物品识别|[ItemIdentification](./web_demo/src/pages/cv/recognition/ItemIdentification)|[mobilenet](./package/packages/paddlejs-models/mobilenet)|[@paddle-js-models/mobilenet](https://www.npmjs.com/package/@paddle-js-models/mobilenet)|
|
||||
|文本检测|[TextDetection](./web_demo/src/pages/cv/ocr/TextDetection)|[ocrdetection](./package/packages/paddlejs-models/ocrdetection)|[@paddle-js-models/ocrdet](https://www.npmjs.com/package/@paddle-js-models/ocrdet)|
|
||||
|文本识别|[TextRecognition](./web_demo/src/pages/cv/ocr/TextRecognition)|[ocr](./package/packages/paddlejs-models/ocr)|[@paddle-js-models/ocr](https://www.npmjs.com/package/@paddle-js-models/ocr)|
|
||||
|Face Detection|[FaceDetection](./web_demo/src/pages/cv/detection/FaceDetection/)| [facedetect](./package/packages/paddlejs-models/facedetect)|[@paddle-js-models/ facedetect](https://www.npmjs.com/package/@paddle-js-models/facedetect)|
|
||||
|Screw Detection|[ScrewDetection](./web_demo/src/pages/cv/detection/ScrewDetection)| [detect](./package/packages/paddlejs-models/detect)|[@paddle-js-models/detect](https://www.npmjs.com/package/@paddle-js-models/detect)|
|
||||
|Portrait segmentation background replacement|[HumanSeg](./web_demo/src/pages/cv/segmentation/HumanSeg)|[humanseg](./package/packages/paddlejs-models/humanseg)|[@paddle-js-models/ humanseg](https://www.npmjs.com/package/@paddle-js-models/humanseg)|
|
||||
|Gesture Recognition AI Guessing Shell|[GestureRecognition](./web_demo/src/pages/cv/recognition/GestureRecognition)|[gesture](./package/packages/paddlejs-models/gesture)|[@paddle-js- models/gesture](https://www.npmjs.com/package/@paddle-js-models/gesture)|
|
||||
|1000 Item Identification|[ItemIdentification](./web_demo/src/pages/cv/recognition/ItemIdentification)|[mobilenet](./package/packages/paddlejs-models/mobilenet)|[@paddle-js-models/ mobilenet](https://www.npmjs.com/package/@paddle-js-models/mobilenet)|
|
||||
|Text Detection|[TextDetection](./web_demo/src/pages/cv/ocr/TextDetection)|[ocrdetection](./package/packages/paddlejs-models/ocrdetection)|[@paddle-js-models/ocrdet](https://www.npmjs.com/package/@paddle-js-models/ocrdet)|
|
||||
|Text Recognition|[TextRecognition](./web_demo/src/pages/cv/ocr/TextRecognition)|[ocr](./package/packages/paddlejs-models/ocr)|[@paddle-js-models/ocr](https://www.npmjs.com/package/@paddle-js-models/ocr)|
|
||||
|
||||
|
||||
<a name="1"></a>
|
||||
## 1. 快速开始
|
||||
## 1. Quick Start
|
||||
|
||||
本节介绍如何在浏览器中直接运行官方demo。
|
||||
This section describes how to run the official demo directly in the browser.
|
||||
|
||||
**1. 安装Node.js**
|
||||
**1. Install Node.js**
|
||||
|
||||
从`Node.js`官网https://nodejs.org/en/download/ 下载适合自己平台的`Node.js`安装包并安装。
|
||||
Download the `Node.js` installation package suitable for your platform from the `Node.js` official website https://nodejs.org/en/download/ and install it.
|
||||
|
||||
**2. 安装demo依赖并启动**
|
||||
在`./web_demo`目录下执行如下指令：
|
||||
**2. Install demo dependencies and start**
|
||||
Execute the following command in the `./web_demo` directory:
|
||||
|
||||
```
|
||||
# 安装依赖
|
||||
````
|
||||
# install dependencies
|
||||
npm install
|
||||
# 启动demo
|
||||
# start demo
|
||||
npm run dev
|
||||
```
|
||||
````
|
||||
|
||||
在浏览器中打开网址 `http://localhost:5173/main/index.html` 即可快速体验在浏览器中运行计算机视觉任务。
|
||||
Open the URL `http://localhost:5173/main/index.html` in the browser to quickly experience running computer vision tasks in the browser.
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="2"></a>
|
||||
## 2. npm包调用
|
||||
## 2. npm package call
|
||||
|
||||
本节介绍npm包的使用方式，每个demo均提供简单易用的接口，用户只需初始化上传图片即可获得结果，使用步骤如下：
|
||||
1. 调用模块
|
||||
2. 初始化模型
|
||||
3. 传入输入，执行预测
|
||||
This section introduces how to use npm packages. Each demo provides an easy-to-use interface. Users only need to initialize and upload images to get the results. The steps are as follows:
|
||||
1. Call the module
|
||||
2. Initialize the model
|
||||
3. Pass in input, perform prediction
|
||||
|
||||
以 OCR 为例，在前端项目中，`@paddle-js-models/ocr`包的使用方式如下：
|
||||
Taking OCR as an example, in a front-end project, the `@paddle-js-models/ocr` package is used as follows:
|
||||
|
||||
```
|
||||
// 1. 调用ocr模块
|
||||
````
|
||||
// 1. Call the ocr module
|
||||
import * as ocr from '@paddle-js-models/ocr';
|
||||
|
||||
// 2. 初始化ocr模型
|
||||
// 2. Initialize the ocr model
|
||||
await ocr.init();
|
||||
|
||||
// 3. 传入HTMLImageElement类型的图像作为输入并获得结果
|
||||
// 3. Pass in an image of type HTMLImageElement as input and get the result
|
||||
const res = await ocr.recognize(img);
|
||||
|
||||
// 打印OCR模型得到的文本坐标以及文本内容
|
||||
// Print the text coordinates and text content obtained by the OCR model
|
||||
console.log(res.text);
|
||||
console.log(res.points);
|
||||
```
|
||||
````
|
||||
|
||||
<a name="3"></a>
|
||||
## 3. 模型替换
|
||||
## 3. Model replacement
|
||||
|
||||
由于前端环境和计算资源限制，在前端部署深度学习模型时，我们对模型的性能有着更严格的要求，简单来说，模型需要足够轻量化。理论上模型的输入shape越小、模型大小越小，则对应的模型的flops越小，在前端运行也能更流畅。经验总结，使用`Paddle.js`部署的模型存储尽量不超过*5M*，实际情况根据硬件和计算资源情况决定。
|
||||
Due to the limitations of the front-end environment and computing resources, when deploying deep learning models on the front-end, we have stricter requirements on the performance of the models. In short, the models need to be lightweight enough. In theory, the smaller the input shape of the model and the smaller the model size, the smaller the flops of the corresponding model, and the smoother the front-end operation. Based on experience, the model storage deployed with `Paddle.js` should not exceed *5M* as much as possible, and the actual situation depends on the hardware and computing resources.
|
||||
|
||||
在实际应用中，常常根据垂类的场景定制化模型，官方的demo支持修改传入参数替换模型。
|
||||
In practical applications, models are often customized according to vertical scenarios, and the official demo supports modifying incoming parameters to replace models.
|
||||
|
||||
以OCR demo为例，[ocr.init()函数](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/package/packages/paddlejs-models/ocr/src/index.ts#L52)中，包含默认初始化的模型链接，如果要替换模型参考下述步骤。
|
||||
Take the OCR demo as an example, [ocr.init()function](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/package/packages/paddlejs-models/ocr/src/index.ts#L52), contains the default initialization model link, if you want to replace the model, please refer to the following steps.
|
||||
|
||||
步骤1：将模型转成js格式：
|
||||
```
|
||||
# 安装paddlejsconverter
|
||||
Step 1: Convert the model to js format:
|
||||
````
|
||||
# Install paddlejsconverter
|
||||
pip3 install paddlejsconverter
|
||||
# 转换模型格式，输入模型为inference模型
|
||||
paddlejsconverter --modelPath=./inference.pdmodel --paramPath=./inference.pdiparams --outputDir=./ --useGPUOpt=True
|
||||
# 注意：useGPUOpt 选项默认不开启，如果模型用在 gpu backend（webgl/webgpu），则开启 useGPUOpt，如果模型运行在（wasm/plain js）则不要开启。
|
||||
```
|
||||
# Convert the model format, the input model is the inference model
|
||||
paddlejsconverter --modelPath=./inference.pdmodel --paramPath=./inference.pdiparams --outputDir=./ --useGPUOpt=True
|
||||
# Note: The useGPUOpt option is not enabled by default. If the model is used on the gpu backend (webgl/webgpu), enable useGPUOpt. If the model is running on (wasm/plain js), do not enable it.
|
||||
````
|
||||
|
||||
导出成功后，本地目录下会出现 `model.json chunk_1.dat`等文件，分别是对应js模型的网络结构、模型参数二进制文件。
|
||||
After the export is successful, files such as `model.json chunk_1.dat` will appear in the local directory, which are the network structure and model parameter binary files corresponding to the js model.
|
||||
|
||||
步骤2：将导出的js模型上传到支持跨域访问的服务器，服务器的CORS配置参考下图：
|
||||
Step 2: Upload the exported js model to a server that supports cross-domain access. For the CORS configuration of the server, refer to the following image:
|
||||
|
||||
|
||||
|
||||
步骤3：修改代码替换默认的模型。以OCR demo为例，修改OCR web demo中[模型初始化代码](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/web_demo/src/pages/cv/ocr/TextRecognition/TextRecognition.vue#L64)，即
|
||||
Step 3: Modify the code to replace the default model. Take the OCR demo as an example, modify the [model initialization code](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/web_demo/src/pages/cv/ocr/TextRecognition/TextRecognition.vue#L64) in the OCR web demo , i.e.
|
||||
|
||||
```
|
||||
````
|
||||
await ocr.init();
|
||||
修改为：
|
||||
await ocr.init({modelPath: "https://js-models.bj.bcebos.com/PaddleOCR/PP-OCRv3/ch_PP-OCRv3_det_infer_js_960/model.json"}); # 第一个参数传入新的文本检测字典类型参数
|
||||
```
|
||||
change into:
|
||||
await ocr.init({modelPath: "https://js-models.bj.bcebos.com/PaddleOCR/PP-OCRv3/ch_PP-OCRv3_det_infer_js_960/model.json"}); # The first parameter passes in the new text Check dictionary type parameter
|
||||
````
|
||||
|
||||
重新在demo目录下执行下述命令，即可体验新的模型效果。
|
||||
```
|
||||
Re-execute the following command in the demo directory to experience the new model effect.
|
||||
````
|
||||
npm run dev
|
||||
```
|
||||
````
|
||||
|
||||
<a name="4"></a>
|
||||
## 4. 自定义前后处理参数
|
||||
## 4. custom hyperparameters
|
||||
|
||||
**自定义前处理参数**
|
||||
**Custom preprocessing parameters**
|
||||
|
||||
在不同计算机视觉任务中，不同的模型可能有不同的预处理参数，比如mean,std,keep_ratio等参数，替换模型后也需要对预处理参数进行修改。paddle.js发布的npm包中提供了自定义预处理参数的简单方案。只需要在调用模型初始化函数时，传入自定义的参数即可。
|
||||
In different computer vision tasks, different models may have different preprocessing parameters, such as mean, std, keep_ratio and other parameters. After replacing the model, the preprocessing parameters also need to be modified. A simple solution for customizing preprocessing parameters is provided in the npm package published by paddle.js. You only need to pass in custom parameters when calling the model initialization function.
|
||||
|
||||
```
|
||||
# 默认参数初始化
|
||||
````
|
||||
# Default parameter initialization
|
||||
await model.init();
|
||||
|
||||
自定义参数初始化
|
||||
Custom parameter initialization
|
||||
const Config = {mean: [0.5, 0.5, 0.5], std: [0.5, 0.5, 0.5], keepratio: false};
|
||||
await model.init(Config);
|
||||
```
|
||||
````
|
||||
|
||||
以OCR文本检测demo为例，修改模型前处理的mean和std参数，只需要在模型初始化时传入自定义的mean和std参数。
|
||||
```
|
||||
Taking the OCR text detection demo as an example, to modify the mean and std parameters of the model preprocessing, you only need to pass in the custom mean and std parameters when the model is initialized.
|
||||
````
|
||||
await ocr.init();
|
||||
修改为：
|
||||
change into:
|
||||
const detConfig = {mean: [0.5, 0.5, 0.5], std: [0.5, 0.5, 0.5]};
|
||||
await ocr.init(detConfig); # 第一个参数传入新的文本检测模型链接
|
||||
```
|
||||
await ocr.init(detConfig); # The first parameter passes in the new text detection model link
|
||||
````
|
||||
|
||||
**自定义后处理参数**
|
||||
**Custom postprocessing parameters**
|
||||
|
||||
同理，paddle.js发布的npm包也提供了后处理参数的自定义方案。
|
||||
Similarly, the npm package published by paddle.js also provides a custom solution for post-processing parameters.
|
||||
|
||||
```
|
||||
# 默认参数运行
|
||||
````
|
||||
# run with default parameters
|
||||
await model.predict();
|
||||
|
||||
# 自定义后处理参数
|
||||
# custom post-processing parameters
|
||||
const postConfig = {thresh: 0.5};
|
||||
await model.predict(Config);
|
||||
```
|
||||
````
|
||||
|
||||
以OCR文本检测 demo为例，修改文本检测后处理的参数实现扩大文本检测框的效果，修改OCR web demo中执行[模型预测代码](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/web_demo/src/pages/cv/ocr/TextRecognition/TextRecognition.vue#L99)，即：
|
||||
Take the OCR text detection demo as an example, modify the parameters of the text detection post-processing to achieve the effect of expanding the text detection frame, and modify the OCR web demo to execute the [model prediction code](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/web_demo/src/pages/cv/ocr/TextRecognition/TextRecognition.vue#L99), ie:
|
||||
|
||||
```
|
||||
````
|
||||
const res = await ocr.recognize(img, { canvas: canvas.value });
|
||||
修改为：
|
||||
// 定义超参数，将unclip_ratio参数从1.5 增大为3.5
|
||||
change into:
|
||||
// Define hyperparameters, increase the unclip_ratio parameter from 1.5 to 3.5
|
||||
const detConfig = {shape: 960, thresh: 0.3, box_thresh: 0.6, unclip_ratio:3.5};
|
||||
const res = await ocr.recognize(img, { canvas: canvas.value }, detConfig);
|
||||
```
|
||||
````
|
||||
|
||||
注：不同的任务有不同的后处理参数，详细参数参考npm包中的API。
|
||||
Note: Different tasks have different post-processing parameters. For detailed parameters, please refer to the API in the npm package.
|
||||
|
||||
<a name="5"></a>
|
||||
## 5. 其他
|
||||
## 5. Others
|
||||
|
||||
`Paddle.js`转换后的模型不仅支持浏览器中使用，也可以在百度小程序和微信小程序环境下运行。
|
||||
The converted model of `Paddle.js` can not only be used in the browser, but also can be run in the Baidu mini-program and WeChat mini-program environment.
|
||||
|
||||
|名称|目录|
|
||||
|Name|Directory|
|
||||
|-|-|
|
||||
|OCR文本检测| [ocrdetecXcx](./mini_program/ocrdetectXcx/) |
|
||||
|OCR文本识别| [ocrXcx](./mini_program/ocrXcx/) |
|
||||
|目标检测| coming soon |
|
||||
|图像分割| coming soon |
|
||||
|物品分类| coming soon |
|
||||
|OCR Text Detection| [ocrdetecXcx](./mini_program/ocrdetectXcx/) |
|
||||
|OCR Text Recognition| [ocrXcx](./mini_program/ocrXcx/) |
|
||||
|target detection| coming soon |
|
||||
| Image segmentation | coming soon |
|
||||
|Item Category| coming soon |
|
||||
|
||||
|
||||
174
examples/application/js/WebDemo_CN.md
Normal file
174
examples/application/js/WebDemo_CN.md
Normal file
@@ -0,0 +1,174 @@
|
||||
[English](WebDemo.md) | 简体中文
|
||||
|
||||
# Web Demo介绍
|
||||
|
||||
- [简介](#0)
|
||||
- [1. 快速开始](#1)
|
||||
- [2. npm包调用](#2)
|
||||
- [3. 模型替换](#3)
|
||||
- [4. 自定义前后处理参数](#4)
|
||||
- [5. 其他](#5)
|
||||
|
||||
<a name="0"></a>
|
||||
## 简介
|
||||
|
||||
本项目基于[Paddle.js](https://github.com/PaddlePaddle/Paddle.js)在浏览器中实现目标检测，人像分割，OCR，物品分类等计算机视觉任务。
|
||||
|
||||
|
||||
|demo名称|web demo组件|源码目录|npm包|
|
||||
|-|-|-|-|
|
||||
|人脸检测|[FaceDetection](./web_demo/src/pages/cv/detection/FaceDetection/)| [facedetect](./package/packages/paddlejs-models/facedetect)|[@paddle-js-models/facedetect](https://www.npmjs.com/package/@paddle-js-models/facedetect)|
|
||||
|螺丝钉检测|[ScrewDetection](./web_demo/src/pages/cv/detection/ScrewDetection)| [detect](./package/packages/paddlejs-models/detect)|[@paddle-js-models/detect](https://www.npmjs.com/package/@paddle-js-models/detect)|
|
||||
|人像分割背景替换|[HumanSeg](./web_demo/src/pages/cv/segmentation/HumanSeg)|[humanseg](./package/packages/paddlejs-models/humanseg)|[@paddle-js-models/humanseg](https://www.npmjs.com/package/@paddle-js-models/humanseg)|
|
||||
|手势识别AI猜丁壳|[GestureRecognition](./web_demo/src/pages/cv/recognition/GestureRecognition)|[gesture](./package/packages/paddlejs-models/gesture)|[@paddle-js-models/gesture](https://www.npmjs.com/package/@paddle-js-models/gesture)|
|
||||
|1000种物品识别|[ItemIdentification](./web_demo/src/pages/cv/recognition/ItemIdentification)|[mobilenet](./package/packages/paddlejs-models/mobilenet)|[@paddle-js-models/mobilenet](https://www.npmjs.com/package/@paddle-js-models/mobilenet)|
|
||||
|文本检测|[TextDetection](./web_demo/src/pages/cv/ocr/TextDetection)|[ocrdetection](./package/packages/paddlejs-models/ocrdetection)|[@paddle-js-models/ocrdet](https://www.npmjs.com/package/@paddle-js-models/ocrdet)|
|
||||
|文本识别|[TextRecognition](./web_demo/src/pages/cv/ocr/TextRecognition)|[ocr](./package/packages/paddlejs-models/ocr)|[@paddle-js-models/ocr](https://www.npmjs.com/package/@paddle-js-models/ocr)|
|
||||
|
||||
|
||||
<a name="1"></a>
|
||||
## 1. 快速开始
|
||||
|
||||
本节介绍如何在浏览器中直接运行官方demo。
|
||||
|
||||
**1. 安装Node.js**
|
||||
|
||||
从`Node.js`官网https://nodejs.org/en/download/ 下载适合自己平台的`Node.js`安装包并安装。
|
||||
|
||||
**2. 安装demo依赖并启动**
|
||||
在`./web_demo`目录下执行如下指令：
|
||||
|
||||
```
|
||||
# 安装依赖
|
||||
npm install
|
||||
# 启动demo
|
||||
npm run dev
|
||||
```
|
||||
|
||||
在浏览器中打开网址 `http://localhost:5173/main/index.html` 即可快速体验在浏览器中运行计算机视觉任务。
|
||||
|
||||
|
||||
|
||||
<a name="2"></a>
|
||||
## 2. npm包调用
|
||||
|
||||
本节介绍npm包的使用方式，每个demo均提供简单易用的接口，用户只需初始化上传图片即可获得结果，使用步骤如下：
|
||||
1. 调用模块
|
||||
2. 初始化模型
|
||||
3. 传入输入，执行预测
|
||||
|
||||
以 OCR 为例，在前端项目中，`@paddle-js-models/ocr`包的使用方式如下：
|
||||
|
||||
```
|
||||
// 1. 调用ocr模块
|
||||
import * as ocr from '@paddle-js-models/ocr';
|
||||
|
||||
// 2. 初始化ocr模型
|
||||
await ocr.init();
|
||||
|
||||
// 3. 传入HTMLImageElement类型的图像作为输入并获得结果
|
||||
const res = await ocr.recognize(img);
|
||||
|
||||
// 打印OCR模型得到的文本坐标以及文本内容
|
||||
console.log(res.text);
|
||||
console.log(res.points);
|
||||
```
|
||||
|
||||
<a name="3"></a>
|
||||
## 3. 模型替换
|
||||
|
||||
由于前端环境和计算资源限制，在前端部署深度学习模型时，我们对模型的性能有着更严格的要求，简单来说，模型需要足够轻量化。理论上模型的输入shape越小、模型大小越小，则对应的模型的flops越小，在前端运行也能更流畅。经验总结，使用`Paddle.js`部署的模型存储尽量不超过*5M*，实际情况根据硬件和计算资源情况决定。
|
||||
|
||||
在实际应用中，常常根据垂类的场景定制化模型，官方的demo支持修改传入参数替换模型。
|
||||
|
||||
以OCR demo为例，[ocr.init()函数](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/package/packages/paddlejs-models/ocr/src/index.ts#L52)中，包含默认初始化的模型链接，如果要替换模型参考下述步骤。
|
||||
|
||||
步骤1：将模型转成js格式：
|
||||
```
|
||||
# 安装paddlejsconverter
|
||||
pip3 install paddlejsconverter
|
||||
# 转换模型格式，输入模型为inference模型
|
||||
paddlejsconverter --modelPath=./inference.pdmodel --paramPath=./inference.pdiparams --outputDir=./ --useGPUOpt=True
|
||||
# 注意：useGPUOpt 选项默认不开启，如果模型用在 gpu backend（webgl/webgpu），则开启 useGPUOpt，如果模型运行在（wasm/plain js）则不要开启。
|
||||
```
|
||||
|
||||
导出成功后，本地目录下会出现 `model.json chunk_1.dat`等文件，分别是对应js模型的网络结构、模型参数二进制文件。
|
||||
|
||||
步骤2：将导出的js模型上传到支持跨域访问的服务器，服务器的CORS配置参考下图：
|
||||
|
||||
|
||||
|
||||
步骤3：修改代码替换默认的模型。以OCR demo为例，修改OCR web demo中[模型初始化代码](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/web_demo/src/pages/cv/ocr/TextRecognition/TextRecognition.vue#L64)，即
|
||||
|
||||
```
|
||||
await ocr.init();
|
||||
修改为：
|
||||
await ocr.init({modelPath: "https://js-models.bj.bcebos.com/PaddleOCR/PP-OCRv3/ch_PP-OCRv3_det_infer_js_960/model.json"}); # 第一个参数传入新的文本检测字典类型参数
|
||||
```
|
||||
|
||||
重新在demo目录下执行下述命令，即可体验新的模型效果。
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
|
||||
<a name="4"></a>
|
||||
## 4. 自定义前后处理参数
|
||||
|
||||
**自定义前处理参数**
|
||||
|
||||
在不同计算机视觉任务中，不同的模型可能有不同的预处理参数，比如mean,std,keep_ratio等参数，替换模型后也需要对预处理参数进行修改。paddle.js发布的npm包中提供了自定义预处理参数的简单方案。只需要在调用模型初始化函数时，传入自定义的参数即可。
|
||||
|
||||
```
|
||||
# 默认参数初始化
|
||||
await model.init();
|
||||
|
||||
自定义参数初始化
|
||||
const Config = {mean: [0.5, 0.5, 0.5], std: [0.5, 0.5, 0.5], keepratio: false};
|
||||
await model.init(Config);
|
||||
```
|
||||
|
||||
以OCR文本检测demo为例，修改模型前处理的mean和std参数，只需要在模型初始化时传入自定义的mean和std参数。
|
||||
```
|
||||
await ocr.init();
|
||||
修改为：
|
||||
const detConfig = {mean: [0.5, 0.5, 0.5], std: [0.5, 0.5, 0.5]};
|
||||
await ocr.init(detConfig); # 第一个参数传入新的文本检测模型链接
|
||||
```
|
||||
|
||||
**自定义后处理参数**
|
||||
|
||||
同理，paddle.js发布的npm包也提供了后处理参数的自定义方案。
|
||||
|
||||
```
|
||||
# 默认参数运行
|
||||
await model.predict();
|
||||
|
||||
# 自定义后处理参数
|
||||
const postConfig = {thresh: 0.5};
|
||||
await model.predict(Config);
|
||||
```
|
||||
|
||||
以OCR文本检测 demo为例，修改文本检测后处理的参数实现扩大文本检测框的效果，修改OCR web demo中执行[模型预测代码](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/web_demo/src/pages/cv/ocr/TextRecognition/TextRecognition.vue#L99)，即：
|
||||
|
||||
```
|
||||
const res = await ocr.recognize(img, { canvas: canvas.value });
|
||||
修改为：
|
||||
// 定义超参数，将unclip_ratio参数从1.5 增大为3.5
|
||||
const detConfig = {shape: 960, thresh: 0.3, box_thresh: 0.6, unclip_ratio:3.5};
|
||||
const res = await ocr.recognize(img, { canvas: canvas.value }, detConfig);
|
||||
```
|
||||
|
||||
注：不同的任务有不同的后处理参数，详细参数参考npm包中的API。
|
||||
|
||||
<a name="5"></a>
|
||||
## 5. 其他
|
||||
|
||||
`Paddle.js`转换后的模型不仅支持浏览器中使用，也可以在百度小程序和微信小程序环境下运行。
|
||||
|
||||
|名称|目录|
|
||||
|-|-|
|
||||
|OCR文本检测| [ocrdetecXcx](./mini_program/ocrdetectXcx/) |
|
||||
|OCR文本识别| [ocrXcx](./mini_program/ocrXcx/) |
|
||||
|目标检测| coming soon |
|
||||
|图像分割| coming soon |
|
||||
|物品分类| coming soon |
|
||||
@@ -1,176 +0,0 @@
|
||||
English | [简体中文](WebDemo.md)
|
||||
|
||||
# Introduction to Web Demo
|
||||
|
||||
- [Introduction](#0)
|
||||
- [1. Quick Start](#1)
|
||||
- [2. npm package call](#2)
|
||||
- [3. Model Replacement](#3)
|
||||
- [4. custom hyperparameters](#4)
|
||||
- [5. Other](#5)
|
||||
|
||||
<a name="0"></a>
|
||||
## Introduction
|
||||
|
||||
Based on [Paddle.js](https://github.com/PaddlePaddle/Paddle.js), this project implements computer vision tasks such as target detection, portrait segmentation, OCR, and item classification in the browser.
|
||||
|
||||
|
||||
|demo name|web demo component|source directory|npm package|
|
||||
|-|-|-|-|
|
||||
|Face Detection|[FaceDetection](./web_demo/src/pages/cv/detection/FaceDetection/)| [facedetect](./package/packages/paddlejs-models/facedetect)|[@paddle-js-models/ facedetect](https://www.npmjs.com/package/@paddle-js-models/facedetect)|
|
||||
|Screw Detection|[ScrewDetection](./web_demo/src/pages/cv/detection/ScrewDetection)| [detect](./package/packages/paddlejs-models/detect)|[@paddle-js-models/detect](https://www.npmjs.com/package/@paddle-js-models/detect)|
|
||||
|Portrait segmentation background replacement|[HumanSeg](./web_demo/src/pages/cv/segmentation/HumanSeg)|[humanseg](./package/packages/paddlejs-models/humanseg)|[@paddle-js-models/ humanseg](https://www.npmjs.com/package/@paddle-js-models/humanseg)|
|
||||
|Gesture Recognition AI Guessing Shell|[GestureRecognition](./web_demo/src/pages/cv/recognition/GestureRecognition)|[gesture](./package/packages/paddlejs-models/gesture)|[@paddle-js- models/gesture](https://www.npmjs.com/package/@paddle-js-models/gesture)|
|
||||
|1000 Item Identification|[ItemIdentification](./web_demo/src/pages/cv/recognition/ItemIdentification)|[mobilenet](./package/packages/paddlejs-models/mobilenet)|[@paddle-js-models/ mobilenet](https://www.npmjs.com/package/@paddle-js-models/mobilenet)|
|
||||
|Text Detection|[TextDetection](./web_demo/src/pages/cv/ocr/TextDetection)|[ocrdetection](./package/packages/paddlejs-models/ocrdetection)|[@paddle-js-models/ocrdet](https://www.npmjs.com/package/@paddle-js-models/ocrdet)|
|
||||
|Text Recognition|[TextRecognition](./web_demo/src/pages/cv/ocr/TextRecognition)|[ocr](./package/packages/paddlejs-models/ocr)|[@paddle-js-models/ocr](https://www.npmjs.com/package/@paddle-js-models/ocr)|
|
||||
|
||||
|
||||
<a name="1"></a>
|
||||
## 1. Quick Start
|
||||
|
||||
This section describes how to run the official demo directly in the browser.
|
||||
|
||||
**1. Install Node.js**
|
||||
|
||||
Download the `Node.js` installation package suitable for your platform from the `Node.js` official website https://nodejs.org/en/download/ and install it.
|
||||
|
||||
**2. Install demo dependencies and start**
|
||||
Execute the following command in the `./web_demo` directory:
|
||||
|
||||
````
|
||||
# install dependencies
|
||||
npm install
|
||||
# start demo
|
||||
npm run dev
|
||||
````
|
||||
|
||||
Open the URL `http://localhost:5173/main/index.html` in the browser to quickly experience running computer vision tasks in the browser.
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="2"></a>
|
||||
## 2. npm package call
|
||||
|
||||
This section introduces how to use npm packages. Each demo provides an easy-to-use interface. Users only need to initialize and upload images to get the results. The steps are as follows:
|
||||
1. Call the module
|
||||
2. Initialize the model
|
||||
3. Pass in input, perform prediction
|
||||
|
||||
Taking OCR as an example, in a front-end project, the `@paddle-js-models/ocr` package is used as follows:
|
||||
|
||||
````
|
||||
// 1. Call the ocr module
|
||||
import * as ocr from '@paddle-js-models/ocr';
|
||||
|
||||
// 2. Initialize the ocr model
|
||||
await ocr.init();
|
||||
|
||||
// 3. Pass in an image of type HTMLImageElement as input and get the result
|
||||
const res = await ocr.recognize(img);
|
||||
|
||||
// Print the text coordinates and text content obtained by the OCR model
|
||||
console.log(res.text);
|
||||
console.log(res.points);
|
||||
````
|
||||
|
||||
<a name="3"></a>
|
||||
## 3. Model replacement
|
||||
|
||||
Due to the limitations of the front-end environment and computing resources, when deploying deep learning models on the front-end, we have stricter requirements on the performance of the models. In short, the models need to be lightweight enough. In theory, the smaller the input shape of the model and the smaller the model size, the smaller the flops of the corresponding model, and the smoother the front-end operation. Based on experience, the model storage deployed with `Paddle.js` should not exceed *5M* as much as possible, and the actual situation depends on the hardware and computing resources.
|
||||
|
||||
In practical applications, models are often customized according to vertical scenarios, and the official demo supports modifying incoming parameters to replace models.
|
||||
|
||||
Take the OCR demo as an example, [ocr.init()function](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/package/packages/paddlejs-models/ocr/src/index.ts#L52), contains the default initialization model link, if you want to replace the model, please refer to the following steps.
|
||||
|
||||
Step 1: Convert the model to js format:
|
||||
````
|
||||
# Install paddlejsconverter
|
||||
pip3 install paddlejsconverter
|
||||
# Convert the model format, the input model is the inference model
|
||||
paddlejsconverter --modelPath=./inference.pdmodel --paramPath=./inference.pdiparams --outputDir=./ --useGPUOpt=True
|
||||
# Note: The useGPUOpt option is not enabled by default. If the model is used on the gpu backend (webgl/webgpu), enable useGPUOpt. If the model is running on (wasm/plain js), do not enable it.
|
||||
````
|
||||
|
||||
After the export is successful, files such as `model.json chunk_1.dat` will appear in the local directory, which are the network structure and model parameter binary files corresponding to the js model.
|
||||
|
||||
Step 2: Upload the exported js model to a server that supports cross-domain access. For the CORS configuration of the server, refer to the following image:
|
||||
|
||||
|
||||
|
||||
Step 3: Modify the code to replace the default model. Take the OCR demo as an example, modify the [model initialization code](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/web_demo/src/pages/cv/ocr/TextRecognition/TextRecognition.vue#L64) in the OCR web demo , i.e.
|
||||
|
||||
````
|
||||
await ocr.init();
|
||||
change into:
|
||||
await ocr.init({modelPath: "https://js-models.bj.bcebos.com/PaddleOCR/PP-OCRv3/ch_PP-OCRv3_det_infer_js_960/model.json"}); # The first parameter passes in the new text Check dictionary type parameter
|
||||
````
|
||||
|
||||
Re-execute the following command in the demo directory to experience the new model effect.
|
||||
````
|
||||
npm run dev
|
||||
````
|
||||
|
||||
<a name="4"></a>
|
||||
## 4. custom hyperparameters
|
||||
|
||||
**Custom preprocessing parameters**
|
||||
|
||||
In different computer vision tasks, different models may have different preprocessing parameters, such as mean, std, keep_ratio and other parameters. After replacing the model, the preprocessing parameters also need to be modified. A simple solution for customizing preprocessing parameters is provided in the npm package published by paddle.js. You only need to pass in custom parameters when calling the model initialization function.
|
||||
|
||||
````
|
||||
# Default parameter initialization
|
||||
await model.init();
|
||||
|
||||
Custom parameter initialization
|
||||
const Config = {mean: [0.5, 0.5, 0.5], std: [0.5, 0.5, 0.5], keepratio: false};
|
||||
await model.init(Config);
|
||||
````
|
||||
|
||||
Taking the OCR text detection demo as an example, to modify the mean and std parameters of the model preprocessing, you only need to pass in the custom mean and std parameters when the model is initialized.
|
||||
````
|
||||
await ocr.init();
|
||||
change into:
|
||||
const detConfig = {mean: [0.5, 0.5, 0.5], std: [0.5, 0.5, 0.5]};
|
||||
await ocr.init(detConfig); # The first parameter passes in the new text detection model link
|
||||
````
|
||||
|
||||
**Custom postprocessing parameters**
|
||||
|
||||
Similarly, the npm package published by paddle.js also provides a custom solution for post-processing parameters.
|
||||
|
||||
````
|
||||
# run with default parameters
|
||||
await model.predict();
|
||||
|
||||
# custom post-processing parameters
|
||||
const postConfig = {thresh: 0.5};
|
||||
await model.predict(Config);
|
||||
````
|
||||
|
||||
Take the OCR text detection demo as an example, modify the parameters of the text detection post-processing to achieve the effect of expanding the text detection frame, and modify the OCR web demo to execute the [model prediction code](https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/web_demo/src/pages/cv/ocr/TextRecognition/TextRecognition.vue#L99), ie:
|
||||
|
||||
````
|
||||
const res = await ocr.recognize(img, { canvas: canvas.value });
|
||||
change into:
|
||||
// Define hyperparameters, increase the unclip_ratio parameter from 1.5 to 3.5
|
||||
const detConfig = {shape: 960, thresh: 0.3, box_thresh: 0.6, unclip_ratio:3.5};
|
||||
const res = await ocr.recognize(img, { canvas: canvas.value }, detConfig);
|
||||
````
|
||||
|
||||
Note: Different tasks have different post-processing parameters. For detailed parameters, please refer to the API in the npm package.
|
||||
|
||||
<a name="5"></a>
|
||||
## 5. Others
|
||||
|
||||
The converted model of `Paddle.js` can not only be used in the browser, but also can be run in the Baidu mini-program and WeChat mini-program environment.
|
||||
|
||||
|Name|Directory|
|
||||
|-|-|
|
||||
|OCR Text Detection| [ocrdetecXcx](./mini_program/ocrdetectXcx/) |
|
||||
|OCR Text Recognition| [ocrXcx](./mini_program/ocrXcx/) |
|
||||
|target detection| coming soon |
|
||||
| Image segmentation | coming soon |
|
||||
|Item Category| coming soon |
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
[中文版](./DEVELOPMENT_cn.md)
|
||||
English | [简体中文](DEVELOPMENT_CN.md)
|
||||
# paddlejs-converter
|
||||
|
||||
paddlejs-converter is a model transformation tool for Paddle.js. Its role is to convert PaddlePaddle models (also known as fluid models) into a browser-friendly format that Paddle.js can use to load and predict usage in browsers as well as other environments. In addition, paddlejs-converter provides powerful model optimization capabilities to help developers optimize the model structure and improve runtime performance.
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
[English](./README.md)
|
||||
[English](DEVELOPMENT.md) | 简体中文
|
||||
# paddlejs-converter
|
||||
|
||||
paddlejs-converter 是适用于 Paddle.js 的模型转换工具，其作用是将 PaddlePaddle 模型（或称为 fluid 模型）转化为浏览器友好的格式，以供Paddle.js在浏览器等环境中加载预测使用。此外，paddlejs-converter 还提供了强大的模型优化能力，帮助开发者对模型结构进行优化，提高运行时性能。
|
||||
@@ -1,35 +1,35 @@
|
||||
简体中文 ｜ [English](RNN_EN.md)
|
||||
# RNN算子计算过程
|
||||
English | [简体中文](RNN_CN.md)
|
||||
# The computation process of RNN operator
|
||||
|
||||
## 一、RNN理解
|
||||
## 1. Understanding of RNN
|
||||
|
||||
**RNN** 是循环神经网络，由输入层、隐藏层和输出层组成，擅长对序列数据进行处理。
|
||||
**RNN** is a recurrent neural network, including an input layer, a hidden layer and an output layer, which is specialized in processing sequential data.
|
||||
|
||||
|
||||
paddle官网文档：https://www.paddlepaddle.org.cn/documentation/docs/zh/api/paddle/nn/RNN_cn.html#rnn
|
||||
paddle official document: https://www.paddlepaddle.org.cn/documentation/docs/zh/api/paddle/nn/RNN_cn.html#rnn
|
||||
|
||||
paddle源码实现：https://github.com/PaddlePaddle/Paddle/blob/develop/paddle/fluid/operators/rnn_op.h#L812
|
||||
paddle source code implementation: https://github.com/PaddlePaddle/Paddle/blob/develop/paddle/fluid/operators/rnn_op.h#L812
|
||||
|
||||
##二、RNN计算方式
|
||||
## 2. How to compute RNN
|
||||
|
||||
t 时刻，输入层为  ，隐藏层为  ，输出层为  。由上图可知， 的值不仅仅取决于  ，还取决于  。计算公式如下：
|
||||
At moment t, the input layer is , hidden layer is , output layer is . As the picture above, isn't just decided by ,it is also related to . The formula is as follows.:
|
||||
|
||||
|
||||
|
||||
## 三、pdjs中RNN算子实现
|
||||
## 3. RNN operator implementation in pdjs
|
||||
|
||||
因为 RNN 有梯度消失问题，不能获取更多上下文信息，所以 CRNN 中使用的是 **LSTM（Long Short Term Memory）**，LSTM 是一种特殊的 RNN，能够保存长期的依赖关系。
|
||||
Because the gradient disappearance problem exists in RNN, and more contextual information cannot be obtained, **LSTM (Long Short Term Memory)** is used in CRNN, which is a special kind of RNN that can preserve long-term dependencies.
|
||||
|
||||
基于图像的序列，两个方向的上下文是相互有用且互补的。由于 LSTM 是单向的，所以将两个 LSTM，一个向前和一个向后组合到一个**双向 LSTM** 中。此外，可以堆叠多层双向 LSTM。ch_PP-OCRv2_rec_infer 识别模型就是使用的双层双向 LSTM 结构。计算过程如下图所示：
|
||||
Based on the image sequence, the two directions of context are mutually useful and complementary. Since the LSTM is unidirectional, two LSTMs, one forward and one backward, are combined into a **bidirectional LSTM**. In addition, multiple layers of bidirectional LSTMs can be stacked. ch_PP-OCRv2_rec_infer recognition model is using a two-layer bidirectional LSTM structure. The calculation process is shown as follows.
|
||||
|
||||
#### 以ch_ppocr_mobile_v2.0_rec_infer 模型 rnn算子为例：
|
||||
#### Take ch_ppocr_mobile_v2.0_rec_infer model, rnn operator as an example
|
||||
```javascript
|
||||
{
|
||||
Attr: {
|
||||
mode: 'LSTM'
|
||||
// 是否双向，为true则正向反向都需要遍历
|
||||
// Whether bidirectional, if true, it is necessary to traverse both forward and reverse.
|
||||
is_bidirec: true
|
||||
// 隐藏层层数，代表循环次数
|
||||
// Number of hidden layers, representing the number of loops.
|
||||
num_layers: 2
|
||||
}
|
||||
|
||||
@@ -59,25 +59,22 @@ paddle源码实现：https://github.com/PaddlePaddle/Paddle/blob/develop/paddle/
|
||||
}
|
||||
```
|
||||
|
||||
#### 整体计算过程
|
||||
#### Overall computation process
|
||||
|
||||
#### rnn 计算中新增op：
|
||||
1）rnn_origin
|
||||
#### Add op in rnn calculation
|
||||
1) rnn_origin
|
||||
Formula: blas.MatMul(Input, WeightList_ih, blas_ih) + blas.MatMul(PreState, WeightList_hh, blas_hh)
|
||||
|
||||
计算公式： blas.MatMul(Input, WeightList_ih, blas_ih) + blas.MatMul(PreState, WeightList_hh, blas_hh)
|
||||
2) rnn_matmul
|
||||
Formula: rnn_matmul = rnn_origin + Matmul( $ S_{t-1} $, WeightList_hh)
|
||||
|
||||
2）rnn_matmul
|
||||
|
||||
计算公式：rnn_matmul = rnn_origin + Matmul( $ S_{t-1} $, WeightList_hh)
|
||||
|
||||
3）rnn_cell
|
||||
|
||||
计算方式：将rnn_matmul op输出结果分割成4份，每份执行不同激活函数计算，最后输出lstm_x_y.tmp_c[1, 1, 48]。x∈[0, 3]，y∈[0, 24]。
|
||||
详见算子实现：[rnn_cell](../paddlejs-backend-webgl/src/ops/shader/rnn/rnn_cell.ts)
|
||||
3) rnn_cell
|
||||
Method: Split the rnn_matmul op output into 4 copies, each copy performs a different activation function calculation, and finally outputs lstm_x_y.tmp_c[1, 1, 48]. x∈[0, 3], y∈[0, 24].
|
||||
For details, please refer to [rnn_cell](../paddlejs-backend-webgl/src/ops/shader/rnn/rnn_cell.ts).
|
||||
|
||||
|
||||
4）rnn_hidden
|
||||
计算方式：将rnn_matmul op输出结果分割成4份，每份执行不同激活函数计算，最后输出lstm_x_y.tmp_h[1, 1, 48]。x∈[0, 3]，y∈[0, 24]。
|
||||
详见算子实现：[rnn_hidden](../paddlejs-backend-webgl/src/ops/shader/rnn/rnn_hidden.ts)
|
||||
4) rnn_hidden
|
||||
Split the rnn_matmul op output into 4 copies, each copy performs a different activation function calculation, and finally outputs lstm_x_y.tmp_h[1, 1, 48]. x∈[0, 3], y∈[0, 24].
|
||||
For details, please refer to [rnn_hidden](../paddlejs-backend-webgl/src/ops/shader/rnn/rnn_hidden.ts).
|
||||
|
||||
|
||||
|
||||
83
examples/application/js/converter/RNN_CN.md
Normal file
83
examples/application/js/converter/RNN_CN.md
Normal file
@@ -0,0 +1,83 @@
|
||||
简体中文 ｜ [English](RNN.md)
|
||||
# RNN算子计算过程
|
||||
|
||||
## 一、RNN理解
|
||||
|
||||
**RNN** 是循环神经网络，由输入层、隐藏层和输出层组成，擅长对序列数据进行处理。
|
||||
|
||||
|
||||
paddle官网文档：https://www.paddlepaddle.org.cn/documentation/docs/zh/api/paddle/nn/RNN_cn.html#rnn
|
||||
|
||||
paddle源码实现：https://github.com/PaddlePaddle/Paddle/blob/develop/paddle/fluid/operators/rnn_op.h#L812
|
||||
|
||||
##二、RNN计算方式
|
||||
|
||||
t 时刻，输入层为  ，隐藏层为  ，输出层为  。由上图可知， 的值不仅仅取决于  ，还取决于  。计算公式如下：
|
||||
|
||||
|
||||
|
||||
## 三、pdjs中RNN算子实现
|
||||
|
||||
因为 RNN 有梯度消失问题，不能获取更多上下文信息，所以 CRNN 中使用的是 **LSTM（Long Short Term Memory）**，LSTM 是一种特殊的 RNN，能够保存长期的依赖关系。
|
||||
|
||||
基于图像的序列，两个方向的上下文是相互有用且互补的。由于 LSTM 是单向的，所以将两个 LSTM，一个向前和一个向后组合到一个**双向 LSTM** 中。此外，可以堆叠多层双向 LSTM。ch_PP-OCRv2_rec_infer 识别模型就是使用的双层双向 LSTM 结构。计算过程如下图所示：
|
||||
|
||||
#### 以ch_ppocr_mobile_v2.0_rec_infer 模型 rnn算子为例：
|
||||
```javascript
|
||||
{
|
||||
Attr: {
|
||||
mode: 'LSTM'
|
||||
// 是否双向，为true则正向反向都需要遍历
|
||||
is_bidirec: true
|
||||
// 隐藏层层数，代表循环次数
|
||||
num_layers: 2
|
||||
}
|
||||
|
||||
Input: [
|
||||
transpose_1.tmp_0[25, 1, 288]
|
||||
]
|
||||
|
||||
PreState: [
|
||||
fill_constant_batch_size_like_0.tmp_0[4, 1, 48],
|
||||
fill_constant_batch_size_like_1.tmp_0[4, 1, 48]
|
||||
]
|
||||
|
||||
WeightList: [
|
||||
lstm_cell_0.w_0[192, 288], lstm_cell_0.w_1[192, 48],
|
||||
lstm_cell_1.w_0[192, 288], lstm_cell_1.w_1[192, 48],
|
||||
lstm_cell_2.w_0[192, 96], lstm_cell_2.w_1[192, 48],
|
||||
lstm_cell_3.w_0[192, 96], lstm_cell_3.w_1[192, 48],
|
||||
lstm_cell_0.b_0[192], lstm_cell_0.b_1[192],
|
||||
lstm_cell_1.b_0[192], lstm_cell_1.b_1[192],
|
||||
lstm_cell_2.b_0[192], lstm_cell_2.b_1[192],
|
||||
lstm_cell_3.b_0[192], lstm_cell_3.b_1[192]
|
||||
]
|
||||
|
||||
Output: [
|
||||
lstm_0.tmp_0[25, 1, 96]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### 整体计算过程
|
||||
|
||||
#### rnn 计算中新增op：
|
||||
1）rnn_origin
|
||||
|
||||
计算公式： blas.MatMul(Input, WeightList_ih, blas_ih) + blas.MatMul(PreState, WeightList_hh, blas_hh)
|
||||
|
||||
2）rnn_matmul
|
||||
|
||||
计算公式：rnn_matmul = rnn_origin + Matmul( $ S_{t-1} $, WeightList_hh)
|
||||
|
||||
3）rnn_cell
|
||||
|
||||
计算方式：将rnn_matmul op输出结果分割成4份，每份执行不同激活函数计算，最后输出lstm_x_y.tmp_c[1, 1, 48]。x∈[0, 3]，y∈[0, 24]。
|
||||
详见算子实现：[rnn_cell](../paddlejs-backend-webgl/src/ops/shader/rnn/rnn_cell.ts)
|
||||
|
||||
|
||||
4）rnn_hidden
|
||||
计算方式：将rnn_matmul op输出结果分割成4份，每份执行不同激活函数计算，最后输出lstm_x_y.tmp_h[1, 1, 48]。x∈[0, 3]，y∈[0, 24]。
|
||||
详见算子实现：[rnn_hidden](../paddlejs-backend-webgl/src/ops/shader/rnn/rnn_hidden.ts)
|
||||
|
||||
|
||||
@@ -1,80 +0,0 @@
|
||||
English | [简体中文](RNN.md)
|
||||
# The computation process of RNN operator
|
||||
|
||||
## 1. Understanding of RNN
|
||||
|
||||
**RNN** is a recurrent neural network, including an input layer, a hidden layer and an output layer, which is specialized in processing sequential data.
|
||||
|
||||
|
||||
paddle official document: https://www.paddlepaddle.org.cn/documentation/docs/zh/api/paddle/nn/RNN_cn.html#rnn
|
||||
|
||||
paddle source code implementation: https://github.com/PaddlePaddle/Paddle/blob/develop/paddle/fluid/operators/rnn_op.h#L812
|
||||
|
||||
## 2. How to compute RNN
|
||||
|
||||
At moment t, the input layer is , hidden layer is , output layer is . As the picture above, isn't just decided by ,it is also related to . The formula is as follows.:
|
||||
|
||||
|
||||
|
||||
## 3. RNN operator implementation in pdjs
|
||||
|
||||
Because the gradient disappearance problem exists in RNN, and more contextual information cannot be obtained, **LSTM (Long Short Term Memory)** is used in CRNN, which is a special kind of RNN that can preserve long-term dependencies.
|
||||
|
||||
Based on the image sequence, the two directions of context are mutually useful and complementary. Since the LSTM is unidirectional, two LSTMs, one forward and one backward, are combined into a **bidirectional LSTM**. In addition, multiple layers of bidirectional LSTMs can be stacked. ch_PP-OCRv2_rec_infer recognition model is using a two-layer bidirectional LSTM structure. The calculation process is shown as follows.
|
||||
|
||||
#### Take ch_ppocr_mobile_v2.0_rec_infer model, rnn operator as an example
|
||||
```javascript
|
||||
{
|
||||
Attr: {
|
||||
mode: 'LSTM'
|
||||
// Whether bidirectional, if true, it is necessary to traverse both forward and reverse.
|
||||
is_bidirec: true
|
||||
// Number of hidden layers, representing the number of loops.
|
||||
num_layers: 2
|
||||
}
|
||||
|
||||
Input: [
|
||||
transpose_1.tmp_0[25, 1, 288]
|
||||
]
|
||||
|
||||
PreState: [
|
||||
fill_constant_batch_size_like_0.tmp_0[4, 1, 48],
|
||||
fill_constant_batch_size_like_1.tmp_0[4, 1, 48]
|
||||
]
|
||||
|
||||
WeightList: [
|
||||
lstm_cell_0.w_0[192, 288], lstm_cell_0.w_1[192, 48],
|
||||
lstm_cell_1.w_0[192, 288], lstm_cell_1.w_1[192, 48],
|
||||
lstm_cell_2.w_0[192, 96], lstm_cell_2.w_1[192, 48],
|
||||
lstm_cell_3.w_0[192, 96], lstm_cell_3.w_1[192, 48],
|
||||
lstm_cell_0.b_0[192], lstm_cell_0.b_1[192],
|
||||
lstm_cell_1.b_0[192], lstm_cell_1.b_1[192],
|
||||
lstm_cell_2.b_0[192], lstm_cell_2.b_1[192],
|
||||
lstm_cell_3.b_0[192], lstm_cell_3.b_1[192]
|
||||
]
|
||||
|
||||
Output: [
|
||||
lstm_0.tmp_0[25, 1, 96]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### Overall computation process
|
||||
|
||||
#### Add op in rnn calculation
|
||||
1) rnn_origin
|
||||
Formula: blas.MatMul(Input, WeightList_ih, blas_ih) + blas.MatMul(PreState, WeightList_hh, blas_hh)
|
||||
|
||||
2) rnn_matmul
|
||||
Formula: rnn_matmul = rnn_origin + Matmul( $ S_{t-1} $, WeightList_hh)
|
||||
|
||||
3) rnn_cell
|
||||
Method: Split the rnn_matmul op output into 4 copies, each copy performs a different activation function calculation, and finally outputs lstm_x_y.tmp_c[1, 1, 48]. x∈[0, 3], y∈[0, 24].
|
||||
For details, please refer to [rnn_cell](../paddlejs-backend-webgl/src/ops/shader/rnn/rnn_cell.ts).
|
||||
|
||||
|
||||
4) rnn_hidden
|
||||
Split the rnn_matmul op output into 4 copies, each copy performs a different activation function calculation, and finally outputs lstm_x_y.tmp_h[1, 1, 48]. x∈[0, 3], y∈[0, 24].
|
||||
For details, please refer to [rnn_hidden](../paddlejs-backend-webgl/src/ops/shader/rnn/rnn_hidden.ts).
|
||||
|
||||
|
||||
@@ -1,84 +1,84 @@
|
||||
[English](README_en.md) | 简体中文
|
||||
English | [简体中文](README_CN.md)
|
||||
|
||||
# Paddle.js微信小程序Demo
|
||||
# Paddle.js WeChat mini-program Demo
|
||||
|
||||
- [1.简介](#1)
|
||||
- [2. 项目启动](#2)
|
||||
* [2.1 准备工作](#21)
|
||||
* [2.2 启动步骤](#22)
|
||||
* [2.3 效果展示](#23)
|
||||
- [3. 模型推理pipeline](#3)
|
||||
- [4. 常见问题](#4)
|
||||
- [1. Introduction](#1)
|
||||
- [2. Project Start](#2)
|
||||
* [2.1 Preparations](#21)
|
||||
* [2.2 Startup steps](#22)
|
||||
* [2.3 visualization](#23)
|
||||
- [3. Model inference pipeline](#3)
|
||||
- [4. FAQ](#4)
|
||||
|
||||
<a name="1"></a>
|
||||
## 1.简介
|
||||
## 1 Introduction
|
||||
|
||||
|
||||
本目录下包含文本检测、文本识别小程序demo，通过使用 [Paddle.js](https://github.com/PaddlePaddle/Paddle.js) 以及 [Paddle.js微信小程序插件](https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx7138a7bb793608c3&token=956931339&lang=zh_CN) 完成在小程序上利用用户终端算力实现文本检测框选效果。
|
||||
This directory contains the text detection, text recognition mini-program demo, by using [Paddle.js](https://github.com/PaddlePaddle/Paddle.js) and [Paddle.js WeChat mini-program plugin](https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx7138a7bb793608c3&token=956931339&lang=zh_CN) to complete the text detection frame selection effect on the mini-program using the computing power of the user terminal.
|
||||
|
||||
<a name="2"></a>
|
||||
## 2. 项目启动
|
||||
## 2. Project start
|
||||
|
||||
<a name="21"></a>
|
||||
### 2.1 准备工作
|
||||
* [申请微信小程序账号](https://mp.weixin.qq.com/)
|
||||
* [微信小程序开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
|
||||
* 前端开发环境准备：node、npm
|
||||
* 小程序管理后台配置服务器域名，或打开开发者工具【不校验合法域名】
|
||||
### 2.1 Preparations
|
||||
* [Apply for a WeChat mini-program account](https://mp.weixin.qq.com/)
|
||||
* [WeChat Mini Program Developer Tools](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
|
||||
* Front-end development environment preparation: node, npm
|
||||
* Configure the server domain name in the mini-program management background, or open the developer tool [do not verify the legal domain name]
|
||||
|
||||
详情参考:https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1132303404&lang=zh_CN)
|
||||
For details, please refer to [document.](https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1132303404&lang=zh_CN)
|
||||
|
||||
<a name="22"></a>
|
||||
### 2.2 启动步骤
|
||||
### 2.2 Startup steps
|
||||
|
||||
#### **1. 克隆Demo代码**
|
||||
```sh
|
||||
#### **1. Clone the demo code**
|
||||
````sh
|
||||
git clone https://github.com/PaddlePaddle/FastDeploy
|
||||
cd FastDeploy/examples/application/js/mini_program
|
||||
```
|
||||
````
|
||||
|
||||
#### **2. 进入小程序目录，安装依赖**
|
||||
#### **2. Enter the mini-program directory and install dependencies**
|
||||
|
||||
```sh
|
||||
# 运行文本识别demo，进入到ocrXcx目录
|
||||
````sh
|
||||
# Run the text recognition demo and enter the ocrXcx directory
|
||||
cd ./ocrXcx && npm install
|
||||
# 运行文本检测demo，进入到ocrdetectXcx目录
|
||||
# Run the text detection demo and enter the ocrdetectXcx directory
|
||||
# cd ./ocrdetectXcx && npm install
|
||||
```
|
||||
````
|
||||
|
||||
#### **3. 微信小程序导入代码**
|
||||
打开微信开发者工具 --> 导入 --> 选定目录，输入相关信息
|
||||
#### **3. WeChat mini-program import code**
|
||||
Open WeChat Developer Tools --> Import --> Select a directory and enter relevant information
|
||||
|
||||
#### **4. 添加 Paddle.js微信小程序插件**
|
||||
小程序管理界面 --> 设置 --> 第三方设置 --> 插件管理 --> 添加插件 --> 搜索 `wx7138a7bb793608c3` 并添加
|
||||
[参考文档](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html)
|
||||
#### **4. Add Paddle.js WeChat mini-program plugin**
|
||||
Mini Program Management Interface --> Settings --> Third Party Settings --> Plugin Management --> Add Plugins --> Search for `wx7138a7bb793608c3` and add
|
||||
[Reference document](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html)
|
||||
|
||||
#### **5. 构建依赖**
|
||||
点击开发者工具中的菜单栏：工具 --> 构建 npm
|
||||
#### **5. Build dependencies**
|
||||
Click on the menu bar in the developer tools: Tools --> Build npm
|
||||
|
||||
原因：node_modules 目录不会参与编译、上传和打包中，小程序想要使用 npm 包必须走一遍“构建 npm”的过程，构建完成会生成一个 miniprogram_npm 目录，里面会存放构建打包后的 npm 包，也就是小程序真正使用的 npm 包。*
|
||||
[参考文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)
|
||||
Reason: The node_modules directory will not be involved in compiling, uploading and packaging. If a small program wants to use npm packages, it must go through the process of "building npm". After the construction is completed, a miniprogram_npm directory will be generated, which will store the built and packaged npm packages. It is the npm package that the mini-program actually uses. *
|
||||
[Reference Documentation](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)
|
||||
|
||||
<a name="23"></a>
|
||||
### 2.3 效果展示
|
||||
### 2.3 visualization
|
||||
|
||||
<img src="https://user-images.githubusercontent.com/43414102/157648579-cdbbee61-9866-4364-9edd-a97ac0eda0c1.png" width="300px">
|
||||
|
||||
<a name="3"></a>
|
||||
## 3. 模型推理pipeline
|
||||
## 3. Model inference pipeline
|
||||
|
||||
```typescript
|
||||
// 引入 paddlejs 和 paddlejs-plugin，注册小程序环境变量和合适的 backend
|
||||
// Introduce paddlejs and paddlejs-plugin, register the mini-program environment variables and the appropriate backend
|
||||
import * as paddlejs from '@paddlejs/paddlejs-core';
|
||||
import '@paddlejs/paddlejs-backend-webgl';
|
||||
const plugin = requirePlugin('paddlejs-plugin');
|
||||
plugin.register(paddlejs, wx);
|
||||
|
||||
// 初始化推理引擎
|
||||
const runner = new paddlejs.Runner({modelPath, feedShape, mean, std});
|
||||
// Initialize the inference engine
|
||||
const runner = new paddlejs.Runner({modelPath, feedShape, mean, std});
|
||||
await runner.init();
|
||||
|
||||
// 获取图像信息
|
||||
// get image information
|
||||
wx.canvasGetImageData({
|
||||
canvasId: canvasId,
|
||||
x: 0,
|
||||
@@ -86,41 +86,40 @@ wx.canvasGetImageData({
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
success(res) {
|
||||
// 推理预测
|
||||
// inference prediction
|
||||
runner.predict({
|
||||
data: res.data,
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
}, function (data) {
|
||||
// 获取推理结果
|
||||
// get the inference result
|
||||
console.log(data)
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
````
|
||||
|
||||
<a name="4"></a>
|
||||
## 4. 常见问题
|
||||
## 4. FAQ
|
||||
|
||||
- 4.1 出现报错 `Invalid context type [webgl2] for Canvas#getContext`
|
||||
- 4.1 An error occurs `Invalid context type [webgl2] for Canvas#getContext`
|
||||
|
||||
**答:** 可以不管，不影响正常代码运行和demo功能
|
||||
**A:** You can leave it alone, it will not affect the normal code operation and demo function
|
||||
|
||||
- 4.2 预览看不到结果
|
||||
- 4.2 Preview can't see the result
|
||||
|
||||
**答:** 建议尝试真机调试
|
||||
**A:** It is recommended to try real machine debugging
|
||||
|
||||
- 4.3 微信开发者工具出现黑屏，然后出现超多报错
|
||||
- 4.3 A black screen appears in the WeChat developer tool, and then there are too many errors
|
||||
|
||||
**答:** 重启微信开发者工具
|
||||
**A:** Restart WeChat Developer Tools
|
||||
|
||||
- 4.4 模拟和真机调试结果不一致；模拟检测不到文本等
|
||||
- 4.4 The debugging results of the simulation and the real machine are inconsistent; the simulation cannot detect the text, etc.
|
||||
|
||||
**答:** 可以以真机为准；模拟检测不到文本等可以尝试随意改动下代码（增删换行等）再点击编译
|
||||
**A:** The real machine can prevail;
|
||||
If the simulation cannot detect the text, etc., you can try to change the code at will (add, delete, newline, etc.) and then click to compile
|
||||
|
||||
|
||||
- 4.5 手机调试或运行时出现 长时间无反应等提示
|
||||
|
||||
**答:** 请继续等待，模型推理需要一定时间
|
||||
|
||||
- 4.5 Prompts such as no response for a long time appear when the phone is debugged or running
|
||||
|
||||
**A:** Please continue to wait, model inference will take some time
|
||||
|
||||
126
examples/application/js/mini_program/README_CN.md
Normal file
126
examples/application/js/mini_program/README_CN.md
Normal file
@@ -0,0 +1,126 @@
|
||||
[English](README.md) | 简体中文
|
||||
|
||||
# Paddle.js微信小程序Demo
|
||||
|
||||
- [1.简介](#1)
|
||||
- [2. 项目启动](#2)
|
||||
* [2.1 准备工作](#21)
|
||||
* [2.2 启动步骤](#22)
|
||||
* [2.3 效果展示](#23)
|
||||
- [3. 模型推理pipeline](#3)
|
||||
- [4. 常见问题](#4)
|
||||
|
||||
<a name="1"></a>
|
||||
## 1.简介
|
||||
|
||||
|
||||
本目录下包含文本检测、文本识别小程序demo，通过使用 [Paddle.js](https://github.com/PaddlePaddle/Paddle.js) 以及 [Paddle.js微信小程序插件](https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx7138a7bb793608c3&token=956931339&lang=zh_CN) 完成在小程序上利用用户终端算力实现文本检测框选效果。
|
||||
|
||||
<a name="2"></a>
|
||||
## 2. 项目启动
|
||||
|
||||
<a name="21"></a>
|
||||
### 2.1 准备工作
|
||||
* [申请微信小程序账号](https://mp.weixin.qq.com/)
|
||||
* [微信小程序开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
|
||||
* 前端开发环境准备：node、npm
|
||||
* 小程序管理后台配置服务器域名，或打开开发者工具【不校验合法域名】
|
||||
|
||||
详情参考:https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1132303404&lang=zh_CN)
|
||||
|
||||
<a name="22"></a>
|
||||
### 2.2 启动步骤
|
||||
|
||||
#### **1. 克隆Demo代码**
|
||||
```sh
|
||||
git clone https://github.com/PaddlePaddle/FastDeploy
|
||||
cd FastDeploy/examples/application/js/mini_program
|
||||
```
|
||||
|
||||
#### **2. 进入小程序目录，安装依赖**
|
||||
|
||||
```sh
|
||||
# 运行文本识别demo，进入到ocrXcx目录
|
||||
cd ./ocrXcx && npm install
|
||||
# 运行文本检测demo，进入到ocrdetectXcx目录
|
||||
# cd ./ocrdetectXcx && npm install
|
||||
```
|
||||
|
||||
#### **3. 微信小程序导入代码**
|
||||
打开微信开发者工具 --> 导入 --> 选定目录，输入相关信息
|
||||
|
||||
#### **4. 添加 Paddle.js微信小程序插件**
|
||||
小程序管理界面 --> 设置 --> 第三方设置 --> 插件管理 --> 添加插件 --> 搜索 `wx7138a7bb793608c3` 并添加
|
||||
[参考文档](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html)
|
||||
|
||||
#### **5. 构建依赖**
|
||||
点击开发者工具中的菜单栏：工具 --> 构建 npm
|
||||
|
||||
原因：node_modules 目录不会参与编译、上传和打包中，小程序想要使用 npm 包必须走一遍“构建 npm”的过程，构建完成会生成一个 miniprogram_npm 目录，里面会存放构建打包后的 npm 包，也就是小程序真正使用的 npm 包。*
|
||||
[参考文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)
|
||||
|
||||
<a name="23"></a>
|
||||
### 2.3 效果展示
|
||||
|
||||
<img src="https://user-images.githubusercontent.com/43414102/157648579-cdbbee61-9866-4364-9edd-a97ac0eda0c1.png" width="300px">
|
||||
|
||||
<a name="3"></a>
|
||||
## 3. 模型推理pipeline
|
||||
|
||||
```typescript
|
||||
// 引入 paddlejs 和 paddlejs-plugin，注册小程序环境变量和合适的 backend
|
||||
import * as paddlejs from '@paddlejs/paddlejs-core';
|
||||
import '@paddlejs/paddlejs-backend-webgl';
|
||||
const plugin = requirePlugin('paddlejs-plugin');
|
||||
plugin.register(paddlejs, wx);
|
||||
|
||||
// 初始化推理引擎
|
||||
const runner = new paddlejs.Runner({modelPath, feedShape, mean, std});
|
||||
await runner.init();
|
||||
|
||||
// 获取图像信息
|
||||
wx.canvasGetImageData({
|
||||
canvasId: canvasId,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
success(res) {
|
||||
// 推理预测
|
||||
runner.predict({
|
||||
data: res.data,
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
}, function (data) {
|
||||
// 获取推理结果
|
||||
console.log(data)
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
<a name="4"></a>
|
||||
## 4. 常见问题
|
||||
|
||||
- 4.1 出现报错 `Invalid context type [webgl2] for Canvas#getContext`
|
||||
|
||||
**答:** 可以不管，不影响正常代码运行和demo功能
|
||||
|
||||
- 4.2 预览看不到结果
|
||||
|
||||
**答:** 建议尝试真机调试
|
||||
|
||||
- 4.3 微信开发者工具出现黑屏，然后出现超多报错
|
||||
|
||||
**答:** 重启微信开发者工具
|
||||
|
||||
- 4.4 模拟和真机调试结果不一致；模拟检测不到文本等
|
||||
|
||||
**答:** 可以以真机为准；模拟检测不到文本等可以尝试随意改动下代码（增删换行等）再点击编译
|
||||
|
||||
|
||||
- 4.5 手机调试或运行时出现 长时间无反应等提示
|
||||
|
||||
**答:** 请继续等待，模型推理需要一定时间
|
||||
|
||||
|
||||
@@ -1,125 +0,0 @@
|
||||
English | [中文](README.md)
|
||||
|
||||
# Paddle.js WeChat mini-program Demo
|
||||
|
||||
- [1. Introduction](#1)
|
||||
- [2. Project Start](#2)
|
||||
* [2.1 Preparations](#21)
|
||||
* [2.2 Startup steps](#22)
|
||||
* [2.3 visualization](#23)
|
||||
- [3. Model inference pipeline](#3)
|
||||
- [4. FAQ](#4)
|
||||
|
||||
<a name="1"></a>
|
||||
## 1 Introduction
|
||||
|
||||
|
||||
This directory contains the text detection, text recognition mini-program demo, by using [Paddle.js](https://github.com/PaddlePaddle/Paddle.js) and [Paddle.js WeChat mini-program plugin](https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx7138a7bb793608c3&token=956931339&lang=zh_CN) to complete the text detection frame selection effect on the mini-program using the computing power of the user terminal.
|
||||
|
||||
<a name="2"></a>
|
||||
## 2. Project start
|
||||
|
||||
<a name="21"></a>
|
||||
### 2.1 Preparations
|
||||
* [Apply for a WeChat mini-program account](https://mp.weixin.qq.com/)
|
||||
* [WeChat Mini Program Developer Tools](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
|
||||
* Front-end development environment preparation: node, npm
|
||||
* Configure the server domain name in the mini-program management background, or open the developer tool [do not verify the legal domain name]
|
||||
|
||||
For details, please refer to [document.](https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1132303404&lang=zh_CN)
|
||||
|
||||
<a name="22"></a>
|
||||
### 2.2 Startup steps
|
||||
|
||||
#### **1. Clone the demo code**
|
||||
````sh
|
||||
git clone https://github.com/PaddlePaddle/FastDeploy
|
||||
cd FastDeploy/examples/application/js/mini_program
|
||||
````
|
||||
|
||||
#### **2. Enter the mini-program directory and install dependencies**
|
||||
|
||||
````sh
|
||||
# Run the text recognition demo and enter the ocrXcx directory
|
||||
cd ./ocrXcx && npm install
|
||||
# Run the text detection demo and enter the ocrdetectXcx directory
|
||||
# cd ./ocrdetectXcx && npm install
|
||||
````
|
||||
|
||||
#### **3. WeChat mini-program import code**
|
||||
Open WeChat Developer Tools --> Import --> Select a directory and enter relevant information
|
||||
|
||||
#### **4. Add Paddle.js WeChat mini-program plugin**
|
||||
Mini Program Management Interface --> Settings --> Third Party Settings --> Plugin Management --> Add Plugins --> Search for `wx7138a7bb793608c3` and add
|
||||
[Reference document](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html)
|
||||
|
||||
#### **5. Build dependencies**
|
||||
Click on the menu bar in the developer tools: Tools --> Build npm
|
||||
|
||||
Reason: The node_modules directory will not be involved in compiling, uploading and packaging. If a small program wants to use npm packages, it must go through the process of "building npm". After the construction is completed, a miniprogram_npm directory will be generated, which will store the built and packaged npm packages. It is the npm package that the mini-program actually uses. *
|
||||
[Reference Documentation](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)
|
||||
|
||||
<a name="23"></a>
|
||||
### 2.3 visualization
|
||||
|
||||
<img src="https://user-images.githubusercontent.com/43414102/157648579-cdbbee61-9866-4364-9edd-a97ac0eda0c1.png" width="300px">
|
||||
|
||||
<a name="3"></a>
|
||||
## 3. Model inference pipeline
|
||||
|
||||
```typescript
|
||||
// Introduce paddlejs and paddlejs-plugin, register the mini-program environment variables and the appropriate backend
|
||||
import * as paddlejs from '@paddlejs/paddlejs-core';
|
||||
import '@paddlejs/paddlejs-backend-webgl';
|
||||
const plugin = requirePlugin('paddlejs-plugin');
|
||||
plugin.register(paddlejs, wx);
|
||||
|
||||
// Initialize the inference engine
|
||||
const runner = new paddlejs.Runner({modelPath, feedShape, mean, std});
|
||||
await runner.init();
|
||||
|
||||
// get image information
|
||||
wx.canvasGetImageData({
|
||||
canvasId: canvasId,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
success(res) {
|
||||
// inference prediction
|
||||
runner.predict({
|
||||
data: res.data,
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
}, function (data) {
|
||||
// get the inference result
|
||||
console.log(data)
|
||||
});
|
||||
}
|
||||
});
|
||||
````
|
||||
|
||||
<a name="4"></a>
|
||||
## 4. FAQ
|
||||
|
||||
- 4.1 An error occurs `Invalid context type [webgl2] for Canvas#getContext`
|
||||
|
||||
**A:** You can leave it alone, it will not affect the normal code operation and demo function
|
||||
|
||||
- 4.2 Preview can't see the result
|
||||
|
||||
**A:** It is recommended to try real machine debugging
|
||||
|
||||
- 4.3 A black screen appears in the WeChat developer tool, and then there are too many errors
|
||||
|
||||
**A:** Restart WeChat Developer Tools
|
||||
|
||||
- 4.4 The debugging results of the simulation and the real machine are inconsistent; the simulation cannot detect the text, etc.
|
||||
|
||||
**A:** The real machine can prevail;
|
||||
If the simulation cannot detect the text, etc., you can try to change the code at will (add, delete, newline, etc.) and then click to compile
|
||||
|
||||
|
||||
- 4.5 Prompts such as no response for a long time appear when the phone is debugged or running
|
||||
|
||||
**A:** Please continue to wait, model inference will take some time
|
||||
@@ -1,43 +1,41 @@
|
||||
[English](README_en.md) | 简体中文
|
||||
English | [简体中文](README_CN.md)
|
||||
|
||||
# Paddle.js Model Module介绍
|
||||
# Introduction to Paddle.js Demo Module
|
||||
|
||||
该部分是基于 Paddle.js 进行开发的模型库，主要提供 Web 端可直接引入使用模型的能力。
|
||||
This part is a model library developed based on Paddle.js, which mainly provides the ability to directly introduce and use models on the web side.
|
||||
|
||||
| demo名称 | 源码目录 | npm包 |
|
||||
| ---------------- | ------------------------------------------------------ | ------------------------------------------------------------ |
|
||||
| 人脸检测 | [facedetect](./packages/paddlejs-models/facedetect) | [@paddle-js-models/facedetect](https://www.npmjs.com/package/@paddle-js-models/facedetect) |
|
||||
| 螺丝钉检测 | [detect](./packages/paddlejs-models/detect) | [@paddle-js-models/detect](https://www.npmjs.com/package/@paddle-js-models/detect) |
|
||||
| 人像分割背景替换 | [humanseg](./packages/paddlejs-models/humanseg) | [@paddle-js-models/humanseg](https://www.npmjs.com/package/@paddle-js-models/humanseg) |
|
||||
| 手势识别AI猜丁壳 | [gesture](./packages/paddlejs-models/gesture) | [@paddle-js-models/gesture](https://www.npmjs.com/package/@paddle-js-models/gesture) |
|
||||
| 1000种物品识别 | [mobilenet](./packages/paddlejs-models/mobilenet) | [@paddle-js-models/mobilenet](https://www.npmjs.com/package/@paddle-js-models/mobilenet) |
|
||||
| 文本检测 | [ocrdetection](./packages/paddlejs-models/ocrdetection) | [@paddle-js-models/ocrdet](https://www.npmjs.com/package/@paddle-js-models/ocrdet) |
|
||||
| 文本识别 | [ocr](./packages/paddlejs-models/ocr) | [@paddle-js-models/ocr](https://www.npmjs.com/package/@paddle-js-models/ocr) |
|
||||
| demo name | source directory | npm package |
|
||||
| - | - | - |
|
||||
| face detection | [facedetect](./packages/paddlejs-models/facedetect) | [@paddle-js-models/facedetect](https://www.npmjs.com/package/@paddle-js-models/facedetect) |
|
||||
| Screw detection | [detect](./packages/paddlejs-models/detect) | [@paddle-js-models/detect](https://www.npmjs.com/package/@paddle-js-models/detect ) |
|
||||
| Portrait segmentation background replacement | [humanseg](./packages/paddlejs-models/humanseg) | [@paddle-js-models/humanseg](https://www.npmjs.com/package/@paddle-js-models/humanseg) |
|
||||
| Gesture Recognition AI Guessing Shell | [gesture](./packages/paddlejs-models/gesture) | [@paddle-js-models/gesture](https://www.npmjs.com/package/@paddle-js-models/gesture) |
|
||||
| 1000 Item Recognition | [mobilenet](./packages/paddlejs-models/mobilenet) | [@paddle-js-models/mobilenet](https://www.npmjs.com/package/@paddle-js-models/mobilenet) |
|
||||
| Text Detection | [ocrdetection](./packages/paddlejs-models/ocrdetection) | [@paddle-js-models/ocrdet](https://www.npmjs.com/package/@paddle-js-models/ocrdet ) |
|
||||
| Text Recognition | [ocr](./packages/paddlejs-models/ocr) | [@paddle-js-models/ocr](https://www.npmjs.com/package/@paddle-js-models/ocr) |
|
||||
|
||||
## 开发使用
|
||||
## Usage
|
||||
|
||||
该部分是使用 `pnpm` 搭建的 Menorepo
|
||||
This part is Menorepo built with `pnpm`
|
||||
|
||||
### 安装依赖
|
||||
### Install dependencies
|
||||
|
||||
```sh
|
||||
````sh
|
||||
pnpm i
|
||||
```
|
||||
````
|
||||
|
||||
### 开发
|
||||
参考 Package.json 使用 `yalc` 进行开发测试。
|
||||
### Development
|
||||
See Package.json for development testing with `yalc`.
|
||||
|
||||
```sh
|
||||
````sh
|
||||
pnpm run dev:xxx
|
||||
```
|
||||
|
||||
### 整体简介
|
||||
|
||||
1. 使用 rollup 一次性打包生成 commonjs 和 es 规范的代码；同时具有可扩展性；目前由于依赖的cv库有些问题；就没有配置umd打包。
|
||||
2. 打包时基于 api-extractor 实现 d.ts 文件生成，实现支持 ts 引入生成我们的包
|
||||
3. 基于 jest 支持测试并显示测试相关覆盖率等
|
||||
4. 基于 ts 和 eslint 维护代码风格，保证代码更好开发
|
||||
5. 基于 conventional-changelog-cli 实现自定义关键词生成对应生成changelog
|
||||
6. 基于 yalc 实现本地打包开发测试
|
||||
````
|
||||
|
||||
### Overall Introduction
|
||||
|
||||
1. Use rollup to package the code of commonjs and es specifications at one time; at the same time, it is extensible; at present, there are some problems with the dependent cv library; there is no configuration for umd packaging.
|
||||
2. The d.ts file is generated based on api-extractor during packaging, and the introduction of ts is supported to generate our package
|
||||
3. Support testing based on jest and display test related coverage, etc.
|
||||
4. Maintain code style based on ts and eslint to ensure better code development
|
||||
5. Generate custom keywords based on conventional-changelog-cli and generate changelog accordingly
|
||||
6. Implement local packaging development and testing based on yalc
|
||||
|
||||
43
examples/application/js/package/README_CN.md
Normal file
43
examples/application/js/package/README_CN.md
Normal file
@@ -0,0 +1,43 @@
|
||||
[English](README.md) | 简体中文
|
||||
|
||||
# Paddle.js Model Module介绍
|
||||
|
||||
该部分是基于 Paddle.js 进行开发的模型库，主要提供 Web 端可直接引入使用模型的能力。
|
||||
|
||||
| demo名称 | 源码目录 | npm包 |
|
||||
| ---------------- | ------------------------------------------------------ | ------------------------------------------------------------ |
|
||||
| 人脸检测 | [facedetect](./packages/paddlejs-models/facedetect) | [@paddle-js-models/facedetect](https://www.npmjs.com/package/@paddle-js-models/facedetect) |
|
||||
| 螺丝钉检测 | [detect](./packages/paddlejs-models/detect) | [@paddle-js-models/detect](https://www.npmjs.com/package/@paddle-js-models/detect) |
|
||||
| 人像分割背景替换 | [humanseg](./packages/paddlejs-models/humanseg) | [@paddle-js-models/humanseg](https://www.npmjs.com/package/@paddle-js-models/humanseg) |
|
||||
| 手势识别AI猜丁壳 | [gesture](./packages/paddlejs-models/gesture) | [@paddle-js-models/gesture](https://www.npmjs.com/package/@paddle-js-models/gesture) |
|
||||
| 1000种物品识别 | [mobilenet](./packages/paddlejs-models/mobilenet) | [@paddle-js-models/mobilenet](https://www.npmjs.com/package/@paddle-js-models/mobilenet) |
|
||||
| 文本检测 | [ocrdetection](./packages/paddlejs-models/ocrdetection) | [@paddle-js-models/ocrdet](https://www.npmjs.com/package/@paddle-js-models/ocrdet) |
|
||||
| 文本识别 | [ocr](./packages/paddlejs-models/ocr) | [@paddle-js-models/ocr](https://www.npmjs.com/package/@paddle-js-models/ocr) |
|
||||
|
||||
## 开发使用
|
||||
|
||||
该部分是使用 `pnpm` 搭建的 Menorepo
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```sh
|
||||
pnpm i
|
||||
```
|
||||
|
||||
### 开发
|
||||
参考 Package.json 使用 `yalc` 进行开发测试。
|
||||
|
||||
```sh
|
||||
pnpm run dev:xxx
|
||||
```
|
||||
|
||||
### 整体简介
|
||||
|
||||
1. 使用 rollup 一次性打包生成 commonjs 和 es 规范的代码；同时具有可扩展性；目前由于依赖的cv库有些问题；就没有配置umd打包。
|
||||
2. 打包时基于 api-extractor 实现 d.ts 文件生成，实现支持 ts 引入生成我们的包
|
||||
3. 基于 jest 支持测试并显示测试相关覆盖率等
|
||||
4. 基于 ts 和 eslint 维护代码风格，保证代码更好开发
|
||||
5. 基于 conventional-changelog-cli 实现自定义关键词生成对应生成changelog
|
||||
6. 基于 yalc 实现本地打包开发测试
|
||||
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
English | [简体中文](README.md)
|
||||
|
||||
# Introduction to Paddle.js Demo Module
|
||||
|
||||
This part is a model library developed based on Paddle.js, which mainly provides the ability to directly introduce and use models on the web side.
|
||||
|
||||
| demo name | source directory | npm package |
|
||||
| - | - | - |
|
||||
| face detection | [facedetect](./packages/paddlejs-models/facedetect) | [@paddle-js-models/facedetect](https://www.npmjs.com/package/@paddle-js-models/facedetect) |
|
||||
| Screw detection | [detect](./packages/paddlejs-models/detect) | [@paddle-js-models/detect](https://www.npmjs.com/package/@paddle-js-models/detect ) |
|
||||
| Portrait segmentation background replacement | [humanseg](./packages/paddlejs-models/humanseg) | [@paddle-js-models/humanseg](https://www.npmjs.com/package/@paddle-js-models/humanseg) |
|
||||
| Gesture Recognition AI Guessing Shell | [gesture](./packages/paddlejs-models/gesture) | [@paddle-js-models/gesture](https://www.npmjs.com/package/@paddle-js-models/gesture) |
|
||||
| 1000 Item Recognition | [mobilenet](./packages/paddlejs-models/mobilenet) | [@paddle-js-models/mobilenet](https://www.npmjs.com/package/@paddle-js-models/mobilenet) |
|
||||
| Text Detection | [ocrdetection](./packages/paddlejs-models/ocrdetection) | [@paddle-js-models/ocrdet](https://www.npmjs.com/package/@paddle-js-models/ocrdet ) |
|
||||
| Text Recognition | [ocr](./packages/paddlejs-models/ocr) | [@paddle-js-models/ocr](https://www.npmjs.com/package/@paddle-js-models/ocr) |
|
||||
|
||||
## Usage
|
||||
|
||||
This part is Menorepo built with `pnpm`
|
||||
|
||||
### Install dependencies
|
||||
|
||||
````sh
|
||||
pnpm i
|
||||
````
|
||||
|
||||
### Development
|
||||
See Package.json for development testing with `yalc`.
|
||||
|
||||
````sh
|
||||
pnpm run dev:xxx
|
||||
````
|
||||
|
||||
### Overall Introduction
|
||||
|
||||
1. Use rollup to package the code of commonjs and es specifications at one time; at the same time, it is extensible; at present, there are some problems with the dependent cv library; there is no configuration for umd packaging.
|
||||
2. The d.ts file is generated based on api-extractor during packaging, and the introduction of ts is supported to generate our package
|
||||
3. Support testing based on jest and display test related coverage, etc.
|
||||
4. Maintain code style based on ts and eslint to ensure better code development
|
||||
5. Generate custom keywords based on conventional-changelog-cli and generate changelog accordingly
|
||||
6. Implement local packaging development and testing based on yalc
|
||||
@@ -1,78 +1,79 @@
|
||||
English | [简体中文](README_CN.md)
|
||||
# Paddle.js-demo
|
||||
|
||||
## Demo 目录
|
||||
## Demo Directory
|
||||
|
||||
| 分类 | 名称 | 目录 |
|
||||
| Classification | Name | Directory |
|
||||
|:----:| :--------------- | -------------------------------------------------------- |
|
||||
| CV | 人像扣图 | /src/pages/cv/segmentation/HumanSeg |
|
||||
| CV | 人像分割背景替换 | /src/pages/cv/segmentation/HumanSeg |
|
||||
| CV | 手势识别AI猜丁壳 | /src/pages/cv/recognition/GestureRecognition |
|
||||
| CV | 1000种物品识别 | /src/pages/cv/recognition/ItemIdentification |
|
||||
| CV | 酒瓶识别 | /src/pages/cv/recognition/WineBottleIdentification |
|
||||
| CV | 文本检测 | /src/pages/cv/ocr/TextDetection |
|
||||
| CV | 文本识别 | /src/pages/cv/ocr/TextRecognition |
|
||||
| CV | Portrait matting | /src/pages/cv/segmentation/HumanSeg |
|
||||
| CV | Portrait segmentation background replacement | /src/pages/cv/segmentation/HumanSeg |
|
||||
| CV | Gesture recognition AI 'Rock Paper Scissors' | /src/pages/cv/recognition/GestureRecognition |
|
||||
| CV | Identify 1000 items | /src/pages/cv/recognition/ItemIdentification |
|
||||
| CV | Wine bottle recognition | /src/pages/cv/recognition/WineBottleIdentification |
|
||||
| CV | Text detection | /src/pages/cv/ocr/TextDetection |
|
||||
| CV | Text Recognition | /src/pages/cv/ocr/TextRecognition |
|
||||
|
||||
## 开发简介
|
||||
## Introduction to Development
|
||||
|
||||
### 安装依赖
|
||||
### Install dependencies
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### 开发
|
||||
### Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 查看页面
|
||||
### Page View
|
||||
|
||||
访问 `http://localhost:5173/main/index.html` 进入主页
|
||||
Visit `http://localhost:5173/main/index.html` and enter homepage
|
||||
|
||||
### 构建
|
||||
### Construction
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
### [ESLint](https://eslint.org/) 格式化
|
||||
### [ESLint](https://eslint.org/) Formatting
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### 工程风格
|
||||
### Project style
|
||||
|
||||
1. 项目使用TypeScript
|
||||
2. 推荐使用 Vue 的组合式 API，可以根据 'src/pages/ExampleFile.vue' 模板创建新的组件
|
||||
3. CSS 使用 Less
|
||||
4. eslint 使用的是 Vue 推荐的，一般情况请尽量符合对应的要求
|
||||
5. store 使用的是 [Pinia](https://pinia.web3doc.top/)
|
||||
6. router 使用的是 [vue-router](https://router.vuejs.org/zh/)
|
||||
1. Use TypeScript
|
||||
2. Vue's compositional API is recommended. Creating new components according to the 'src/pages/ExampleFile.vue' template
|
||||
3. use Less for CSS
|
||||
4. Use what Vue recommends for eslint. Try to meet the requirements.
|
||||
5. Use [Pinia](https://pinia.web3doc.top/) for store
|
||||
6. Use [vue-router](https://router.vuejs.org/zh/) for router
|
||||
|
||||
### src 目录简介
|
||||
### Brief introduction to src
|
||||
|
||||
```text
|
||||
├─assets 资源文件
|
||||
├─components 全局组件
|
||||
├─router 路由
|
||||
├─stores 存储库
|
||||
├─assets
|
||||
├─components
|
||||
├─router
|
||||
├─stores
|
||||
└─pages
|
||||
└─cv cv相关demo
|
||||
├─ocr ocr相关demo
|
||||
└─cv demo of cv
|
||||
├─ocr demo of ocr
|
||||
│ ├─TextDetection
|
||||
│ └─TextRecognition
|
||||
├─...
|
||||
├─recognition 识别相关demo
|
||||
├─recognition demo of recognition
|
||||
│ ├─GestureRecognition
|
||||
│ ├─ItemIdentification
|
||||
│ ├─...
|
||||
│ └─WineBottleIdentification
|
||||
└─segmentation 分割相关demo
|
||||
└─segmentation demo of segmentation
|
||||
├─PortraitBackgroundReplacement
|
||||
├─...
|
||||
└─PortraitMatting
|
||||
|
||||
```
|
||||
新增组件在对应类别下新增即可，可以参考模板 'src/pages/ExampleFile.vue'
|
||||
Add new components under corresponding categories. Refer to 'src/pages/ExampleFile.vue' for its template
|
||||
|
||||
79
examples/application/js/web_demo/README_CN.md
Normal file
79
examples/application/js/web_demo/README_CN.md
Normal file
@@ -0,0 +1,79 @@
|
||||
[English](README.md) | 简体中文
|
||||
# Paddle.js-demo
|
||||
|
||||
## Demo 目录
|
||||
|
||||
| 分类 | 名称 | 目录 |
|
||||
|:----:| :--------------- | -------------------------------------------------------- |
|
||||
| CV | 人像扣图 | /src/pages/cv/segmentation/HumanSeg |
|
||||
| CV | 人像分割背景替换 | /src/pages/cv/segmentation/HumanSeg |
|
||||
| CV | 手势识别AI猜丁壳 | /src/pages/cv/recognition/GestureRecognition |
|
||||
| CV | 1000种物品识别 | /src/pages/cv/recognition/ItemIdentification |
|
||||
| CV | 酒瓶识别 | /src/pages/cv/recognition/WineBottleIdentification |
|
||||
| CV | 文本检测 | /src/pages/cv/ocr/TextDetection |
|
||||
| CV | 文本识别 | /src/pages/cv/ocr/TextRecognition |
|
||||
|
||||
## 开发简介
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### 开发
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 查看页面
|
||||
|
||||
访问 `http://localhost:5173/main/index.html` 进入主页
|
||||
|
||||
### 构建
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
### [ESLint](https://eslint.org/) 格式化
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### 工程风格
|
||||
|
||||
1. 项目使用TypeScript
|
||||
2. 推荐使用 Vue 的组合式 API，可以根据 'src/pages/ExampleFile.vue' 模板创建新的组件
|
||||
3. CSS 使用 Less
|
||||
4. eslint 使用的是 Vue 推荐的，一般情况请尽量符合对应的要求
|
||||
5. store 使用的是 [Pinia](https://pinia.web3doc.top/)
|
||||
6. router 使用的是 [vue-router](https://router.vuejs.org/zh/)
|
||||
|
||||
### src 目录简介
|
||||
|
||||
```text
|
||||
├─assets 资源文件
|
||||
├─components 全局组件
|
||||
├─router 路由
|
||||
├─stores 存储库
|
||||
└─pages
|
||||
└─cv cv相关demo
|
||||
├─ocr ocr相关demo
|
||||
│ ├─TextDetection
|
||||
│ └─TextRecognition
|
||||
├─...
|
||||
├─recognition 识别相关demo
|
||||
│ ├─GestureRecognition
|
||||
│ ├─ItemIdentification
|
||||
│ ├─...
|
||||
│ └─WineBottleIdentification
|
||||
└─segmentation 分割相关demo
|
||||
├─PortraitBackgroundReplacement
|
||||
├─...
|
||||
└─PortraitMatting
|
||||
|
||||
```
|
||||
新增组件在对应类别下新增即可，可以参考模板 'src/pages/ExampleFile.vue'
|
||||
Reference in New Issue
Block a user