Skip to content

Commit a7a4748

Browse files
w-okadaw-okada
committed
update
1 parent d14efae commit a7a4748

File tree

8 files changed

+585
-5371
lines changed

8 files changed

+585
-5371
lines changed

‎001_bodypix-worker-js/.eslintrc.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es2021: true,
5+
node: true,
6+
},
7+
extends: [
8+
"eslint:recommended",
9+
"plugin:react/recommended",
10+
"plugin:@typescript-eslint/recommended",
11+
],
12+
parser: "@typescript-eslint/parser",
13+
parserOptions: {
14+
ecmaFeatures: {
15+
jsx: true,
16+
},
17+
ecmaVersion: 13,
18+
sourceType: "module",
19+
},
20+
plugins: ["react", "@typescript-eslint"],
21+
rules: {},
22+
};

‎001_bodypix-worker-js/.prettierrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"tabWidth": 4,
3+
"useTabs": false,
4+
"semi": true
5+
}

‎001_bodypix-worker-js/package-lock.json

Lines changed: 164 additions & 5122 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎001_bodypix-worker-js/package.json

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@dannadori/bodypix-worker-js",
3-
"version": "1.0.41",
3+
"version": "1.0.42",
44
"description": "",
55
"main": "dist/bodypix-worker.js",
66
"scripts": {
@@ -25,24 +25,24 @@
2525
},
2626
"homepage": "https://github.com/w-okada/image-analyze-workers",
2727
"devDependencies": {
28-
"@babel/preset-env": "^7.15.6",
29-
"@types/node": "^16.10.2",
28+
"@babel/preset-env": "^7.15.8",
29+
"@types/node": "^16.11.6",
3030
"before-build-webpack": "^0.2.11",
3131
"npm-run-all": "^4.1.5",
3232
"rimraf": "^3.0.2",
3333
"ts-loader": "^9.2.6",
3434
"tsconfig-paths": "^3.11.0",
35-
"typescript": "^4.4.3",
36-
"webpack": "^5.55.1",
37-
"webpack-cli": "^4.8.0",
35+
"typescript": "^4.4.4",
36+
"webpack": "^5.60.0",
37+
"webpack-cli": "^4.9.1",
3838
"worker-loader": "^3.0.8"
3939
},
4040
"dependencies": {
4141
"@tensorflow-models/body-pix": "^2.2.0",
42-
"@tensorflow/tfjs": "^3.9.0",
43-
"@tensorflow/tfjs-backend-wasm": "^3.9.0",
44-
"@tensorflow/tfjs-converter": "^3.9.0",
45-
"@tensorflow/tfjs-core": "^3.9.0",
42+
"@tensorflow/tfjs": "^3.10.0",
43+
"@tensorflow/tfjs-backend-wasm": "^3.10.0",
44+
"@tensorflow/tfjs-converter": "^3.10.0",
45+
"@tensorflow/tfjs-core": "^3.10.0",
4646
"await-semaphore": "^0.1.3"
4747
}
4848
}

‎001_bodypix-worker-js/src/bodypix-worker-worker.ts

Lines changed: 114 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,150 @@
1-
import { WorkerCommand, WorkerResponse, BodypixFunctionType, BodyPixConfig, BodyPixOperatipnParams } from './const'
2-
import * as bodyPix from '@tensorflow-models/body-pix'
3-
import * as tf from '@tensorflow/tfjs';
4-
import { BrowserType } from './BrowserUtil';
1+
import {
2+
WorkerCommand,
3+
WorkerResponse,
4+
BodypixFunctionType,
5+
BodyPixConfig,
6+
BodyPixOperatipnParams,
7+
} from "./const";
8+
import * as bodyPix from "@tensorflow-models/body-pix";
9+
import * as tf from "@tensorflow/tfjs";
10+
import { BrowserType } from "./BrowserUtil";
511

6-
const ctx: Worker = self as any // eslint-disable-line no-restricted-globals
12+
const ctx: Worker = self as any; // eslint-disable-line no-restricted-globals
713

8-
let model: bodyPix.BodyPix | null
14+
let model: bodyPix.BodyPix | null;
915

