TensorFlow.js

Tensorflow.js is a library for machine learning in JavaScript. With Minze and Tensorflow.js you can use ML directly in your web components.

The following guide is based on a fresh Minze CLI installation.

Development

  1. Install @tensorflow/tfjs.
$ npm i @tensorflow/tfjs
  1. Navigate to the lib directory and create a new file.
src/
└─ lib/
   ├─ ...
   └─ my-element.js
  1. Paste the following code into the file.
import * as tf from '@tensorflow/tfjs'
import { MinzeElement } from 'minze'

export class MyElement extends MinzeElement {
  reactive = [['data', null]]

  html = () => `
    ${this.data ? `<div>${this.data}</div>` : '<div>loading...</div>'}
  `

  async onReactive() {
    // simple linear regression (y = x * 2)

    // features and labels
    const x = tf.tidy(() => tf.range(1, 101, 1).reshape([-1, 1]))
    const y = x.mul(2)

    // create the model
    const model = tf.sequential()
    model.add(tf.layers.dense({ units: 1, inputShape: [1] }))

    // compile the model
    model.compile({
      loss: 'meanSquaredError',
      optimizer: tf.train.sgd(0.0001)
    })

    // train the model
    await model.fit(x, y, { epochs: 10 })

    // make prediction (the result should be around 400)
    const xPred = tf.tensor([200], [1, 1])
    const yPred = model.predict(xPred)

    // assign to reactive property
    this.data = (await yPred.array())[0]

    // clean up
    tf.dispose([x, y, xPred, yPred])
    tf.disposeVariables()
  }
}
  1. Open the module.js and template.js files.
src/
├─ ...
├─ module.js
└─ template.js
  1. Define an export for your component at the bottom of module.js.
// ...
export * from './lib/my-element'
  1. Add your component to the template inside template.js.
export default `
  <my-element></my-element>
  <minze-counter></minze-counter>
`
  1. Run the npm dev script, and navigate to http://localhost:3000.
$ npm run dev
  1. Your component should be displayed in the browser. After a short while, the prediction will be shown.

Production

WARNING

The TensorFlow.js library is quite big in size and shouldn't be included in the production build of your components, but loaded separately.

For production, you need to adjust the rollup.config.js file, so that @tensorflow/tfjs package is not included in the output bundle. Additionally, you need to define a global for the CDN build.









 





 






// rollup.config.js

// ...
const createConfig = ({ format, file }) => {
  const config = {
    // ...
    external: [
      format !== 'umd' && /^minze/,
      /@tensorflow/
    ],
    output: {
      dir: resolve(__dirname, 'dist'),
      format: format,
      globals: {
        '@tensorflow/tfjs': 'tf'
      }
    }
  }
})
// ...

Using

Let's assume you published your library under the name my-awesome-package

npm

$ npm install minze @tensorflow/tfjs my-awesome-package
import Minze from 'minze'
import { MyElement } from 'my-awesome-package'

Minze.defineAll([MyElement])
<my-element></my-element>

CDN

If you have published your package to npm, you can also load it via a CDN link from unpkg or jsdelivr.

<html>
  <head></head>
  <body>
    <my-element></my-element>

    <script src="//unpkg.com/[email protected]" defer></script>
    <script src="//unpkg.com/@tensorflow/[email protected]" defer></script>
  </body>
</html>