Merge pull request #375 from PaddlePaddle/master

Merge Master

Author: JingyuanZhang

README.md

@@ -4,19 +4,20 @@
 
 Paddle.js is a web project for Baidu PaddlePaddle, which is an open source deep learning framework running in the browser. Paddle.js can either load a pre-trained model, or transforming a model from paddle-hub with model transforming tools provided by Paddle.js. It could run in every browser with WebGL/WebGPU/WebAssembly supported. It could also run in Baidu Smartprogram and WX miniprogram.
 
-[![Build Status](https://travis-ci.org/PaddlePaddle/Paddle.js.svg?branch=beta)](https://travis-ci.org/PaddlePaddle/Paddle.js.svg?branch=beta)
-
+[![Build Status](https://travis-ci.org/PaddlePaddle/Paddle.js.svg?branch=beta)](https://travis-ci.org/PaddlePaddle/Paddle.js.svg?branch=beta) <img src="https://github.com/paddlepaddle/paddle.js/actions/workflows/ut.yml/badge.svg" alt="UnitTest"> <img src="https://img.shields.io/github/commit-activity/m/paddlepaddle/paddle.js/master?color=important" alt="commit-activity"> <img src="https://img.shields.io/github/license/paddlepaddle/paddle.js" alt="license"> <img src="https://img.shields.io/github/package-json/v/paddlepaddle/paddle.js/master?color=yellow" alt="license"> <img src="https://img.shields.io/github/v/release/paddlepaddle/paddle.js?color=skyblue" alt="license"> <img src="https://img.shields.io/pypi/pyversions/paddlejsconverter" alt="python">
 ## Key Features
 
 ### Module
 
-* [paddlejs-core](./packages/paddlejs-core/README.md), the core part of the Paddle.js ecosystem, which is responsible for the operation of the inference process of the entire engine.
+* [paddlejs-core](./packages/paddlejs-core/README.md), the core part of the Paddle.js ecosystem, which is responsible for the operation of the inference process of the entire engine. 
+<img src="https://img.shields.io/npm/v/@paddlejs/paddlejs-core?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs/paddlejs-core" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs/paddlejs-core?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs/paddlejs-core" alt="downloads">
 * [paddlejs-converter](./packages/paddlejs-converter/README.md), model transformation tool for Paddle.js, convert PaddlePaddle models (also known as fluid models) into a browser-friendly format.
 * [paddlejs-models](./packages/paddlejs-models/), model projects, supply flexible low-level APIs for users to implement their AI scenario.
 * [paddlejs-examples](./packages/paddlejs-examples/), Paddle.js AI examples
 * [paddlejs-mediapipe](./packages/paddlejs-mediapipe/), tools for live and streaming media, support webrtc camera and a lightweight opencv package
 ### Backends
 * [paddlejs-backend-webgl](./packages/paddlejs-backend-webgl/README.md), webgl backend, the main backend for Paddle.js, [ops supported](./packages/paddlejs-backend-webgl/src/ops/index.ts)
+<img src="https://img.shields.io/npm/v/@paddlejs/paddlejs-backend-webgl?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs/paddlejs-backend-webgl" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs/paddlejs-backend-webgl?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs/paddlejs-backend-webgl" alt="downloads">
 * [paddlejs-backend-webgpu](./packages/paddlejs-backend-webgpu/README.md), webgpu backend, an experimental backend, [WebGPU draft](https://gpuweb.github.io/gpuweb/), [ops supported](./packages/paddlejs-backend-webgpu/src/ops/index.ts)
 * [paddlejs-backend-wasm](./packages/paddlejs-backend-wasm/README_cn.md), WebAssembly backend, [ops supported](./packages/paddlejs-backend-wasm/src/ops.ts)
 * [paddlejs-backend-cpu](./packages/paddlejs-backend-cpu/README.md), cpu backend, [ops supported](./packages/paddlejs-backend-cpu/src/ops/index.ts)
@@ -45,12 +46,12 @@ Paddle.js is a web project for Baidu PaddlePaddle, which is an open source deep
 If you dont' want to put model on the network, you can use method 2.
 
 ## Models Sdk
-- [gesture model](./packages/paddlejs-models/gesture/README.md) gesture recognition library
-- [mobilenet model](./packages/paddlejs-models/mobilenet/README.md) image classification library
-- [humanseg model](./packages/paddlejs-models/humanseg/README.md) human segmentation library
-- [ocr model](./packages/paddlejs-models/ocr/README.md) optical character recognition library
-- [ocr detection model](./packages/paddlejs-models/ocrdetection/README.md) optical character detection library
-- [facedetect model](./packages/paddlejs-models/facedetect/README.md) face detection library
+- [humanseg model](./packages/paddlejs-models/humanseg/README.md) human segmentation library <img src="https://img.shields.io/npm/v/@paddlejs-models/humanseg?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/humanseg" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/humanseg?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/humanseg" alt="downloads">
+- [ocr model](./packages/paddlejs-models/ocr/README.md) optical character recognition library <img src="https://img.shields.io/npm/v/@paddlejs-models/ocr?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/ocr" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/ocr?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/ocr" alt="downloads">
+- [gesture model](./packages/paddlejs-models/gesture/README.md) gesture recognition library <img src="https://img.shields.io/npm/v/@paddlejs-models/gesture?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/gesture" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/gesture?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/gesture" alt="downloads">
+- [mobilenet model](./packages/paddlejs-models/mobilenet/README.md) image classification library <img src="https://img.shields.io/npm/v/@paddlejs-models/mobilenet?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/mobilenet" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/mobilenet?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/mobilenet" alt="downloads">
+- [ocr detection model](./packages/paddlejs-models/ocrdetection/README.md) optical character detection library <img src="https://img.shields.io/npm/v/@paddlejs-models/ocrdet?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/ocrdet" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/ocrdet?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/ocrdet" alt="downloads">
+- [facedetect model](./packages/paddlejs-models/facedetect/README.md) face detection library <img src="https://img.shields.io/npm/v/@paddlejs-models/facedetect?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/facedetect" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/facedetect?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/facedetect" alt="downloads">
 
 ## Examples
 - [image classification game](./packages/paddlejs-examples/clasGame/README.md) image classification game example in wx miniprogram

README_cn.md

@@ -4,21 +4,22 @@
 
 Paddle.js 是百度 PaddlePaddle 的 web 方向子项目，是一个运行在浏览器中的开源深度学习框架。Paddle.js 可以加载提前训练好的 paddle 模型，或者将 paddle hub 中的模型通过 Paddle.js 的模型转换工具 paddlejs-converter 变成浏览器友好的模型进行在线推理预测使用。目前，Paddle.js 可以在支持 WebGL/WebGPU/WebAssembly 的浏览器中运行，也可以在百度小程序和微信小程序环境下运行。
 
-[![Build Status](https://travis-ci.org/PaddlePaddle/Paddle.js.svg?branch=beta)](https://travis-ci.org/PaddlePaddle/Paddle.js.svg?branch=beta)
-
+[![Build Status](https://travis-ci.org/PaddlePaddle/Paddle.js.svg?branch=beta)](https://travis-ci.org/PaddlePaddle/Paddle.js.svg?branch=beta) <img src="https://github.com/paddlepaddle/paddle.js/actions/workflows/ut.yml/badge.svg" alt="UnitTest"> <img src="https://img.shields.io/github/commit-activity/m/paddlepaddle/paddle.js/master?color=important" alt="commit-activity"> <img src="https://img.shields.io/github/license/paddlepaddle/paddle.js" alt="license"> <img src="https://img.shields.io/github/package-json/v/paddlepaddle/paddle.js/master?color=yellow" alt="license"> <img src="https://img.shields.io/github/v/release/paddlepaddle/paddle.js?color=skyblue" alt="license"> <img src="https://img.shields.io/pypi/pyversions/paddlejsconverter" alt="python">
 
 ## 主要特点
 
 ### 模块
 
 * [paddlejs-core](./packages/paddlejs-core/README_cn.md)，推理引擎的核心部分，负责整个引擎的推理流程运行
+<img src="https://img.shields.io/npm/v/@paddlejs/paddlejs-core?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs/paddlejs-core" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs/paddlejs-core?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs/paddlejs-core" alt="downloads">
 * [paddlejs-converter](./packages/paddlejs-converter/README_cn.md)，模型转换工具，将 PaddlePaddle 模型（或称为 fluid 模型）转化为浏览器友好的格式
 * [paddlejs-models](./packages/paddlejs-models/)，封装好的模型工程库，提供简易 api 方便用户落地 AI 效果
 * [paddlejs-examples](./packages/paddlejs-examples/)，Paddle.js AI 效果样例
 * [paddlejs-mediapipe](./packages/paddlejs-mediapipe/)，数据流处理工具库，支持 webrtc 视频流、轻量 opencv 等工具
 
 ### 计算方案
 * [paddlejs-backend-webgl](./packages/paddlejs-backend-webgl/README_cn.md)，webgl 方案，目前算子支持最多的方案，[算子支持列表](./packages/paddlejs-backend-webgl/src/ops/index.ts)
+<img src="https://img.shields.io/npm/v/@paddlejs/paddlejs-backend-webgl?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs/paddlejs-backend-webgl" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs/paddlejs-backend-webgl?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs/paddlejs-backend-webgl" alt="downloads">
 * [paddlejs-backend-webgpu](./packages/paddlejs-backend-webgpu/README_cn.md)，webgpu 方案，该计算方案仍然是实验阶段，[**WebGPU** 仍处于草案阶段](https://gpuweb.github.io/gpuweb/) ，[算子支持列表](./packages/paddlejs-backend-webgpu/src/ops/index.ts)
 * [paddlejs-backend-wasm](./packages/paddlejs-backend-wasm/README_cn.md)，WebAssembly 方案，[算子支持列表](./packages/paddlejs-backend-wasm/src/ops.ts)
 * [paddlejs-backend-cpu](./packages/paddlejs-backend-cpu/README_cn.md)，cpu 方案，[算子支持列表](./packages/paddlejs-backend-cpu/src/ops/index.ts)
@@ -45,12 +46,13 @@ Paddle.js 是百度 PaddlePaddle 的 web 方向子项目，是一个运行在浏
 如果不想将模型放入网络时，可以使用方式二，直接将模型对象传入
 
 ## 模型库
-- [facedetect model](./packages/paddlejs-models/facedetect/README_cn.md) 人脸检测
-- [gesture model](./packages/paddlejs-models/gesture/README_cn.md) 手势识别库
-- [mobilenet model](./packages/paddlejs-models/mobilenet/README_cn.md) 物品分类库，可以上传自己的分类模型和分类
-- [humanseg model](./packages/paddlejs-models/humanseg/README_cn.md) 人像分割库
-- [ocr model](./packages/paddlejs-models/ocr/README_cn.md) optical 文字识别库
-- [ocr detection model](./packages/paddlejs-models/ocrdetection/README_cn.md) 文本检测库
+- [humanseg model](./packages/paddlejs-models/humanseg/README.md) 人像分割 <img src="https://img.shields.io/npm/v/@paddlejs-models/humanseg?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/humanseg" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/humanseg?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/humanseg" alt="downloads">
+- [ocr model](./packages/paddlejs-models/ocr/README.md) 文字识别 <img src="https://img.shields.io/npm/v/@paddlejs-models/ocr?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/ocr" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/ocr?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/ocr" alt="downloads">
+- [gesture model](./packages/paddlejs-models/gesture/README.md) 手势识别 <img src="https://img.shields.io/npm/v/@paddlejs-models/gesture?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/gesture" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/gesture?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/gesture" alt="downloads">
+- [mobilenet model](./packages/paddlejs-models/mobilenet/README.md) 物品分类，可以上传自己的分类模型和分类 <img src="https://img.shields.io/npm/v/@paddlejs-models/mobilenet?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/mobilenet" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/mobilenet?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/mobilenet" alt="downloads">
+- [ocr detection model](./packages/paddlejs-models/ocrdetection/README.md) 文本检测 <img src="https://img.shields.io/npm/v/@paddlejs-models/ocrdet?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/ocrdet" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/ocrdet?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/ocrdet" alt="downloads">
+- [facedetect model](./packages/paddlejs-models/facedetect/README.md) 人脸检测 <img src="https://img.shields.io/npm/v/@paddlejs-models/facedetect?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/facedetect" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/facedetect?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/facedetect" alt="downloads">
+
 
 
 ## Examples

packages/paddlejs-backend-webgl/README.md

@@ -4,6 +4,8 @@
 
 This package is WebGL backend accelerated by GPU registered automatically after importing.
 
+<img src="https://img.shields.io/npm/v/@paddlejs/paddlejs-backend-webgl?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs/paddlejs-backend-webgl" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs/paddlejs-backend-webgl?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs/paddlejs-backend-webgl" alt="downloads">
+
 ## Via NPM
 
 ```js

packages/paddlejs-backend-webgl/README_cn.md

@@ -3,6 +3,8 @@
 
 此包为paddlejs的webgl后端，利用GPU加速进行模型预测，引入后会自动注册。
 
+<img src="https://img.shields.io/npm/v/@paddlejs/paddlejs-backend-webgl?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs/paddlejs-backend-webgl" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs/paddlejs-backend-webgl?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs/paddlejs-backend-webgl" alt="downloads">
+
 ## 通过NPM引入
 
 ```js

packages/paddlejs-core/README.md

@@ -5,6 +5,8 @@ As the core part of the Paddle.js ecosystem, this package hosts `@paddlejs/paddl
 which is responsible for the operation of the inference process of the entire engine,
 and provides interfaces for backend registration and environment variable registration.
 
+<img src="https://img.shields.io/npm/v/@paddlejs/paddlejs-core?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs/paddlejs-core" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs/paddlejs-core?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs/paddlejs-core" alt="downloads">
+
 
 ## RunnerConfig
 

packages/paddlejs-core/README_cn.md

@@ -4,6 +4,7 @@
 
 是 Paddle.js 推理引擎的核心部分，npm 包名是 `@paddlejs/paddlejs-core`，负责整个引擎的推理流程运行，提供计算方案注册、环境变量注册的接口。
 
+<img src="https://img.shields.io/npm/v/@paddlejs/paddlejs-core?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs/paddlejs-core" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs/paddlejs-core?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs/paddlejs-core" alt="downloads">
 
 ## 引擎配置 RunnerConfig
 注册引擎时需要对引擎进行配置，必须配置项为 `modelPath`、`feedShape`，所有项目配置如下：

packages/paddlejs-models/detect/README.md

@@ -4,6 +4,9 @@
 
 detect model is used to detect the position of label frame in the image.
 
+<img src="https://img.shields.io/npm/v/@paddlejs-models/detect?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/detect" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/detect?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/detect" alt="downloads">
+
+
 # Usage
 
 ```js

packages/paddlejs-models/detect/README_cn.md

@@ -4,6 +4,8 @@
 
 detect模型用于检测图像中label框选位置。
 
+<img src="https://img.shields.io/npm/v/@paddlejs-models/detect?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/detect" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/detect?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/detect" alt="downloads">
+
 # 使用
 
 ```js

packages/paddlejs-models/facedetect/README.md

@@ -4,6 +4,8 @@
 
 Facedetect is used for face detection in image. It provides a simple interface. At the same time, you can use your own model.
 
+<img src="https://img.shields.io/npm/v/@paddlejs-models/facedetect?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/facedetect" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/facedetect?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/facedetect" alt="downloads">
+
 # Usage
 
 ```js

packages/paddlejs-models/facedetect/README_cn.md

@@ -4,6 +4,8 @@
 
 Facedetect 实现图像中的人脸检测，提供的接口简单，支持用户传入模型。
 
+<img src="https://img.shields.io/npm/v/@paddlejs-models/facedetect?color=success" alt="version"> <img src="https://img.shields.io/bundlephobia/min/@paddlejs-models/facedetect" alt="size"> <img src="https://img.shields.io/npm/dm/@paddlejs-models/facedetect?color=orange" alt="downloads"> <img src="https://img.shields.io/npm/dt/@paddlejs-models/facedetect" alt="downloads">
+
 # 使用
 
 ```js