PaddlePaddle · JingyuanZhang · Mar 3, 2022 · Mar 2, 2022
diff --git a/README.md b/README.md
@@ -8,8 +8,6 @@
 
 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.
 
-
-
 ## Ecosystem
 
 | Project                  | version                | Description         |
@@ -71,6 +69,9 @@ Paddle.js is a web project for Baidu PaddlePaddle, which is an open source deep
 [facedetect-status]: https://img.shields.io/npm/v/@paddlejs-models/facedetect
 [facedetect-package]: https://npmjs.com/package/@paddlejs-models/facedetect
 
+## Website
+https://paddlejs.baidu.com
+
 ## Key Features
 
 ### Module
@@ -92,15 +93,40 @@ Paddle.js is a web project for Baidu PaddlePaddle, which is an open source deep
 
 ## Examples
 - [image classification game](./packages/paddlejs-examples/clasGame/README.md) image classification game example in wx miniprogram
-- [gesture](./packages/paddlejs-examples/gesture/README.md) gesture recognition example
-- [humanStream](./packages/paddlejs-examples/humanStream/README.md) video-streaming human segmentation
-- [humanseg](./packages/paddlejs-examples/humanseg/README.md) human segmentation example
-- [ocr](./packages/paddlejs-examples/ocr/README.md) optical character recognition example
-- [ocr detection](./packages/paddlejs-examples/ocrdetection/README.md) optical character detection example
-- [mobilenet](./packages/paddlejs-examples/mobilenet) classify images into 1000 object categories
-- [wine](./packages/paddlejs-examples/wine) classify bottles into 7 categories
+- [gesture](./packages/paddlejs-examples/gesture/README.md) gesture recognition example [online experience](https://paddlejs.baidu.com/gesture)
+- [humanStream](./packages/paddlejs-examples/humanStream/README.md) video-streaming human segmentation [online experience](https://paddlejs.baidu.com/humanStream)
+- [humanseg](./packages/paddlejs-examples/humanseg/README.md) human segmentation example [online experience](https://paddlejs.baidu.com/humanseg)
+- [ocr](./packages/paddlejs-examples/ocr/README.md) optical character recognition example [online experience](https://paddlejs.baidu.com/ocr)
+- [ocr detection](./packages/paddlejs-examples/ocrdetection/README.md) optical character detection example [online experience](https://paddlejs.baidu.com/ocrdet)
+- [mobilenet](./packages/paddlejs-examples/mobilenet) classify images into 1000 object categories [online experience](https://paddlejs.baidu.com/mobilenet)
+- [wine](./packages/paddlejs-examples/wine) classify bottles into 7 categories [online experience](https://paddlejs.baidu.com/wine)
 - [webglworker](./packages/paddlejs-examples/webglWorker) This demo help us to use Paddle.js in WebWorker.
 
+<p>
+  <a target="_blank" href="./packages/paddlejs-examples/clasGame/README.md">
+    <img alt="clasGame" src="./packages/paddlejs-examples/clasGame/exampleImage/demo1.gif" style="width: 20%">
+  </a>
+  <a target="_blank" href="./packages/paddlejs-examples/wine/README.md">
+    <img alt="wine" src="https://user-images.githubusercontent.com/43414102/156372713-d07e190f-bdb6-433e-a5cd-866fffbbb5d6.gif" style="width: 20%">
+  </a>
+   <a target="_blank" href="./packages/paddlejs-examples/gesture/README.md">
+    <img alt="gesture" src="https://user-images.githubusercontent.com/43414102/156379706-065a4f57-cc75-4457-857a-18619589492f.gif" style="width: 20%">
+  </a>
+</p>
+<p>
+  <a target="_blank" href="./packages/paddlejs-examples/ocr/README.md">
+    <img alt="ocr" src="https://user-images.githubusercontent.com/43414102/156380942-2ee5ad8d-d023-4cd3-872c-b18ebdcbb3f3.gif" style="width: 60%">
+  </a>
+</p>
+<p>
+  <a target="_blank" href="./packages/paddlejs-examples/humanseg/README.md">
+    <img alt="humanseg" src="https://user-images.githubusercontent.com/43414102/156384741-83f42d25-7062-49e1-9106-677bbbefbcfb.jpg" style="width: 32%">
+  </a>
+  <a target="_blank" href="./packages/paddlejs-models/facedetect/README.md">
+    <img alt="facedetect" src="https://user-images.githubusercontent.com/43414102/156384732-cb053df6-826e-42d7-92ba-536ab67011c4.jpg" style="width: 28%">
+  </a>
+</p>
+
 
 ### Browser/Platforms Coverage
 

diff --git a/README_cn.md b/README_cn.md
@@ -69,6 +69,8 @@ Paddle.js 是百度 PaddlePaddle 的 web 方向子项目，是一个运行在浏
 [facedetect-status]: https://img.shields.io/npm/v/@paddlejs-models/facedetect
 [facedetect-package]: https://npmjs.com/package/@paddlejs-models/facedetect
 
+## 官网
+https://paddlejs.baidu.com
 
 ## 主要特点
 
@@ -91,15 +93,40 @@ Paddle.js 是百度 PaddlePaddle 的 web 方向子项目，是一个运行在浏
 
 ## 案例 demo
 - [image classification game](./packages/paddlejs-examples/clasGame/README.md) 物品识别微信小程序——寻物小游戏
-- [gesture](./packages/paddlejs-examples/gesture/README.md) 手势识别 demo
-- [humanStream](./packages/paddlejs-examples/humanStream/README.md) 基于视频流的人像分割 demo
-- [humanseg](./packages/paddlejs-examples/humanseg/README.md) 人像分割 demo
-- [ocr](./packages/paddlejs-examples/ocr/README.md) 文本识别 demo
-- [ocr detection](./packages/paddlejs-examples/ocrdetection/README.md) 文本检测 demo
-- [mobilenet](./packages/paddlejs-examples/mobilenet) 1000 物品分类 demo
-- [wine](./packages/paddlejs-examples/wine) 酒瓶识别 demo
+- [gesture](./packages/paddlejs-examples/gesture/README.md) 手势识别 demo [在线体验](https://paddlejs.baidu.com/gesture)
+- [humanStream](./packages/paddlejs-examples/humanStream/README.md) 基于视频流的人像分割 demo [在线体验](https://paddlejs.baidu.com/humanStream)
+- [humanseg](./packages/paddlejs-examples/humanseg/README.md) 人像分割 demo [在线体验](https://paddlejs.baidu.com/humanseg)
+- [ocr](./packages/paddlejs-examples/ocr/README.md) 文本识别 demo [在线体验](https://paddlejs.baidu.com/ocr)
+- [ocr detection](./packages/paddlejs-examples/ocrdetection/README.md) 文本检测 demo [在线体验](https://paddlejs.baidu.com/ocrdet)
+- [mobilenet](./packages/paddlejs-examples/mobilenet) 1000 物品分类 demo [在线体验](https://paddlejs.baidu.com/mobilenet)
+- [wine](./packages/paddlejs-examples/wine) 酒瓶识别 demo [在线体验](https://paddlejs.baidu.com/wine)
 - [webglworker](./packages/paddlejs-examples/webglWorker) 如何在 Web Worker 中运行 Paddle.js
 
+<p>
+  <a target="_blank" href="./packages/paddlejs-examples/clasGame/README.md">
+    <img alt="clasGame" src="./packages/paddlejs-examples/clasGame/exampleImage/demo1.gif" style="width: 20%">
+  </a>
+  <a target="_blank" href="./packages/paddlejs-examples/wine/README.md">
+    <img alt="wine" src="https://user-images.githubusercontent.com/43414102/156372713-d07e190f-bdb6-433e-a5cd-866fffbbb5d6.gif" style="width: 20%">
+  </a>
+   <a target="_blank" href="./packages/paddlejs-examples/gesture/README.md">
+    <img alt="gesture" src="https://user-images.githubusercontent.com/43414102/156379706-065a4f57-cc75-4457-857a-18619589492f.gif" style="width: 20%">
+  </a>
+</p>
+<p>
+  <a target="_blank" href="./packages/paddlejs-examples/ocr/README.md">
+    <img alt="ocr" src="https://user-images.githubusercontent.com/43414102/156380942-2ee5ad8d-d023-4cd3-872c-b18ebdcbb3f3.gif" style="width: 60%">
+  </a>
+</p>
+<p>
+  <a target="_blank" href="./packages/paddlejs-examples/humanseg/README.md">
+    <img alt="humanseg" src="https://user-images.githubusercontent.com/43414102/156384741-83f42d25-7062-49e1-9106-677bbbefbcfb.jpg" style="width: 32%">
+  </a>
+  <a target="_blank" href="./packages/paddlejs-models/facedetect/README.md">
+    <img alt="facedetect" src="https://user-images.githubusercontent.com/43414102/156384732-cb053df6-826e-42d7-92ba-536ab67011c4.jpg" style="width: 28%">
+  </a>
+</p>
+
 ### 浏览器/系统覆盖范围
 
 * PC浏览器: Chrome、Safari、Firefox

diff --git a/packages/paddlejs-examples/gesture/README.md b/packages/paddlejs-examples/gesture/README.md
@@ -31,3 +31,10 @@ await gesture.load();
 const res = await gesture.classify(img);
 
 ```
+
+# Online experience
+
+https://paddlejs.baidu.com/gesture
+
+# Performance
+<img alt="gesture" src="https://user-images.githubusercontent.com/43414102/156379706-065a4f57-cc75-4457-857a-18619589492f.gif">
diff --git a/packages/paddlejs-examples/gesture/README_cn.md b/packages/paddlejs-examples/gesture/README_cn.md
@@ -31,3 +31,9 @@ await gesture.load();
 const res = await gesture.classify(img);
 
 ```
+# 在线体验
+
+https://paddlejs.baidu.com/gesture
+
+# 效果
+<img alt="gesture" src="https://user-images.githubusercontent.com/43414102/156379706-065a4f57-cc75-4457-857a-18619589492f.gif">
diff --git a/packages/paddlejs-examples/humanStream/README.md b/packages/paddlejs-examples/humanStream/README.md
@@ -53,3 +53,9 @@ npm 库 [@paddlejs-models/humanseg](https://github.com/PaddlePaddle/Paddle.js/tr
 
 ## 3.5 loading什么时候消失？
 模型第一次加载会有预热，导致第一次加载时间比较长，加载完成会自动去除loading，如长时间loading未消失，可在控制台查看是否环境有问题，导致无法调起摄像头。
+
+## 4. 在线体验
+
+弹幕效果：https://paddlejs.baidu.com
+
+视频流效果：https://paddlejs.baidu.com/humanStream
diff --git a/packages/paddlejs-examples/humanseg/README.md b/packages/paddlejs-examples/humanseg/README.md
@@ -51,3 +51,10 @@ const canvas3 = document.getElementById('mask') as HTMLCanvasElement;
 await humanseg.drawMask(input, canvas3, back_canvas);
 
 ```
+
+# Online experience
+
+https://paddlejs.baidu.com/humanseg
+
+# Performance
+<img alt="humanseg" src="https://user-images.githubusercontent.com/43414102/156384741-83f42d25-7062-49e1-9106-677bbbefbcfb.jpg">
diff --git a/packages/paddlejs-examples/humanseg/README_cn.md b/packages/paddlejs-examples/humanseg/README_cn.md
@@ -49,3 +49,13 @@ const canvas3 = document.getElementById('mask') as HTMLCanvasElement;
 await humanseg.drawMask(input, canvas3, back_canvas);
 
 ```
+
+# 在线体验
+
+https://paddlejs.baidu.com/humanseg
+
+# 效果
+<img alt="humanseg" src="https://user-images.githubusercontent.com/43414102/156384741-83f42d25-7062-49e1-9106-677bbbefbcfb.jpg">
+
+
+
diff --git a/packages/paddlejs-examples/mobilenet/README.md b/packages/paddlejs-examples/mobilenet/README.md
@@ -0,0 +1,42 @@
+[中文版](./README_cn.md)
+
+# mobilenet
+
+mobilenet model can classify img. It provides simple interfaces to use. You can use your own category model to classify img.
+
+# Setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run dev
+```
+
+# Usage
+
+```js
+
+import * as mobilenet from '@paddlejs-models/mobilenet';
+
+// You need to specify your model path and the binary file count
+// If your has mean and std params, you need to specify them.
+// map is the results your model can classify.
+await mobilenet.load({
+    path,
+    mean: [0.485, 0.456, 0.406],
+    std: [0.229, 0.224, 0.225]
+}, map);
+
+// get the result the mobilenet model classified.
+const res = await mobilenet.classify(img);
+
+```
+
+# Online experience
+
+mobileNet：https://paddlejs.baidu.com/mobilenet
+
+# Performance
+<img alt="image" src="https://user-images.githubusercontent.com/43414102/156393394-ab1c9e4d-2960-4fcd-ba22-2072fa9b0e9d.png">
diff --git a/packages/paddlejs-examples/mobilenet/README_cn.md b/packages/paddlejs-examples/mobilenet/README_cn.md
@@ -0,0 +1,41 @@
+[English](./README.md)
+
+# mobilenet
+
+mobilenet 模型可以对图片进行分类，提供的接口简单，使用者传入自己的分类模型去分类。
+
+# 安装
+```
+npm install
+```
+
+### 编译
+```
+npm run dev
+```
+
+# 使用
+
+```js
+import * as mobilenet from '@paddlejs-models/mobilenet';
+
+// 使用者需要提供分类模型的地址和二进制参数文件个数，且二进制参数文件，参考 chunk_1.dat、chunk_2.dat，...
+// 模型参数支持 mean 和 std。如果没有，则不需要传
+// 还需要传递分类映射文件
+await mobilenet.load({
+    path,
+    fileCount: 4,
+    mean: [0.485, 0.456, 0.406],
+    std: [0.229, 0.224, 0.225]
+}, map);
+
+// 获取图片分类结果
+const res = await mobilenet.classify(img);
+
+```
+# 在线体验
+
+1000物品识别：https://paddlejs.baidu.com/mobilenet
+
+# 效果
+<img alt="image" src="https://user-images.githubusercontent.com/43414102/156393394-ab1c9e4d-2960-4fcd-ba22-2072fa9b0e9d.png">
diff --git a/packages/paddlejs-examples/ocr/README.md b/packages/paddlejs-examples/ocr/README.md
@@ -48,3 +48,10 @@ console.log(res.text);
 // text area points
 console.log(res.points);
 ```
+
+# Online experience
+
+https://paddlejs.baidu.com/ocr
+
+# Performance
+<img alt="ocr" src="https://user-images.githubusercontent.com/43414102/156380942-2ee5ad8d-d023-4cd3-872c-b18ebdcbb3f3.gif">
diff --git a/packages/paddlejs-examples/ocr/README_cn.md b/packages/paddlejs-examples/ocr/README_cn.md
@@ -47,3 +47,10 @@ console.log(res.text);
 // 文本区域坐标
 console.log(res.points);
 ```
+
+# 在线体验
+
+https://paddlejs.baidu.com/ocr
+
+# 效果
+<img alt="ocr" src="https://user-images.githubusercontent.com/43414102/156380942-2ee5ad8d-d023-4cd3-872c-b18ebdcbb3f3.gif">
diff --git a/packages/paddlejs-examples/ocrdetection/README.md b/packages/paddlejs-examples/ocrdetection/README.md
@@ -32,3 +32,10 @@ await ocr.load();
 const res = await ocr.detect(img);
 
 ```
+
+# Online experience
+
+https://paddlejs.baidu.com/ocrdet
+
+# Performance
+<img alt="image" src="https://user-images.githubusercontent.com/43414102/156394295-5650b6c5-65c4-42a7-bccc-3ed459577b9d.png">
diff --git a/packages/paddlejs-examples/ocrdetection/README_cn.md b/packages/paddlejs-examples/ocrdetection/README_cn.md
@@ -31,3 +31,10 @@ await ocr.load();
 const res = await ocr.detect(img);
 
 ```
+
+# 在线体验
+
+https://paddlejs.baidu.com/ocrdet
+
+# 效果
+<img alt="image" src="https://user-images.githubusercontent.com/43414102/156394295-5650b6c5-65c4-42a7-bccc-3ed459577b9d.png">
diff --git a/packages/paddlejs-examples/wine/README.md b/packages/paddlejs-examples/wine/README.md
@@ -0,0 +1,44 @@
+[中文版](./README_cn.md)
+
+# wine
+
+Wine is a wine bottle recognition module. Based on mobilenetv2 model, users need to input the model file path and classification mapping file to obtain the classification results.
+
+# Setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run dev
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+# Usage
+
+```js
+import * as mobilenet from '@paddlejs-models/mobilenet';
+
+// model load
+const path = 'https://paddlejs.bj.bcebos.com/models/fuse/mobilenet/wine_fuse_activation/model.json';
+await mobilenet.load({
+    path,
+    mean: [0.485, 0.456, 0.406],
+    std: [0.229, 0.224, 0.225]
+}, map);
+
+// get classification results
+const res = await mobilenet.classify(img);
+
+```
+# Online experience
+
+wine：https://paddlejs.baidu.com/wine
+
+# Performance
+<img alt="wine" src="https://user-images.githubusercontent.com/43414102/156372713-d07e190f-bdb6-433e-a5cd-866fffbbb5d6.gif">
diff --git a/packages/paddlejs-examples/wine/README_cn.md b/packages/paddlejs-examples/wine/README_cn.md
@@ -0,0 +1,45 @@
+[English](./README.md)
+
+# wine
+
+wine 为酒瓶识别模块，基于 MobileNetV2 model，使用者需传入模型文件路径和分类映射文件，即可获得分类结果。
+
+# 安装
+```
+npm install
+```
+
+### 编译
+```
+npm run dev
+```
+
+### 构建
+```
+npm run build
+```
+
+# 使用
+
+```js
+import * as mobilenet from '@paddlejs-models/mobilenet';
+
+// 模型加载
+const path = 'https://paddlejs.bj.bcebos.com/models/fuse/mobilenet/wine_fuse_activation/model.json';
+await mobilenet.load({
+    path,
+    mean: [0.485, 0.456, 0.406],
+    std: [0.229, 0.224, 0.225]
+}, map);
+
+// 获取分类结果
+const res = await mobilenet.classify(img);
+
+```
+# 在线体验
+
+酒瓶识别：https://paddlejs.baidu.com/wine
+
+# 效果
+<img alt="wine" src="https://user-images.githubusercontent.com/43414102/156372713-d07e190f-bdb6-433e-a5cd-866fffbbb5d6.gif">
+