Deploying TensorFlow Models to the Web | by James Briggs | Towards Data Science

Developing machine learning models in Python can be a wonderful experience. The support and community for all things ML and data science in Python is simply unparalleled in any other language.
Despite this, there are very few ways to share those models with non-Python users — which for most of us, describes the majority of our colleagues and end-users.
At the other end of the spectrum, almost every person in the world with a computer has an internet browser.
Fortunately for us, an internet browser is all we need.
In this article, we will create a simple model using Python and TensorFlow. We will export it, and deploy it for use in web browsers with JavaScript and TensorFlow.js — we will keep it very simple. You do not need to know JavaScript to do this.
We will use a basic neural network to tell us whether a number between 0–10 is odd or even. Of course, we don’t need a NN to do this, but it means we keep this example incredibly straightforward — without any fluff.
This model will require a single number as input, and produce a single number as output. Odd numbers will produce a 1 and even a 0.
First, we create the training data:
x = []y = []for _ in range(10000):    num = np.random.randint(0, 101)  # generate random integer    x.append(num)    y.append(num % 2)
x = [2, 7, 4, 1, 9, ..., 0]
y = [0, 1, 0, 1, 1, ..., 0]
Now we have our data, let’s build the model:
It turns out that the modulo function is surprisingly challenging to represent. So, the NN does contain a reasonable number of parameters — and after training will occasionally tell us that 10 is an odd number — but it works most of the time.
Now we save it:
model.save('model_py/model.h5')
This saves our model as a HDF5 file — ready to be translated into the TensorFlow.js web format.
To convert the model, we first need to pip install tensorflowjs. Once installed, we run the tensorflowjs_converter from the command line (Command Prompt, Terminal, Bash, etc.).
Open the command line and navigate to our project folder (cd <directory_path> on Windows). Then run the converter by typing:
tensorflowjs_converter \     --input_format=keras \     model_py/model.h5 \     model_js
Here, we are telling tensorflowjs_converter to expect the keras model format. We then specify the model path model_py/model.h5. Lastly, we tell the converter to save the converted model in the model_js directory.
If we navigate to model_js we will find the following:
That .json file is our web-enabled model, ready for use in JavaScript.
First, we need to set up a local webserver. From this, we can emulate the behavior of a web page, which will contain our model and user front-end.
The easiest way to do this is by using the Chrome Web Server app. This is super lightweight and easy to use.
Once installed, navigate to chrome://apps/ and click the Web Server icon:
This starts the webserver but is likely not in the correct directory. Click CHOOSE FOLDER and navigate to the directory containing our project:
Now, typing localhost:8887 should show us the same directory within chrome:
This means our server is set up correctly. If localhost:8887 does not work, the server is likely being hosted on another port. To find the correct address, check the Web Server URL(s) list in the Web Server for Chrome window — and click the given URL.
Next, we need a web-page. First, create a file called index.html. Inside this, we create a form to provide input to our model, like so:
<input type="text"></input><button>Predict</button>
This, of course, does not do anything yet. We need to add some JavaScript.
We will write two functions, one to load the model, and another to make a prediction:
This code can be embedded within index.html by wrapping it within <script> tags. We also need to import tensorflow.js — which again can be done using a <script> tag.
Putting all of this into code gives us:
The final step is to connect what we enter within the <input> box to our model.
We can do this by getting the <input> element whenever predict is called. To do so, we give <input> a unique identifier id="userInput", then use this to pull the element into our function with document.getElementByID('userInput') — this gives us the whole element, so we specify the value by adding .value at the end.
Now we have connected the user given value to our predict function, we just need to trigger it. We simply add onclick="predict(model)" to <button>. All of this together gives us our complete code:
That is our NN running in a browser that anyone in the world can now use. Of course, we may want something that can do a little more than tell us if a number is even or odd — but we all start somewhere.
Going forward with this, there is so much more you can do. You already know the hard part — teaching a machine to learn. After this, all you need is a little bit of time, plenty of passion, and you can build some amazing things.
In reality, writing something as quick and straightforward as we did in this article is not how you would tackle a real project. There are plenty of steps and best practices we have skipped for the sake of learning and brevity.
Using a framework such as Angular or Node (Python alternatives include Django and Flask) makes building interactive, fast, and scalable web apps easy. Bootstrap is another fantastic tool that will take our terrible looking site and make it beautiful with almost no effort on our part.
I cannot speak for everyone, but in my personal experience, learning Angular, and styling web apps with Bootstrap, produces outstanding results — and can be picked up quickly.
If this is something you want to explore further, I would highly recommend both.
I hope you enjoyed this article — if you have any questions or suggestions, let me know!
Thanks for reading!