Skip to content

Files

Latest commit

Apr 30, 2022
7c3ec8f · Apr 30, 2022

History

History

001_bodypix-worker-js

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Apr 30, 2022
Oct 31, 2021
Oct 1, 2021
Oct 18, 2020
Oct 31, 2021
Apr 11, 2022
Apr 30, 2022
Apr 30, 2022
Apr 3, 2022
Apr 3, 2022

README.md

This is webworker module for Bodypix.

bodypix

image

Install

$ npm install \@dannadori/bodypix-worker-js

API

generateBodyPixDefaultConfig: () => BodyPixConfig;
generateDefaultBodyPixParams: () => BodyPixOperationParams;
createForegroundImage: (srcCanvas: HTMLCanvasElement, prediction: SemanticPersonSegmentation) => ImageData

BodypixWorkerManager
init(config?: BodyPixConfig | null): Promise<unknown>;
predict(targetCanvas: HTMLCanvasElement, params: BodyPixOperationParams): Promise<any>;

Configuration and Parameter

export interface BodyPixConfig {
    browserType: BrowserType;
    model: ModelConfig;
    processOnLocal: boolean;
}

export interface BodyPixOperationParams {
    type: BodypixFunctionType;
    segmentPersonParams: PersonInferenceConfig;
    segmentPersonPartsParams: PersonInferenceConfig;
    segmentMultiPersonParams: MultiPersonInstanceInferenceConfig;
    segmentMultiPersonPartsParams: MultiPersonInstanceInferenceConfig;
    processWidth: number;
    processHeight: number;
}

export declare enum BodypixFunctionType {
    SegmentPerson = 0,
    SegmentMultiPerson = 1,
    SegmentPersonParts = 2,
    SegmentMultiPersonParts = 3
}

Step by step

Create environment and install package

$ npx create-react-app demo  --template typescript
$ cd demo/
$ npm install
$ npm install @dannadori/bodypix-worker-js

Add source image to public.

In this time, the name is "srcImage.jpg"

Edit src/App.tsx

Sample code is here.

import React from 'react';
import './App.css';
import {
  BodypixWorkerManager, generateBodyPixDefaultConfig,
  generateDefaultBodyPixParams, createForegroundImage,
} from '@dannadori/bodypix-worker-js'

class App extends React.Component{

  manager = new BodypixWorkerManager()
  config = generateBodyPixDefaultConfig()
  params = generateDefaultBodyPixParams()

  srcCanvas = document.createElement("canvas")
  dstCanvas = document.createElement("canvas")

  componentDidMount = () =>{
    document.getRootNode().lastChild!.appendChild(this.srcCanvas)
    document.getRootNode().lastChild!.appendChild(this.dstCanvas)
    const srcImage = document.createElement("img")
    srcImage.onload = () =>{
      this.manager.init(this.config).then(()=>{
        this.srcCanvas.getContext("2d")!.drawImage(
          srcImage, 0, 0, this.srcCanvas.width, this.dstCanvas.height)
        return this.manager.predict(this.srcCanvas, this.params)
      }).then((res)=>{
        console.log(res)
        const foreground = createForegroundImage(this.srcCanvas, res)
        this.dstCanvas.getContext("2d")!.putImageData(foreground, 0, 0)
      })
    }
    srcImage.src = "./srcImage.jpg"
  }

  render = ()=>{
    return (
      <div className="App">
      </div>
    );
  }
}

export default App;

build and start

$ npm run start