mirror of
https://github.com/PaddlePaddle/FastDeploy.git
synced 2025-10-30 11:26:39 +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,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 |
|
||||
|
||||
|
||||
Reference in New Issue
Block a user