1016
const load_module = async (config: BodyPixConfig) => {
1117
if (config.useTFWasmBackend || config.browserType === BrowserType.SAFARI) {
12-
console.log("use wasm backend")
13-
require('@tensorflow/tfjs-backend-wasm')
14-
await tf.setBackend("wasm")
18+
console.log("use wasm backend");
19+
require("@tensorflow/tfjs-backend-wasm");
20+
await tf.setBackend("wasm");
1521
} else {
16-
console.log("use webgl backend")
17-
require('@tensorflow/tfjs-backend-webgl')
18-
await tf.setBackend("webgl")
22+
console.log("use webgl backend");
23+
require("@tensorflow/tfjs-backend-webgl");
24+
await tf.setBackend("webgl");
1925
}
20-
}
21-
22-
const generateImage = (image: ImageBitmap, prediction: bodyPix.SemanticPersonSegmentation) => {
26+
};
2327

28+
const generateImage = (
29+
image: ImageBitmap,
30+
prediction: bodyPix.SemanticPersonSegmentation
31+
) => {
2432
// generate maskImage from prediction
25-
const pixelData = new Uint8ClampedArray(prediction.width * prediction.height * 4)
33+
const pixelData = new Uint8ClampedArray(
34+
prediction.width * prediction.height * 4
35+
);
2636
for (let rowIndex = 0; rowIndex < prediction.height; rowIndex++) {
2737
for (let colIndex = 0; colIndex < prediction.width; colIndex++) {
28-
const seg_offset = ((rowIndex * prediction.width) + colIndex)
29-
const pix_offset = ((rowIndex * prediction.width) + colIndex) * 4
38+
const seg_offset = rowIndex * prediction.width + colIndex;
39+
const pix_offset = (rowIndex * prediction.width + colIndex) * 4;
3040
if (prediction.data[seg_offset] === 0) {
31-
pixelData[pix_offset] = 0
32-
pixelData[pix_offset + 1] = 0
33-
pixelData[pix_offset + 2] = 0
34-
pixelData[pix_offset + 3] = 0
41+
pixelData[pix_offset] = 0;
42+
pixelData[pix_offset + 1] = 0;
43+
pixelData[pix_offset + 2] = 0;
44+
pixelData[pix_offset + 3] = 0;
3545
} else {
36-
pixelData[pix_offset] = 255
37-
pixelData[pix_offset + 1] = 255
38-
pixelData[pix_offset + 2] = 255
39-
pixelData[pix_offset + 3] = 255
46+
pixelData[pix_offset] = 255;
47+
pixelData[pix_offset + 1] = 255;
48+
pixelData[pix_offset + 2] = 255;
49+
pixelData[pix_offset + 3] = 255;
4050
}
4151
}
4252
}
43-
const maskImage = new ImageData(pixelData, prediction.width, prediction.height);
53+
const maskImage = new ImageData(
54+
pixelData,
55+
prediction.width,
56+
prediction.height
57+
);
4458

4559
// generate maskImage Canvas
46-
const maskOffscreen = new OffscreenCanvas(prediction.width, prediction.height)
47-
maskOffscreen.getContext("2d")!.putImageData(maskImage, 0, 0)
60+
const maskOffscreen = new OffscreenCanvas(
61+
prediction.width,
62+
prediction.height
63+
);
64+
maskOffscreen.getContext("2d")!.putImageData(maskImage, 0, 0);
4865

4966
// resize mask Image
50-
const resizedMaskOffscreen = new OffscreenCanvas(image.width, image.height)
51-
const ctx = resizedMaskOffscreen.getContext("2d")!
52-
ctx.drawImage(maskOffscreen, 0, 0, image.width, image.height)
53-
ctx.globalCompositeOperation = 'source-in';
54-
ctx.drawImage(image, 0, 0, image.width, image.height)
55-
return resizedMaskOffscreen
56-
}
67+
const resizedMaskOffscreen = new OffscreenCanvas(image.width, image.height);
68+
const ctx = resizedMaskOffscreen.getContext("2d")!;
69+
ctx.drawImage(maskOffscreen, 0, 0, image.width, image.height);
70+
ctx.globalCompositeOperation = "source-in";
71+
ctx.drawImage(image, 0, 0, image.width, image.height);
72+
return resizedMaskOffscreen;
73+
};
5774

