Merge pull request #225 from JingyuanZhang/master

feat(models&humanseg): support humanseg model using gpu pipeline

Author: JingyuanZhang

packages/paddlejs-models/humanseg/README.md

@@ -19,7 +19,7 @@ import * as humanseg from '@paddlejs-models/humanseg';
 await humanseg.load();
 
 // use 288x160 shape model, preheat and predict faster with a little loss of precision
-// await humanseg.load(true, true); 
+// await humanseg.load(true, true);
 
 // get the gray value [2, 398, 224] or [2, 288, 160];
 const { data } = await humanseg.getGrayValue(img);
@@ -37,7 +37,38 @@ humanseg.drawHumanSeg(data, canvas2) ;
 
 // draw the mask with background
 const canvas3 = document.getElementById('mask') as HTMLCanvasElement;
-humanseg.drawMask(data, back_canvas, canvas3);
+humanseg.drawMask(data, canvas3, back_canvas);
+
+```
+
+## gpu pipeline
+
+```js
+
+// 引入 humanseg sdk
+import * as humanseg from '@paddlejs-models/humanseg/lib/index_gpu';
+
+// load humanseg model, use 398x224 shape model, and preheat
+await humanseg.load();
+
+// use 288x160 shape model, preheat and predict faster with a little loss of precision
+// await humanseg.load(true, true);
+
+
+// background canvas
+const back_canvas = document.getElementById('background') as HTMLCanvasElement;
+
+// draw human segmentation
+const canvas1 = document.getElementById('back') as HTMLCanvasElement;
+await humanseg.drawHumanSeg(input, canvas1, back_canvas) ;
+
+// blur background
+const canvas2 = document.getElementById('blur') as HTMLCanvasElement;
+await humanseg.drawHumanSeg(input, canvas2) ;
+
+// draw the mask with background
+const canvas3 = document.getElementById('mask') as HTMLCanvasElement;
+await humanseg.drawMask(input, canvas3, back_canvas);
 
 ```
 

packages/paddlejs-models/humanseg/README_cn.md

@@ -16,7 +16,7 @@ import * as humanseg from '@paddlejs-models/humanseg';
 await humanseg.load();
 
 // 指定下载更轻量模型, 该模型 shape 288x160，预测过程会更快，但会有少许精度损失
-// await humanseg.load(true, true); 
+// await humanseg.load(true, true);
 
 
 // 获取分割后的像素 alpha 值，大小为 [2, 398, 224] 或者 [2, 288, 160]
@@ -35,7 +35,38 @@ humanseg.drawHumanSeg(data, canvas2) ;
 
 // 绘制人型遮罩，在新背景上隐藏人像
 const canvas3 = document.getElementById('mask') as HTMLCanvasElement;
-humanseg.drawMask(data, back_canvas, canvas3);
+humanseg.drawMask(data, canvas3, back_canvas);
+
+```
+
+## gpu pipeline
+
+```js
+
+// 引入 humanseg sdk
+import * as humanseg from '@paddlejs-models/humanseg/lib/index_gpu';
+
+// 默认下载 398x224 shape 的模型，默认执行预热
+await humanseg.load();
+
+// 指定下载更轻量模型, 该模型 shape 288x160，预测过程会更快，但会有少许精度损失
+// await humanseg.load(true, true);
+
+
+// 获取 background canvas
+const back_canvas = document.getElementById('background') as HTMLCanvasElement;
+
+// 背景替换， 使用 back_canvas 作为新背景实现背景替换
+const canvas1 = document.getElementById('back') as HTMLCanvasElement;
+await humanseg.drawHumanSeg(input, canvas1, back_canvas) ;
+
+// 背景虚化
+const canvas2 = document.getElementById('blur') as HTMLCanvasElement;
+await humanseg.drawHumanSeg(input, canvas2) ;
+
+// 绘制人型遮罩，在新背景上隐藏人像
+const canvas3 = document.getElementById('mask') as HTMLCanvasElement;
+await humanseg.drawMask(input, canvas3, back_canvas);
 
 ```
 

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

@@ -1,3 +1,7 @@
+/**
+ * @file humanseg model use cpu and gpu mix pipeline
+ */
+
 import * as humanseg from '../src';
 
 async function load() {
@@ -31,7 +35,7 @@ async function run(input) {
 
     humanseg.blurBackground(data, blur_canvas);
     humanseg.drawHumanSeg(data, back_canvas, background_canvas);
-    humanseg.drawMask(data, background_canvas, mask_canvas);
+    humanseg.drawMask(data, mask_canvas, background_canvas);
 }
 
 function selectImage(file) {

packages/paddlejs-models/humanseg/demo/index_gpu.ts

@@ -0,0 +1,57 @@
+/**
+ * @file humanseg model use gpu unique pipeline
+ */
+
+
+import * as humanseg from '../src/index_gpu';
+
+async function load() {
+    await humanseg.load();
+    document.getElementById('loading')!.style.display = 'none';
+    const img = document.getElementById('image') as HTMLImageElement;
+    run(img);
+}
+
+load();
+const back_canvas = document.getElementById('back') as HTMLCanvasElement;
+const blur_canvas = document.getElementById('blur') as HTMLCanvasElement;
+const mask_canvas = document.getElementById('mask') as HTMLCanvasElement;
+
+const background_canvas = document.createElement('canvas');
+background_canvas.width = back_canvas.width;
+background_canvas.height = back_canvas.height;
+
+const img = new Image();
+img.src = './bgImgs/001.jpg';
+img.onload = () => {
+    background_canvas.getContext('2d').drawImage(img, 0, 0, background_canvas.width, background_canvas.height);
+};
+
+
+
+async function run(input) {
+    await humanseg.blurBackground(input, blur_canvas);
+    await humanseg.drawHumanSeg(input, back_canvas, background_canvas);
+    await humanseg.drawMask(input, mask_canvas, background_canvas);
+}
+
+function selectImage(file) {
+    if (!file.files || !file.files[0]) {
+        return;
+    }
+    const reader = new FileReader();
+    reader.onload = function (evt) {
+        const img = document.getElementById('image') as HTMLImageElement;
+        img.src = evt.target.result as any;
+        img.onload = function () {
+            run(img);
+        };
+    };
+    reader.readAsDataURL(file.files[0]);
+}
+
+// selectImage
+document.getElementById('uploadImg').onchange = function () {
+    selectImage(this);
+};
+