Skip to content

Commit c6973d8

Browse files
changy1105changy1105
committed
docs(paddlejs-models & paddlejs-examples): README update
1 parent df65dcc commit c6973d8

File tree

26 files changed

+383
-23
lines changed

26 files changed

+383
-23
lines changed

‎README.md‎

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@
88

99
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.
1010

11-
12-
1311
## Ecosystem
1412

1513
| Project | version | Description |
@@ -71,6 +69,9 @@ Paddle.js is a web project for Baidu PaddlePaddle, which is an open source deep
7169
[facedetect-status]: https://img.shields.io/npm/v/@paddlejs-models/facedetect
7270
[facedetect-package]: https://npmjs.com/package/@paddlejs-models/facedetect
7371

72+
## Website
73+
https://paddlejs.baidu.com
74+
7475
## Key Features
7576

7677
### Module
@@ -92,15 +93,40 @@ Paddle.js is a web project for Baidu PaddlePaddle, which is an open source deep
9293

9394
## Examples
9495
- [image classification game](./packages/paddlejs-examples/clasGame/README.md) image classification game example in wx miniprogram
95-
- [gesture](./packages/paddlejs-examples/gesture/README.md) gesture recognition example
96-
- [humanStream](./packages/paddlejs-examples/humanStream/README.md) video-streaming human segmentation
97-
- [humanseg](./packages/paddlejs-examples/humanseg/README.md) human segmentation example
98-
- [ocr](./packages/paddlejs-examples/ocr/README.md) optical character recognition example
99-
- [ocr detection](./packages/paddlejs-examples/ocrdetection/README.md) optical character detection example
100-
- [mobilenet](./packages/paddlejs-examples/mobilenet) classify images into 1000 object categories
101-
- [wine](./packages/paddlejs-examples/wine) classify bottles into 7 categories
96+
- [gesture](./packages/paddlejs-examples/gesture/README.md) gesture recognition example [online experience](https://paddlejs.baidu.com/gesture)
97+
- [humanStream](./packages/paddlejs-examples/humanStream/README.md) video-streaming human segmentation [online experience](https://paddlejs.baidu.com/humanStream)
98+
- [humanseg](./packages/paddlejs-examples/humanseg/README.md) human segmentation example [online experience](https://paddlejs.baidu.com/humanseg)
99+
- [ocr](./packages/paddlejs-examples/ocr/README.md) optical character recognition example [online experience](https://paddlejs.baidu.com/ocr)
100+
- [ocr detection](./packages/paddlejs-examples/ocrdetection/README.md) optical character detection example [online experience](https://paddlejs.baidu.com/ocrdet)
101+
- [mobilenet](./packages/paddlejs-examples/mobilenet) classify images into 1000 object categories [online experience](https://paddlejs.baidu.com/mobilenet)
102+
- [wine](./packages/paddlejs-examples/wine) classify bottles into 7 categories [online experience](https://paddlejs.baidu.com/wine)
102103
- [webglworker](./packages/paddlejs-examples/webglWorker) This demo help us to use Paddle.js in WebWorker.
103104

105+
<p>
106+
<a target="_blank" href="./packages/paddlejs-examples/clasGame/README.md">
107+
<img alt="clasGame" src="./packages/paddlejs-examples/clasGame/exampleImage/demo1.gif" style="width: 20%">
108+
</a>
109+
<a target="_blank" href="./packages/paddlejs-examples/wine/README.md">
110+
<img alt="wine" src="https://user-images.githubusercontent.com/43414102/156372713-d07e190f-bdb6-433e-a5cd-866fffbbb5d6.gif" style="width: 20%">
111+
</a>
112+
<a target="_blank" href="./packages/paddlejs-examples/gesture/README.md">
113+
<img alt="gesture" src="https://user-images.githubusercontent.com/43414102/156379706-065a4f57-cc75-4457-857a-18619589492f.gif" style="width: 20%">
114+
</a>
115+
</p>
116+
<p>
117+
<a target="_blank" href="./packages/paddlejs-examples/ocr/README.md">
118+
<img alt="ocr" src="https://user-images.githubusercontent.com/43414102/156380942-2ee5ad8d-d023-4cd3-872c-b18ebdcbb3f3.gif" style="width: 60%">
119+
</a>
120+
</p>
121+
<p>
122+
<a target="_blank" href="./packages/paddlejs-examples/humanseg/README.md">
123+
<img alt="humanseg" src="https://user-images.githubusercontent.com/43414102/156384741-83f42d25-7062-49e1-9106-677bbbefbcfb.jpg" style="width: 32%">
124+
</a>
125+
<a target="_blank" href="./packages/paddlejs-models/facedetect/README.md">
126+
<img alt="facedetect" src="https://user-images.githubusercontent.com/43414102/156384732-cb053df6-826e-42d7-92ba-536ab67011c4.jpg" style="width: 28%">
127+
</a>
128+
</p>
129+
104130

105131
### Browser/Platforms Coverage
106132

‎README_cn.md‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,8 @@ Paddle.js 是百度 PaddlePaddle 的 web 方向子项目，是一个运行在浏
6969
[facedetect-status]: https://img.shields.io/npm/v/@paddlejs-models/facedetect
7070
[facedetect-package]: https://npmjs.com/package/@paddlejs-models/facedetect
7171

72+
## 官网
73+
https://paddlejs.baidu.com
7274

7375
## 主要特点
7476

@@ -91,15 +93,40 @@ Paddle.js 是百度 PaddlePaddle 的 web 方向子项目，是一个运行在浏
9193

9294
## 案例 demo
9395
- [image classification game](./packages/paddlejs-examples/clasGame/README.md) 物品识别微信小程序——寻物小游戏
94-
- [gesture](./packages/paddlejs-examples/gesture/README.md) 手势识别 demo
95-
- [humanStream](./packages/paddlejs-examples/humanStream/README.md) 基于视频流的人像分割 demo
96-
- [humanseg](./packages/paddlejs-examples/humanseg/README.md) 人像分割 demo
97-
- [ocr](./packages/paddlejs-examples/ocr/README.md) 文本识别 demo
98-
- [ocr detection](./packages/paddlejs-examples/ocrdetection/README.md) 文本检测 demo
99-
- [mobilenet](./packages/paddlejs-examples/mobilenet) 1000 物品分类 demo
100-
- [wine](./packages/paddlejs-examples/wine) 酒瓶识别 demo
96+
- [gesture](./packages/paddlejs-examples/gesture/README.md) 手势识别 demo [在线体验](https://paddlejs.baidu.com/gesture)
97+
- [humanStream](./packages/paddlejs-examples/humanStream/README.md) 基于视频流的人像分割 demo [在线体验](https://paddlejs.baidu.com/humanStream)
98+
- [humanseg](./packages/paddlejs-examples/humanseg/README.md) 人像分割 demo [在线体验](https://paddlejs.baidu.com/humanseg)
99+
- [ocr](./packages/paddlejs-examples/ocr/README.md) 文本识别 demo [在线体验](https://paddlejs.baidu.com/ocr)
100+
- [ocr detection](./packages/paddlejs-examples/ocrdetection/README.md) 文本检测 demo [在线体验](https://paddlejs.baidu.com/ocrdet)
101+
- [mobilenet](./packages/paddlejs-examples/mobilenet) 1000 物品分类 demo [在线体验](https://paddlejs.baidu.com/mobilenet)
102+
- [wine](./packages/paddlejs-examples/wine) 酒瓶识别 demo [在线体验](https://paddlejs.baidu.com/wine)
101103
- [webglworker](./packages/paddlejs-examples/webglWorker) 如何在 Web Worker 中运行 Paddle.js
102104

105+
<p>
106+
<a target="_blank" href="./packages/paddlejs-examples/clasGame/README.md">
107+
<img alt="clasGame" src="./packages/paddlejs-examples/clasGame/exampleImage/demo1.gif" style="width: 20%">
108+
</a>
109+
<a target="_blank" href="./packages/paddlejs-examples/wine/README.md">
110+
<img alt="wine" src="https://user-images.githubusercontent.com/43414102/156372713-d07e190f-bdb6-433e-a5cd-866fffbbb5d6.gif" style="width: 20%">
111+
</a>
112+
<a target="_blank" href="./packages/paddlejs-examples/gesture/README.md">
113+
<img alt="gesture" src="https://user-images.githubusercontent.com/43414102/156379706-065a4f57-cc75-4457-857a-18619589492f.gif" style="width: 20%">
114+
</a>
115+
</p>
116+
<p>
117+
<a target="_blank" href="./packages/paddlejs-examples/ocr/README.md">
118+
<img alt="ocr" src="https://user-images.githubusercontent.com/43414102/156380942-2ee5ad8d-d023-4cd3-872c-b18ebdcbb3f3.gif" style="width: 60%">
119+
</a>
120+
</p>
121+
<p>
122+
<a target="_blank" href="./packages/paddlejs-examples/humanseg/README.md">
123+
<img alt="humanseg" src="https://user-images.githubusercontent.com/43414102/156384741-83f42d25-7062-49e1-9106-677bbbefbcfb.jpg" style="width: 32%">
124+
</a>
125+
<a target="_blank" href="./packages/paddlejs-models/facedetect/README.md">
126+
<img alt="facedetect" src="https://user-images.githubusercontent.com/43414102/156384732-cb053df6-826e-42d7-92ba-536ab67011c4.jpg" style="width: 28%">
127+
</a>
128+
</p>
129+
103130
### 浏览器/系统覆盖范围
104131

105132
* PC浏览器: Chrome、Safari、Firefox

‎packages/paddlejs-examples/gesture/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,10 @@ await gesture.load();
3131
const res = await gesture.classify(img);
3232

3333
```
34+
35+
# Online experience
36+
37+
https://paddlejs.baidu.com/gesture
38+
39+
# Performance
40+
<img alt="gesture" src="https://user-images.githubusercontent.com/43414102/156379706-065a4f57-cc75-4457-857a-18619589492f.gif">

‎packages/paddlejs-examples/gesture/README_cn.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,9 @@ await gesture.load();
3131
const res = await gesture.classify(img);
3232

3333
```
34+
# 在线体验
35+
36+
https://paddlejs.baidu.com/gesture
37+
38+
# 效果
39+
<img alt="gesture" src="https://user-images.githubusercontent.com/43414102/156379706-065a4f57-cc75-4457-857a-18619589492f.gif">

‎packages/paddlejs-examples/humanStream/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,9 @@ npm 库 [@paddlejs-models/humanseg](https://github.com/PaddlePaddle/Paddle.js/tr
5353

5454
## 3.5 loading什么时候消失？
5555
模型第一次加载会有预热，导致第一次加载时间比较长，加载完成会自动去除loading，如长时间loading未消失，可在控制台查看是否环境有问题，导致无法调起摄像头。
56+
57+
## 4. 在线体验
58+
59+
弹幕效果：https://paddlejs.baidu.com
60+
61+
视频流效果：https://paddlejs.baidu.com/humanStream

‎packages/paddlejs-examples/humanseg/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,10 @@ const canvas3 = document.getElementById('mask') as HTMLCanvasElement;
5151
await humanseg.drawMask(input, canvas3, back_canvas);
5252

5353
```
54+
55+
# Online experience
56+
57+
https://paddlejs.baidu.com/humanseg
58+
59+
# Performance
60+
<img alt="humanseg" src="https://user-images.githubusercontent.com/43414102/156384741-83f42d25-7062-49e1-9106-677bbbefbcfb.jpg">

‎packages/paddlejs-examples/humanseg/README_cn.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,13 @@ const canvas3 = document.getElementById('mask') as HTMLCanvasElement;
4949
await humanseg.drawMask(input, canvas3, back_canvas);
5050

5151
```
52+
53+
# 在线体验
54+
55+
https://paddlejs.baidu.com/humanseg
56+
57+
# 效果
58+
<img alt="humanseg" src="https://user-images.githubusercontent.com/43414102/156384741-83f42d25-7062-49e1-9106-677bbbefbcfb.jpg">
59+
60+
61+

‎packages/paddlejs-examples/mobilenet/README.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
[中文版](./README_cn.md)
2+
3+
# mobilenet
4+
5+
mobilenet model can classify img. It provides simple interfaces to use. You can use your own category model to classify img.
6+
7+
# Setup
8+
```
9+
npm install
10+
```
11+
12+
### Compiles and hot-reloads for development
13+
```
14+
npm run dev
15+
```
16+
17+
# Usage
18+
19+
```js
20+
21+
import * as mobilenet from '@paddlejs-models/mobilenet';
22+
23+
// You need to specify your model path and the binary file count
24+
// If your has mean and std params, you need to specify them.
25+
// map is the results your model can classify.
26+
await mobilenet.load({
27+
path,
28+
mean: [0.485, 0.456, 0.406],
29+
std: [0.229, 0.224, 0.225]
30+
}, map);
31+
32+
// get the result the mobilenet model classified.
33+
const res = await mobilenet.classify(img);
34+
35+
```
36+
37+
# Online experience
38+
39+
mobileNet：https://paddlejs.baidu.com/mobilenet
40+
41+
# Performance
42+
<img alt="image" src="https://user-images.githubusercontent.com/43414102/156393394-ab1c9e4d-2960-4fcd-ba22-2072fa9b0e9d.png">

‎packages/paddlejs-examples/mobilenet/README_cn.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
[English](./README.md)
2+
3+
# mobilenet
4+
5+
mobilenet 模型可以对图片进行分类，提供的接口简单，使用者传入自己的分类模型去分类。
6+
7+
# 安装
8+
```
9+
npm install
10+
```
11+
12+
### 编译
13+
```
14+
npm run dev
15+
```
16+
17+
# 使用
18+
19+
```js
20+
import * as mobilenet from '@paddlejs-models/mobilenet';
21+
22+
// 使用者需要提供分类模型的地址和二进制参数文件个数，且二进制参数文件，参考 chunk_1.dat、chunk_2.dat，...
23+
// 模型参数支持 mean 和 std。如果没有，则不需要传
24+
// 还需要传递分类映射文件
25+
await mobilenet.load({
26+
path,
27+
fileCount: 4,
28+
mean: [0.485, 0.456, 0.406],
29+
std: [0.229, 0.224, 0.225]
30+
}, map);
31+
32+
// 获取图片分类结果
33+
const res = await mobilenet.classify(img);
34+
35+
```
36+
# 在线体验
37+
38+
1000物品识别：https://paddlejs.baidu.com/mobilenet
39+
40+
# 效果
41+
<img alt="image" src="https://user-images.githubusercontent.com/43414102/156393394-ab1c9e4d-2960-4fcd-ba22-2072fa9b0e9d.png">

‎packages/paddlejs-examples/ocr/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,10 @@ console.log(res.text);
4848
// text area points
4949
console.log(res.points);
5050
```
51+
52+
# Online experience
53+
54+
https://paddlejs.baidu.com/ocr
55+
56+
# Performance
57+
<img alt="ocr" src="https://user-images.githubusercontent.com/43414102/156380942-2ee5ad8d-d023-4cd3-872c-b18ebdcbb3f3.gif">

0 commit comments

Comments
 (0)