Image for post
Image for post


In this post we will make a pix2pix app that runs directly in the browser using Tensorflow.js. The app creates realistic images given a sketch. You can check the demo. If you are not familiar with Tensorflow.js then have a look at this tutorial. You can find all the code here.

What is pix2pix

pix2pix is a method that uses GANs to generate realistic images conditioned on certain inputs.

Typically the training set contains images of size (256, 2* 256)

In this tutorial we learn how to train, test and deploy machine learning models on the browser for free. Free GPU usage and free hosting. We will only work on a Google Colab notebook which enables you to train on a GPU for free. The end product of this tutorial will be the following notebook.


  1. Google Account
  2. GitHub Account


The following pipeline summarizes the idea

Image for post
Image for post

Setup a GitHub Page

First you need to create a GitHub page. Which is a free domain where you can create a web page for free and host your files there. You can create one using this guide. Once you are done with that you will have a web page with a similar domain to mine. …

We will create a simple tool that recognizes drawings and outputs the names of the current drawing. This app will run directly on the browser without any installations. We will use Google Colab for training the model, and we will deploy it on the browser using TensorFlow.js.

Image for post
Image for post

Code and Demo

Find the live demo and the code on GitHub. Also make sure to test the notebook on Google Colab here.


We will use a CNN to recognize drawings of different types. The CNN will be trained on the Quick Draw dataset. The dataset contains around 50 million drawings of 345 classes.

We will create a classifier using Keras to differentiate between positive sentiments and negative sentiments for movies. Then we will load the model to the browser for user prediction.

The Code

I created a repository on GitHub with the code required to follow the tutorial. If you spot any error or faced any problems please raise an issue there.

The Dataset

We will use the dataset for sentiment classification. The dataset contains 7086 statements about movies with labels. label 1 means positive sentiment and 0 means negative sentiment.

Preprocessing the data

For text analysis we need first to preprocess the data. First of all, upon uploading the data we need to split the sentences into words then populate the training set. …

Image for post
Image for post

Tensorflow.js is a library built on deeplearn.js to create deep learning modules directly on the browser. Using that you can create CNNs, RNNs , etc … on the browser and train these modules using the client’s GPU processing power. Hence, a server GPU is not needed to train the NN. This tutorial starts by explaining the basic building blocks of TensorFlow.js and the operations on them. Then, we describe how to create some complicated models.

One Note or Two …

If you want to play with the code I created an interactive coding session on Observable. …


Zaid Alyafeai

Masters student in computer science interested in computer vision and deep learning. @tensorflow writer

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