Original article was published by Similoluwa Okunowo on Deep Learning on Medium
Building a Plant disease classification web app in Keras and Tensorflow.js (PART 2)
Hi friend, this is the PART 2 of the two-part tutorial series on building a web app with Keras and Tensorflow.js. I encourage you to read the first part HERE.
LINK TO FIRST PART :-
In the first part of this tutorial, i showed you how to build/train a MobileNet model to classify diseases in images of plants (crop leaves) downloaded from Kaggle (using Kaggle API). We did this by employing the concept of transfer learning. I genuinely hope you learnt alot from that part.
This is a demo of the final application we will be building (Please ignore the UI ) :-
Requirements / Pre-requisites :-
- Google Colab (We used this extensively in the first part, I assume you have this set-up already),
- The previously saved MobileNet model from the first part of the tutorial (mobilenet_model.h5),
- An IDE for writing HTML, CSS and Javascrip codes (i.e VSCode, Sublime Text etc.),
- And most importantly, the willingless to learn.
So, let’s get started.
Codes and Implementation
The codes and implementation will be explained in well-detailed steps to preserve structure and aid understanding.
STEP 1 :- Converting the Keras Model to a Tensorflow.js compatible model
To use this converter, we need to install it in our Google Colab environment, Kindly run this command in a new code cell in Colab :-
# This downloads/installs tensorflowjs into your Google colab environment !pip install tensorflowjs
Next up, create a new folder in your base directory (i.e PLANT DISEASE RECOGNITION folder) where the converted Tensorflow.js models will be stored :-
Next up, we can easily convert the keras model to a tensorflow.js model using the tensorflowjs_converter command. The arguments for the tensorflowjs_converter are the input_format (keras),directory containing the saved model (‘models/mobilenet_model.h5’), and the output directory for the converted model (‘tensorflowjs-model/’) Please note that this can also be done in any IDE or environment of your choice. Run this command in a new code cell :-
!tensorflowjs_converter --input_format keras models/mobilenet_model.h5 tensorflowjs-model/
Voila !, Our model has been successfully converted, and the output files are stored in a zipped file in the specified output directory (‘tensorflowjs-model/’). We can easily unzip this and download directly to our Local machine (computer) :-
Great work so far, we have successfully downloaded our converted model. The ‘model.json’ file is the main file which will be used to load the model on a browser to make predictions. Please download the folder ‘tensorflowjs-model’ folder and ‘class_indices.json’ file from your Google Drive into your Local machine.
STEP 2: Creating the Frontend for the Web application using HTML and CSS
This section involves creating the frontend for the web application. I won’t really walk you through the steps involved in creating the frontend explicitly, as that is not the core objective of this tutorial. However, only simple HTML elements and CSS styles will be used.
Folder Structure for the Project :-
PLANT DISEASE CLASSIFIER APP
The major HTML element used is the <input/> element for uploading image files to the browser for prediction. The Basic structure of the HTML webpage is shown below (It’s also well-commented for beginners) :-
‘style.css’ — The external CSS Stylesheet containing the simple styling for the website (I encourage you to tweak this to your preferred taste) :-
Great work so far, you can open the index.html file from your IDE/ Text editor in your browser to see the interface.
<script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/2.0.1/tf.min.js"></script><script src="script.js"></script>
Next up, we apply the initialized model on the transformed image in the browser to generate predictions.
The predict() function simply loads the uploaded image, applies the required transformations on the image (i.e re-scaling), and generates the predictions.
Then we need to compute the index of the Maximum value in this array (using tf.argMax() method). The output is the class with the highest probability score because we used the ‘softmax’ activation function while compiling our model. This index can then be used to get the class name from the class_indices Object, which is then displayed in the browser. The percentage of accuracy is also displayed. Please, i encourage you to read through the following steps and relate them to the codes written above.
STEP 4 :- Hooking it all up
Voila !, you have successfully converted your Python Keras model to a Tensorflow.js model to make inferences in yout browser. I’d implore you to take your time to understand the entire process, and then improve the functionality.
This project can be deployed for public use on Github pages for free, Netlify or any other hosting service. My version of the project can be accessed via this URL :- https://bit.ly/3k2MASg
Learning Objectives Achieved
Congratulations friend, for learning something new and useful. I really the two tutorials were informative enough and well-structured to aid understanding. We have completed the following learning objectives in the PART 1 and PART 2 of the tutorial series :-
- Understanding how to download public datasets from Kaggle using Kaggle API,
- Understanding how to build a transfer learning model with MobileNet and Keras, and train the model on the downloaded dataset seamlessly,
- Understanding how to deploy the model as a web application for inference on any browser.
There are a lot of ways to harness the knowledge gained from these tutorials to build other useful solutions. This is only a basic use-case, and i really encourage you to improve the functionality and optimize the solution.
Link to Github Repository :-
Please connect with me on LinkedIn if you have any questions or contributions.
Kindly leave claps to acknowledge my effort. I’d genuinely appreciate that, Thanks for reading Friend !
Stay safe folks, and keep harnessing useful knowledge. Thanks for reading !