58-
const predict = async (image: ImageBitmap, config: BodyPixConfig, params: BodyPixOperatipnParams) => {
59-
console.log("PREDICT_CHECK")
75+
const predict = async (
76+
image: ImageBitmap,
77+
config: BodyPixConfig,
78+
params: BodyPixOperatipnParams
79+
) => {
80+
console.log("PREDICT_CHECK");
6081
// ImageData作成
61-
const processWidth = (params.processWidth <= 0 || params.processHeight <= 0) ? image.width : params.processWidth
62-
const processHeight = (params.processWidth <= 0 || params.processHeight <= 0) ? image.height : params.processHeight
82+
const processWidth =
83+
params.processWidth <= 0 || params.processHeight <= 0
84+
? image.width
85+
: params.processWidth;
86+
const processHeight =
87+
params.processWidth <= 0 || params.processHeight <= 0
88+
? image.height
89+
: params.processHeight;
6390

6491
//console.log("process image size:", processWidth, processHeight)
65-
const offscreen = new OffscreenCanvas(processWidth, processHeight)
66-
const ctx = offscreen.getContext("2d")!
67-
ctx.drawImage(image, 0, 0, processWidth, processHeight)
68-
const newImg = ctx.getImageData(0, 0, processWidth, processHeight)
92+
const offscreen = new OffscreenCanvas(processWidth, processHeight);
93+
const ctx = offscreen.getContext("2d")!;
94+
ctx.drawImage(image, 0, 0, processWidth, processHeight);
95+
const newImg = ctx.getImageData(0, 0, processWidth, processHeight);
6996

70-
let prediction
97+
let prediction;
7198
if (params.type === BodypixFunctionType.SegmentPerson) {
72-
prediction = await model!.segmentPerson(newImg, params.segmentPersonParams)
99+
prediction = await model!.segmentPerson(
100+
newImg,
101+
params.segmentPersonParams
102+
);
73103
} else if (params.type === BodypixFunctionType.SegmentPersonParts) {
74-
prediction = await model!.segmentPersonParts(newImg, params.segmentPersonPartsParams)
104+
prediction = await model!.segmentPersonParts(
105+
newImg,
106+
params.segmentPersonPartsParams
107+
);
75108
} else if (params.type === BodypixFunctionType.SegmentMultiPerson) {
76-
prediction = await model!.segmentMultiPerson(newImg, params.segmentMultiPersonParams)
109+
prediction = await model!.segmentMultiPerson(
110+
newImg,
111+
params.segmentMultiPersonParams
112+
);
77113
} else if (params.type === BodypixFunctionType.SegmentMultiPersonParts) {
78-
prediction = await model!.segmentMultiPersonParts(newImg, params.segmentMultiPersonPartsParams)
79-
} else {// segmentPersonに倒す
80-
prediction = await model!.segmentPerson(newImg, params.segmentPersonParams)
114+
prediction = await model!.segmentMultiPersonParts(
115+
newImg,
116+
params.segmentMultiPersonPartsParams
117+
);
118+
} else {
119+
// segmentPersonに倒す
120+
prediction = await model!.segmentPerson(
121+
newImg,
122+
params.segmentPersonParams
123+
);
81124
}
82-
return prediction
83-
}
84-
125+
return prediction;
126+
};
85127

86128
onmessage = async (event) => {
87129
if (event.data.message === WorkerCommand.INITIALIZE) {
88-
const config = event.data.config as BodyPixConfig
89-
await load_module(config)
90-
bodyPix.load(event.data.config.model).then(res => {
91-
console.log("bodypix loaded default", event.data.config)
92-
model = res
93-
ctx.postMessage({ message: WorkerResponse.INITIALIZED })
94-
})
130+
const config = event.data.config as BodyPixConfig;
131+
await load_module(config);
132+
bodyPix.load(event.data.config.model).then((res) => {
133+
console.log("bodypix loaded default", event.data.config);
134+
model = res;
135+
ctx.postMessage({ message: WorkerResponse.INITIALIZED });
136+
});
95137
} else if (event.data.message === WorkerCommand.PREDICT) {
96-
const config: BodyPixConfig = event.data.config
97-
const image: ImageBitmap = event.data.image
98-
const uid: number = event.data.uid
99-
const params: BodyPixOperatipnParams = event.data.params
138+
const config: BodyPixConfig = event.data.config;
139+
const image: ImageBitmap = event.data.image;
140+
const uid: number = event.data.uid;
141+
const params: BodyPixOperatipnParams = event.data.params;
100142

101-
const prediction = await predict(image, config, params)
102-
ctx.postMessage({ message: WorkerResponse.PREDICTED, uid: uid, prediction: prediction })
143+
const prediction = await predict(image, config, params);
144+
ctx.postMessage({
145+
message: WorkerResponse.PREDICTED,
146+
uid: uid,
147+
prediction: prediction,
148+
});
103149
}
104-
}
150+
};

0 commit comments

Comments
 (0)