Surfacing TensorFlow.js Solutions
Chapter 12
Machine learning solutions developed using the TensorFlow.js library can be surfaced to end-users using one of the following three ways:
JavaScript API
Node.js
Web-browser extension
The steps for developing and deploying TensorFlow.js solutions are discussed in the previous chapters. After web developers and data scientists create a machine learning application using JavaScript and the TensorFlow.js library, it can be used in the web browser, either as a web application or as a Google Chrome extension. Chrome extensions execute in the web browser; web applications are accessed through a web browser, they can either compile and execute on the server or the client. This can be illustrated with Figure 12-1.
Note The illustration in Figure 12-1 is very similar to the one in Figure 13-2. Keep in mind that Figure 12-1 pertains to this chapter and focuses on the type of machine learning applications (web browser-based applications and browser extensions) developed using the various flavors of the TensorFlow.js library.
Deployment as a Web Application
If all processing is done on the client and no interaction with the server is needed for data or processing, deployment can be as simple as copying the files to a remote location where the web site is hosted. However, for server-side processing, some kind of deployment automation is typically implemented.
Figure 12-1: TensorFlow.js API's
This section discusses deployment of the web application using Azure DevOps (formerly Visual Studio Online). There are other options for continuous integration and deployment using other platforms. This section focuses on one such cloud-based option for deployment as web application that uses either one of the two: JavaScript API and Node.js.
JavaScript API refers to using client-side script along with either, static web pages or a dynamic site. Node.js allows web pages to be developed in JavaScript but are processed on the server with the Node.js framework and sent across the wire to be viewed in the web browser by each user.
Installation
JavaScript API refers to using client-side script along with static web pages
Usage
[TODO]
Deployment as a Chrome Extension
Although extensions are built mainly for the Google Chrome web browser, they can be used by the latest web browser, Microsoft Edge, based on the Chromium open-source project. The following text lists the steps for installation and use of the extensions in Google Chrome. If you intend to install and use Chrome extensions in the latest version of Microsoft Edge, follow the relevant instructions from the web.
Note Detailed instructions for creating a Chrome extension can be found online on the Google Chrome site at https://developer.chrome.com/extensions/getstarted
Installation
Assuming the extension has already been created in a separate folder, follow the instructions below to package and install the Chrome extension in a Google Chrome web browser.
Build/test the developed extension using the command-line console window using the yarn statement in Listing 12-1a. The code listing assumes that the folder already contains a package.json file with the details like name, version, description etc. for the web browser extension.
Listing 12-1a: Statements to build a Chrome extension
Note In order for the above command to work, you need to have Yarn installed, which also needs Node.js to be present on your computer. The download links are https://classic.yarnpkg.com/en/docs/install/ and https://nodejs.org/en/download. Lastly, you will need to have yarn added to the PATH on your computer.
Install the extension in the web browser:
Open Google Chrome on your computer.
Navigate to chrome://extensions in your web browser.
Turn on Developer mode in the top-right corner of the window.
Click the Load unpacked button (see Figure 12-2a).
Figure 12-2a: Enabling ‘Developer mode’ and loading the unpacked extension
Select the distribution folder by navigating to the directory, selecting it, and clicking the Select Folder button in the Select the extension directory dialog.
The distribution folder is specified in the package.json file in the scripts section.
A separate tile shown in Figure 12-2b below displays the loaded extension.
Figure 12-2b: Loaded Extension in the web browser
Usage
Follow the instructions below to use the web browser extension.
On your computer that has the extension installed, open the Google Chrome web browser.
Open a web page (with an image) in the web browser.
Alternatively, you can go to Google Images at http://images.google.com
Right-click an image and select ‘Classify image with TensorFlow.js’ from the pop-up menu as shown in Figure 12-2c.
Note Instead of creating one from scratch, the browser extension in this example already exists on GitHub at https://github.com/tensorflow/tfjs-examples in the ‘chrome-extension’ folder.
Figure 12-2c: Right-click an Image in the Web Browser
The classified image caption is displayed at center of the picture as shown in Figure 12-2d below.
Figure 12-2d: Caption displayed as a result of Image Classification
Key Takeaways
This short chapter covers the options for surfacing TensorFlow.js solutions for use in a web browser, and discusses the following topics:
Deployment options for the TensorFlow.js library
Installation steps for web applications using Azure DevOps
Steps for installation and use as web browser extensions
Last updated
