中文版

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 with a specified background. Api blurBackground can draw human segmentation with a blurred origin background. Api drawMask can draw the background without human.

Run Demo

1. Execute in the current directory

1npm install
2npm run dev

2. Visit http://0.0.0.0:8866
3. Visit gpu pipeline http://0.0.0.0:8866/gpu.html

Usage

1
2import * as humanseg from '@paddlejs-models/humanseg';
3
4// load humanseg model, use 398x224 shape model, and preheat
5await humanseg.load();
6
7// use 288x160 shape model, preheat and predict faster with a little loss of precision
8// await humanseg.load(true, true);
9
10// get the gray value [2, 398, 224] or [2, 288, 160];
11const { data } = await humanseg.getGrayValue(img);
12
13// background canvas
14const back_canvas = document.getElementById('background') as HTMLCanvasElement;
15
16// draw human segmentation
17const canvas1 = document.getElementById('back') as HTMLCanvasElement;
18humanseg.drawHumanSeg(data, canvas1, back_canvas) ;
19
20// blur background
21const canvas2 = document.getElementById('blur') as HTMLCanvasElement;
22humanseg.drawHumanSeg(data, canvas2) ;
23
24// draw the mask with background
25const canvas3 = document.getElementById('mask') as HTMLCanvasElement;
26humanseg.drawMask(data, canvas3, back_canvas);
27

gpu pipeline

1
2// 引入 humanseg sdk
3import * as humanseg from '@paddlejs-models/humanseg/lib/index_gpu';
4
5// load humanseg model, use 398x224 shape model, and preheat
6await humanseg.load();
7
8// use 288x160 shape model, preheat and predict faster with a little loss of precision
9// await humanseg.load(true, true);
10
11
12// background canvas
13const back_canvas = document.getElementById('background') as HTMLCanvasElement;
14
15// draw human segmentation
16const canvas1 = document.getElementById('back') as HTMLCanvasElement;
17await humanseg.drawHumanSeg(input, canvas1, back_canvas) ;
18
19// blur background
20const canvas2 = document.getElementById('blur') as HTMLCanvasElement;
21await humanseg.drawHumanSeg(input, canvas2) ;
22
23// draw the mask with background
24const canvas3 = document.getElementById('mask') as HTMLCanvasElement;
25await humanseg.drawMask(input, canvas3, back_canvas);
26

Online experience

image human segmentation：https://paddlejs.baidu.com/humanseg

video-streaming human segmentation：https://paddlejs.baidu.com/humanStream

Performance

Used in Video Meeting