How to bundle Tensorflowjs model in npm package

Introduction

Premise

Creating npm package

$ ls resources/bisenetv2-celebamask/
group1-shard1of3.bin group1-shard2of3.bin group1-shard3of3.bin model.json
rules: [
{ test: /\.ts$/, loader: 'ts-loader' },
{ test:/resources\/.*\.bin/, type:"asset/inline"},
{ test:/resources\/.*\.json/, type:"asset/source"}
],
import * as tf from '@tensorflow/tfjs';

import modelJson from "../resources/bisenetv2-celebamask/model.json" // <------ (1)
import modelWeight1 from "../resources/bisenetv2-celebamask/group1-shard1of3.bin" // <------ (2)
import modelWeight2 from "../resources/bisenetv2-celebamask/group1-shard2of3.bin" // <------ (2)
import modelWeight3 from "../resources/bisenetv2-celebamask/group1-shard3of3.bin" // <------ (2)

export class BiseNetV2{
model: tf.GraphModel | null = null
canvas = document.createElement("canvas")

init = async () => {
const modelJson2 = new File([modelJson], "model.json", {type: "application/json"}) // <------ (3)
const b1 = Buffer.from(modelWeight1.split(',')[1], 'base64') // <------ (4)
const modelWeights1 = new File([b1], "group1-shard1of3.bin") // <------ (4)
const b2 = Buffer.from(modelWeight2.split(',')[1], 'base64') // <------ (4)
const modelWeights2 = new File([b2], "group1-shard2of3.bin") // <------ (4)
const b3 = Buffer.from(modelWeight3.split(',')[1], 'base64') // <------ (4)
const modelWeights3 = new File([b3], "group1-shard3of3.bin") // <------ (4)
this.model = await tf.loadGraphModel(tf.io.browserFiles([modelJson2, modelWeights1, modelWeights2, modelWeights3])) // <------ (5)
}
predict = async (targetCanvas: HTMLCanvasElement, processWidth: number, processHeight: number): Promise<number[][]> => {
<snip...>
}

}

Creating Application using this npm package

const mod = await import('bisenetv2-js')
const lib = new mod.BiseNetV2()

Repository

I am very thirsty!!

Finally

  • Replacing models becomes more difficult.
  • The size of the package increases.
  • Models that cannot be modified cannot be bundled (probably)

--

--

--

Software researcher and engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Creating an SVG Image Map with Figma and a Touch of Javascript

My Three Current Conference Talk Proposals

React-Redux

Making HTTPS request in React

Input Improvements

Clean vs Dirty Code in React

Understanding Flexbox in React Native

React array.map() loop components

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
dannadori

dannadori

Software researcher and engineer

More from Medium

Day152— convert SVG to PNG in JavaScript

DenOAuth: solution = Deno + OAuth 2.0;

Deep Linking in Meteor JS— A Step by Step Guide with Examples

Deep Linking in Meteor JS- A Step-by-Step Guide with Examples

Kharagpur Winter of Code (KWOC) Project Report