#native_company# #native_desc#
#native_cta#
  1. Introduction to Machine Learning with TensorFlow.js
  2. Run Existing Machine Learning Models
  3. Pre-Trained Models

Pre-Trained Models

Let's get physical

Sometimes, nothing beats holding a copy of a book in your hands. Writing in the margins, highlighting sentences, folding corners. So this book is also available from Amazon as a paperback.

Buy now on Amazon

As mentioned before, you can use TensorFlow.js to train models from scratch or load a model trained previously and use it. We call this using a model in inference mode[1], and that’s what we’re going to cover in this section.

Where can you find pre-trained models?

The easiest place to get started is to use one of the pre-trained models found on the TensorFlow.js website

TensorFlow Models From TensorFlow.js Website

You can find links to a set of different pre-trained models that have been curated and ensure work properly with TensorFlow.js.

How to load one of these models

Each model is a little different, so it’s worth reading it’s documentation. Taking a look at the Image Classification[2] example, to begin with, we usually have two methods.

Using script tags

The first is to use a script tag.

For example to use the MobileNet Image Classification Model[3] we need to add two script tags to our HTML, like so:

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]"> </script>

<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]"> </script>

The first script tag loads TensorFlow.js itself, the second script tag loads mobilenet library, which is based on TensorFlow.js; that’s why you need to load TensorFLow.js first.

Note

Using script tags is the easiest; it’s how we’ll be using pre-trained models in all our demos in this course. In a more complex production application, I recommend using a JavaScript bundler of some form.

Using a bundler

As your application gets more substantial, you may want to bundle up all the JavaScript files in your project into one and have one script tag in your project. I won’t be going into great depth here; there are several different bundlers of various complexity and feature sizes; I will demonstrate how to use one called Parcel.

Important

To use a bundler you need to be comfortable with Node.js, how to install packages and run commands from the command line.

If you were using the bundler Parcel.js[4] for instance, you would do something like this:

In your HTML file include your main javascript file, like so:

<html>
    <body>
        <script src="./main.js"></script>
    </body>
</html>

Then in your main.js file, you can use ES6 import statements to include the libraries that you need, for mobilenet this would be something along the lines of:

import "regenerator-runtime/runtime";

import * as mobilenet from '@tensorflow-models/mobilenet';

(async function () {
    // Load the model.
    const model = await mobilenet.load();

    // Once it's loaded you can call mobilenet functions
})();

Note

import "regenerator-runtime/runtime"; is needed to resolve an issue[5] with how Parcel handles async/await with imports.

First install parcel like so:

npm install -g parcel-bundler

Then in the project folder create a blank package file with:

npm init -y

and then finally run:

parcel index.html

This will discover all the dependant packages, create a folder called dist with index.html and a single javascript file will all the dependant packages rolled up into one.

You can find more information about using Parcel from their getting started[6] page.


Advanced JavaScript

This unique course teaches you advanced JavaScript knowledge through a series of interview questions. Bring your JavaScript to the 2021's today.

Level up your JavaScript now!