docs(models): update humanseg models docs

Author: JingyuanZhang

packages/paddlejs-examples/humanStream/index.ts

@@ -35,7 +35,7 @@ const canvas1 = document.getElementById('demo') as HTMLCanvasElement;
 const videoCanvas = document.createElement('canvas') as HTMLCanvasElement;
 const videoCanvasCtx = videoCanvas.getContext('2d');
 async function load() {
-    await humanseg.load();
+    await humanseg.load(true, true);
     camera = new Camera(video, {
         mirror: true,
         enableOnInactiveState: true,

packages/paddlejs-models/humanseg/README.md

@@ -2,7 +2,11 @@
 
 # humanseg
 
-A real-time human-segmentation model. You can use it to change background. The output of the model is gray value. Model supplies simple api for users. Api drawHumanSeg can draw human segmentation, another one drawMask can draw the background without human.
+A real-time human-segmentation model. You can use it to change background. The output of the model is gray value. Model supplies simple api for users. 
+
+Api drawHumanSeg can draw human segmentation with a specified background. 
+Api blurBackground can draw human segmentation with a blurred origin background.
+Api drawMask can draw the background without human.
 
 
 # Usage
@@ -11,25 +15,40 @@ A real-time human-segmentation model. You can use it to change background. The o
 
 import * as humanseg from '@paddlejs-models/humanseg';
 
-// load humanseg model
+// load humanseg model, use 398x224 shape model, and preheat
 await humanseg.load();
 
-// get the gray value [192 * 192];
+// use 288x160 shape model, preheat and predict faster with a little loss of precision
+// await humanseg.load(true, true); 
+
+// get the gray value [2, 398, 224] or [2, 288, 160];
 const { data } = await humanseg.getGrayValue(img);
 
+// background canvas
+const back_canvas = document.getElementById('background') as HTMLCanvasElement;
+
 // draw human segmentation
-const canvas1 = document.getElementById('demo1') as HTMLCanvasElement;
-humanseg.drawHumanSeg(canvas1, data);
+const canvas1 = document.getElementById('back') as HTMLCanvasElement;
+humanseg.drawHumanSeg(data, canvas1, back_canvas) ;
 
-// draw the background mask
-const canvas2 = document.getElementById('demo2') as HTMLCanvasElement;
-humanseg.drawMask(canvas2, data, true);
+// blur background
+const canvas2 = document.getElementById('blur') as HTMLCanvasElement;
+humanseg.drawHumanSeg(data, canvas2) ;
+
+// draw the mask with background
+const canvas3 = document.getElementById('mask') as HTMLCanvasElement;
+humanseg.drawMask(data, back_canvas, canvas3);
 
 ```
 
+# Performance
+
+  <img width="800"  src="https://user-images.githubusercontent.com/10822846/126873788-1e2d4984-274f-45be-8716-2a87ddda8c75.png"/>
+  <img width="800"  src="https://user-images.githubusercontent.com/10822846/126873838-e5b68c9b-279f-4cb4-ae90-6aaaecd06aa4.png"/>
 
-# performance
 
-  <img width="350"  src="https://user-images.githubusercontent.com/10822846/114897087-7fdb2d80-9e43-11eb-806d-fcf0198bc701.png"/>
-  <img width="350"  src="https://user-images.githubusercontent.com/10822846/114897193-96818480-9e43-11eb-82bc-6d4e073423e9.png"/>
-  <img width="350"  src="https://user-images.githubusercontent.com/10822846/115279515-6b679f80-a179-11eb-87d9-41f84dc02430.jpg"/>
+# Used in Video Meeting
+  <p>
+  <img width="400"  src="https://user-images.githubusercontent.com/10822846/126872499-c3fd680e-a01b-4daa-b0cb-acd3290862bd.gif"/>
+  <img width="400"  src="https://user-images.githubusercontent.com/10822846/126872930-4f4c5c5d-5c51-44fe-b2d6-3f83c4e124bc.png"/>
+  </p>

packages/paddlejs-models/humanseg/README_cn.md

@@ -3,31 +3,52 @@
 # 人像分割
 
 实时的人像分割模型。使用者可以用于背景替换。需要使用接口 getGrayValue 获取灰度值。
-然后使用接口 drawHumanSeg 绘制分割出来的人像；也可以使用 drawMask 接口绘制背景，可以配置参数来获取全黑背景或者原图背景。
+然后使用接口 drawHumanSeg 绘制分割出来的人像，实现背景替换；使用接口 blurBackground 实现背景虚化；也可以使用 drawMask 接口绘制背景，可以配置参数来获取全黑背景或者原图背景。
 
 # 使用
 
 ```js
 
+// 引入 humanseg sdk
 import * as humanseg from '@paddlejs-models/humanseg';
 
-// 下载模型
+// 默认下载 398x224 shape 的模型，默认执行预热
 await humanseg.load();
 
-// 获取灰度值
+// 指定下载更轻量模型, 该模型 shape 288x160，预测过程会更快，但会有少许精度损失
+// await humanseg.load(true, true); 
+
+
+// 获取分割后的像素 alpha 值，大小为 [2, 398, 224] 或者 [2, 288, 160]
 const { data } = await humanseg.getGrayValue(img);
 
-// 绘制分割出来的人像
-const canvas1 = document.getElementById('demo1') as HTMLCanvasElement;
-humanseg.drawHumanSeg(canvas1, data);
+// 获取 background canvas
+const back_canvas = document.getElementById('background') as HTMLCanvasElement;
+
+// 背景替换， 使用 back_canvas 作为新背景实现背景替换
+const canvas1 = document.getElementById('back') as HTMLCanvasElement;
+humanseg.drawHumanSeg(data, canvas1, back_canvas) ;
+
+// 背景虚化
+const canvas2 = document.getElementById('blur') as HTMLCanvasElement;
+humanseg.drawHumanSeg(data, canvas2) ;
 
-// 绘制分割后的背景，第三个参数是是否使用 dark 模式，如果使用，背景为 黑色
-const canvas2 = document.getElementById('demo2') as HTMLCanvasElement;
-humanseg.drawMask(canvas2, data, true);
+// 绘制人型遮罩，在新背景上隐藏人像
+const canvas3 = document.getElementById('mask') as HTMLCanvasElement;
+humanseg.drawMask(data, back_canvas, canvas3);
 
 ```
+
 # 效果
 
-  <img width="350"  src="https://user-images.githubusercontent.com/10822846/114897087-7fdb2d80-9e43-11eb-806d-fcf0198bc701.png"/>
-  <img width="350"  src="https://user-images.githubusercontent.com/10822846/114897193-96818480-9e43-11eb-82bc-6d4e073423e9.png"/>
-  <img width="350"  src="https://user-images.githubusercontent.com/10822846/115279515-6b679f80-a179-11eb-87d9-41f84dc02430.jpg"/>
+  从左到右：原图、背景虚化、背景替换、人型遮罩
+
+  <img width="800"  src="https://user-images.githubusercontent.com/10822846/126873788-1e2d4984-274f-45be-8716-2a87ddda8c75.png"/>
+  <img width="800"  src="https://user-images.githubusercontent.com/10822846/126873838-e5b68c9b-279f-4cb4-ae90-6aaaecd06aa4.png"/>
+
+
+# 视频会议
+  <p>
+  <img width="400"  src="https://user-images.githubusercontent.com/10822846/126872499-c3fd680e-a01b-4daa-b0cb-acd3290862bd.gif"/>
+  <img width="400"  src="https://user-images.githubusercontent.com/10822846/126872930-4f4c5c5d-5c51-44fe-b2d6-3f83c4e124bc.png"/>
+  </p>

packages/paddlejs-models/humanseg/src/index.ts

@@ -60,8 +60,7 @@ export async function preheat() {
 
 export async function getGrayValue(input: HTMLImageElement | HTMLVideoElement | HTMLCanvasElement) {
     inputElement = input;
-    const res = await runner.predict(input);
-    const seg_values = res;
+    const seg_values = await runner.predict(input);
     backgroundSize = genBackgroundSize();
     return {
         width: WIDTH,