Setting up a TensorFlow.js Development Environment
Chapter 3
A development environment for TensorFlow.js includes a JavaScript code editor and a server-side Python IDE (Integrated Development Environment). While optional, commands are executed in Python (or other machine learning languages) on the server to learn from data and generate a model that can be used in a browser like Microsoft Edge. This chapter looks at different tools that can be utilized to write machine learning solutions for the web browser.
You would be doing pretty much all your development in a text editor and/or web browser. However, you will need all the help you can get, and this entails installing tools or code editors to write machine learning code for web browsers, namely in JavaScript. Alternatively, you can also install editors, IDE’s, or client-side tools to write Python, but it is unlikely you would write or execute code on the server.
Machine Learning is primarily a server-side activity with an emphasis on compute-intensive operations which are ideal for execution on beefy machines to generate models for consumption by applications. You will need Visual Studio Code and Jupyter to develop using the TensorFlow.js library, VS Code for writing JavaScript code and markup, and Jupyter for Python to create machine learning models, or to convert existing machine learning models to JSON for use in the web browser.
There are following 2 ways you can set up a development environment depending on whether you want to install on your drive or use a cloud-based environment:
Local
Cloud (Remote), requires Azure subscription
Use the following simple steps for local installation of the tools for development. This ensures that an Internet connection is not required to install or work with developing ML solutions for the web browser.
Local Installation
Visual Studio Code
If you want to use some other code editor like Notepad++ or Sublime, you can choose to install it on your computer. This book uses Visual Studio Code to write HTML markup and JavaScript code; the following set of steps can be used to install VS Code locally.
Go to the Visual Studio Code download page at https://visualstudio.microsoft.com/
Hover over and click the version you want to download (see Figure 3-1).
Figure 3-1: Visual Studio Code download page
After the download finishes, double-click the downloaded file to install the development environment locally on your computer.
Once the installation starts, select a location in the local drive where Visual Studio Code is supposed to reside.
After VS Code is installed, double-click the Visual Studio Code icon to start the IDE (Integrated Development Environment).
Figure 3-2: Visual Studio Code IDE
Anaconda
Go to the Anaconda download page at https://www.anaconda.com/distribution
Go to Products Individual Edition on the top menu, and click the Download button (see Figure 3-3a)
Figure 3-3a: The Anaconda Distribution Page
You will scroll down on the page to a list of Anaconda Installers as shown below in Figure 3-3b.
Figure 3-3b: Anaconda Installers
Select the installer that matches your requirement. (Sign-up if you have not done so already.)
After the installation starts, select a location in the local drive where Anaconda will be installed.
Click Anaconda Navigator in the Start menu to open Anaconda.
Click the Launch button under Jupyter Notebook as shown below in Figure 3-4a.
Figure 3-4a: The Anaconda Navigator Window
Jupyter Notebooks will open in a new web browser window, as shown in Figure 3-4b.
Figure 3-4b: Jupyter Notebook in Web Browser
You can run Python Notebooks in Visual Studio Code as well by connecting to a remote Jupyter server, and executing the Python code cells in the Visual Studio Code environment. You can get more details on how to achieve this by going here: https://code.visualstudio.com/docs/python/jupyter-support
Cloud Solutions
GitHub Codespaces
Sign-in to the GitHub site in your web browser at https://github.com
Create a new GitHub repository by clicking on the New button.
On the Create a new repository page, specify the GitHub repo URL, a description (optional), visibility setting (public or private), check the Add a README file box, and click the Create repository button, as shown in Figure 3-5.
A new code repository will be created.
Figure 3-5: The Create A New Repository Page on GitHub
On the repository page, go to Code Open with Codespaces and click the New Codespace button, shown in Figure 3-6.
A new codespace for the repository will be created. Keep in mind that the first time it will take a while to open up due to the provisioning process, but on subsequent visits, the navigation will be quick.
Figure 3-6: New Codespace for the GitHub Repository
After a development has been created, it can be used to add files and write code, as shown in Figure 3-7.
Figure 3-7: The GitHub Codespaces Development Environment
Tip Other than hosting your Jupyter notebooks in a GitHub repo, some other cloud-based options are Jovian ML (https://www.jovian.ai) and Deepnote (https://deepnote.com). You can sign-up for these services using either your Google or GitHub account. Neither of these services are discussed here but are fairly straight-forward to understand and use.
GitHub Repo and Binder
As of the writing of this book, GitHub only offered a static view of the notebooks and does not allow the contained Python source code to be executed in-place. A good option to write and run Jupyter code in the cloud is with Binder, as shown in the steps below:
Go to the Binder site at https://mybinder.org
Specify the URL of the GitHub repository you want to edit, as illustrated in Figure 3-8 below.
Click the Launch button.
A container-based environment will be created.
Figure 3-8: The Binder Website UI
Refer to Figure 3-9 below to view the created Jupyter repository on Binder.
Figure 3-9: Jupyter Notebook Repository on Binder
Note Both of the cloud options mentioned above are free for developers and hobbyists as of writing of this book. For enterprise implementations, refer to the cost of your options before you make a final decision on which technologies to use.
TensorFlow.js Script
To use TensorFlow.js in client-side machine learning solutions, developers can utilize the following 2 ways:
Content Delivery Network (CDN)
Local Script Deployment
Content Delivery Network (CDN)
You can link directly to the TensorFlow.js script file and visualization file by providing the CDN URLs as shown below:
Listing 3-1a: TensorFlow.js script and visualization CDNs in JavaScript script tags
Keep in mind that the tf.min.js script file at the CDN link must be in the referencing location’s line-of-sight, which means that the file which references the TensorFlow script file must be able to access the script file through its Internet connection and firewall rules.
The CDN URLs change with newer version of the script files and will need to updated every time. Use the script URLs in Listing 3-1b to allow the latest to be referenced in case of version updates.
Listing 3-1b: Reference latest TensorFlow.js script URLs
Local Script Deployment
Developers can also download the tf.min.js script file to their local hard drive if the developer’s computer is not always connected to the Internet or requires making a change to the network firewall rules. This can be achieved by downloading the package using the following npm command in the cmd or terminal window.
Tip The npm (nods.js package manager) command can be issued from the MS-DOS command prompt i.e. cmd, or the Visual Studio Code terminal window. To open the terminal window, go to the Terminal menu item at the top and select New Terminal from the drop-down in VS Code, as shown in Figure 3-10.
Listing 3-2: The npm command to install TensorFlow.js
Figure 3-10: Visual Studio Code Terminal Window
Tip The command in Listing 3-2 requires a package.json file in the folder where the npm command is executed. To generate the package.json file, create a sub-folder in the parent folder using the following commands at the command prompt.
To create the .json file in the created sub-folder, use the following commands.
You have the option to specify your own values for the settings once you issue the above command, or you can simply press the Enter key on your keyboard at every question to use the default value.
You can link to the minified tf.min.js file or to the un-minified tf.js script file in the node_modules\@tensorflow\tfjs\dist sub-folder after you execute the npm command.
Linking to Scripts
Developers can develop and link to external JavaScript files containing the machine learning logic in Visual Studio Code by using the script tag e.g. for a markup file named mypage.html, a link to the associated script file mypage.html.js can be added using the following tag.
Listing 3-3: Reference to the .js file in the script tag
The reference to the script file as shown in Listing 3-3 must be made after the reference to the TensorFlow.js file.
Tip The .js script file exists independently of the .html markup file. However, it is ideal that the referenced script follow the same naming as the markup file e.g. in Listing 3-3, for a markup file named mypage.html, the corresponding script file is named mypage.html.js. This ensures that the files always appear together when viewed in the explorer, and that the names represent the logic associated with the UI markup.
Visual Studio Code Extensions
Although optional, extensions add new features and themes to the Visual Studio Code IDE that do not exist in the development environment out-of-the-box. You can learn more about extensions by following this link:
https://code.visualstudio.com/docs/introvideos/extend
The three extensions that will be used judiciously throughout this book are:
HTML Boilerplate
GitHub Pull Requests and Issues
HTTP Server
HTML Boilerplate
Description
Developers can choose to write boilerplate HTML from scratch or simply copy the code from an external source. The HTML Boilerplate extension, however, can quickly generate basic HTML code that developers can use to create new client-side scripts or web browser UI.
URL
https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate
How to use
Create a new file in the Visual Studio Code IDE by right-clicking a folder in the Explorer pane, and select New File in the popup menu.
Type html5-bolierplate and hit tab on the keyboard.
The generated HTML code is shown in Figure 3-11a below.
GitHub Pull Requests and Issues
Description
You can use this extension to pull source code from several GitHub repositories of your choice. Make sure you have Git installed locally and a local folder to house the downloaded code. You can install Git on this site: https://git-scm.com/downloads
Figure 3-11a: Boilerplate HTML Code in the Visual Studio Code IDE
URL
https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github
How to use
After you have installed the extension in Visual Studio Code, go to the online GitHub repository you want to clone in your web browser.
Fork the repo by clicking the fork button in the upper right-hand corner.
You may be asked to log into the GitHub site using your credentials, if you haven’t done so already.
Click the Source Control icon on the left side of the Visual Studio Code IDE. Make sure you have all workspaces closed. You can close an existing workspace by going to File Close Workspace in the top menu.
Click the Clone Repository button in the Source Control pane.
Select Clone from GitHub in the drop-down list at the top, as shown below in Figure 3-11b. A Select Folder dialog will be displayed.
Select a folder in the local drive to pull the source code to.
Figure 3-11b: Pulling GitHub Source Code to Visual Studio Code IDE
HTTP Server / HTML Review
Description
Programmers have a tendency to open HTML web pages by double-clicking them in Windows Explorer. Use this extension to view web pages in the web browser directly from the Visual Studio Code IDE using HTTP.
URL
https://marketplace.visualstudio.com/items?itemName=Flixs.vs-code-http-server-and-html-preview
How to use
Open an HTML file in the Visual Studio Code IDE.
Press the F1 key on the keyboard to open the command drop-down at the top of the window.
Select Simple HTTP Server: Create HTTP Server With Current File from the drop-down list.
Click the Open in Browser or Open in Visual Studio button to open the file using HTTP, shown in Figure 3-11c below.
Figure 3-11c: Open a file using HTTP
Key Takeaways
The text of this chapter explains how to setup a development environment for machine learning in the web browser using TensorFlow.js. The development environment can either be local or cloud-based. Topics in this chapter discuss the following:
Installation of Visual Studio Code and Anaconda for local development, and setup of GitHub Codespaces and Binder in the cloud
TensorFlow.js script installation and use
Visual Studio Code extensions for web browser development
Last updated
