Source: Deep Learning on Medium
Create your web application to recognize images
On many occasions, we always like explaining the results of our machine learning models to our manager or to people who are not familiar with these topics. As an example, suppose we have a Deep Learning model that classify images, such as dogs, cats, … This model has good results in a test set or with some images that you have tried, but you would like that others people use their model and better if they use it from a web application. This is what this tutorial is about.
Table of contents
- Web application
Advantages of using tensorflow.js:
- Import an existing previously trained model and use it in your browser. The existing model can be created with Tensorflow or Keras. For this you have to install the
tensorflowjslibrary and run the following script (for more information you can go to the following link:
- Retrain an imported model. You can collect more data in the browser and using learning transfer you can continue training the model.
- Train in the browser. You can use tensorflow.js to define, train and run models in the browser. The script is very similar to writing in
For more information, you can go to the main website: https://www.tensorflow.org/js
For this tutorial we are going to use a trained model, with ImageNet images, called MobileNet. MobileNet is an architecture of Convolutionary Neural Networks (CNN) which was created to be executed on mobile devices¹. As you know, a Convolutionary Neural Network is a Deep Learning algorithm used to learn Machine Learning models related to images, such as: classifying images, detecting objects in an image or video,…²
Now let’s go for the interesting thing! We will make our web application to recognize images. For this we only need a text editor, you can use notepad ++, sublime or a simple block of notes (with which you feel more comfortable)
We will start with HTML , this will be responsible for structuring the web page. The file will be called index.html:
- In order for us to use the tensorflow.js library we need to call it from HTML as follows:
- We will show the probabilities and decisions of the predictions of the MobileNet model:
The output is as follows:
- We will add some text on our website:
The output is as follows:
Now we are going to add a section to upload images in our web application:
- The MobileNet model has been trained with images of size 224 * 224, so we will transform the images at these scales.
- First we create a function to upload images and display them in the browser:
- The following script will graph the probabilities of the predictions on a bar chart. We will use the library Google:
- Now we are going to load the pre-trained MobileNet model³:
- Finally, we will predict the uploaded image:
Putting all the codes together:
And that’s all, in a few lines you have created your web application that can recognize images.
In this link is the complete script.
Now let’s try our web application:
I hope you liked this tutorial.
Let me know in your opinions in the comments.