Multi-Class Classifier in the browser using Tensorflow.js

Ashutosh Verma
Jun 29, 2020 · 6 min read

Most of us are familiar with running those machine learning codes in our jupyter notebooks or Google Colab but obviously to make it presentable we would need to deploy the whole ecosystem for which we would require knowledge of Python web server framework and overall structure of interactive Python data applications. So to overcome all this hardship we are going to use Tensorflow.js which will allow us to develop machine learning models in JavaScript, and use machine learning directly in the browser or Node.js.

In this blog, we’ll take a look at and step through an example of how to read data from a CSV file, and use it to train a multi-class classifier. We will be working with breast cancer data adapted from the Wisconsin dataset.

Things are pretty easy as compared to Tensorflow using python but still, you will need the following things installed before you get started,

  1. Google Chrome
  2. VSCode or Brackets
  3. Web Server for Chrome

Step 1: Create a Simple Web Page

Inside a folder create a file ML_Classifier.html with the following code.

Step 2: Downloading the data

Download the dataset from this link.

The data has already been split for you into a training and a validation set. If you look at the CSV files, you will notice that the first column corresponds to the ‘diagnosis’. The values in this column correspond to the diagnosis where a value of 1 indicates malignant cancer, and a 0 indicates a benign one.

Step 3: Importing Tensorflow JS

Add a script tag below the head and above the body to load the TensorFlow.js file.

Step 4: Reading the Dataset

We will read the data from the wdbc-train.csv file and we will specify the label of the dataset by setting the isLabel to true for ‘diagnosis’.

Repeat the same process for testing data present in ‘wdbc-test.csv’:

Step 5: Data Transformation

We will convert the data into arrays. In this case, the labels are integers, not strings. Therefore, there is no need to convert string labels into a one-hot encoded array of label values.

Repeat the same process for testing data:

Step 6: Building the model

First, we would need to specify the number of input features. You can get the number of features from the number of columns and the number of labels in the training data.

First, we define the model as a tf.sequential then we will create a neural network that predicts 1 if the diagnosis is malignant and 0 if the diagnosis is benign. Our neural net has a hidden layer with 10 nodes with a ReLu activation function and an output layer having a single output unit with a sigmoid activation function.

Compile the model using the binaryCrossentropy loss, the rmsprop optimizer, and accuracy for your metrics.

Step 7: Training and Testing the model

To do the training, we use model.fitdataset.You can pass the data in as the first parameter as you can see here. Then you pass a list of JSON style name values with things like the epoch specified as 100, the callbacks like this and the converted testing data will act as our validationData. The callbacks specify the list itself and which we specify the behavior on epoch ended. Well, we’ll just log the epoch number, the current loss, and current accuracy.

Step 8: Putting everything together

Training should be an asynchronous function because it will take an indeterminate time to complete and we don’t want to block the browser while this is going on. So it’s better to do it as an asynchronous function that calls us back when it’s done. You call it and parse it the model that you just created. Then when it calls back, the model is trained.

Here’s the full code with run() as our asynchronous function:

Step 9: Running the code

  1. Open the Chrome browser, go to this link and click on launch app.

2. Click on “CHOOSE FOLDER” and select the folder that contains the examples or exercises you want to run. For this example, we are going to run the ML_Classifier.html file.

3. Once you have chosen the correct folder, you can click on the Web Server URL (http://127.0.0.1:8887).

4. Once you click on the Web Server URL, this will open a new tab in your Chrome browser. You can now click on the HTML file you want to run. In this case, we are going to run the ML_Classifier.html file.

5. A new blank page will appear. Press Ctrl + Shift + I (Developer Tools) and select the console to see your output.

6. If you can see your accuracy close to 90. Well, congratulations you made your first neural network using javascript.

If you want full code you can check this link for my GitHub account.

Hope you all like it. Do leave your feedback in comments.

Thank you for reading!!!

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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