I explain how to export weights from a Keras model and import those weights in Keras.js, a JavaScript framework for running pre-trained neural networks in the browser. I show you later how to include the final result into a Phonegap Cordova mobile application.
MIT License
I explain how to export weights from a Keras model and import those weights in Keras.js, a JavaScript framework for running pre-trained neural networks in the browser. I show you later how to include the final result into a Phonegap Cordova mobile application.
We are going to create a mushroom detector application for our mobiles. For this task we need to use a machine learning approximation, and as a good approximation we'll use the KerasJS framework.
We can use this Python script in order to download images from Google base in a set if query strings:
google-images-download.py
This script will download 200 images for each of the specified mushroom families:
search_keyword = [
'Paxinus involutus',
'sarcosphaera',
'Inonatus tamaricis',
...
...
];
After this process end we'll have a folder with 200 images named with the mushroom family. We have to cut this folders and move them to a new 'train_dir' folder. We need also create a 'val_dir' folder. In 'val_dir' folder we will have a copy of all downloaded mushroom family folders but just with some images for the validation process (this images cannot be anymore in the 'train_dir' folder).
Now we can start the fine tuning process using the Python Keras script:
fine-tune.py.py
This script will train the mushroom detection model and finally will create as output some weights files we'll use in the next step:
model_mushrooms.json
model_mushrooms_metadata.json
model_mushrooms_weights.buf
We can use the script: predict.py
to check the accuracy of the training process.
We will now create a tiny JavaScript application that loads the previously saved model and weights. Create frontent code and distribution folders:
mkdir -p frontend/dist
Youll want to copy the extracted model data files into the frontend/dist directory:
cp model_mushrooms.json frontend/dist/
cp model_mushrooms_metadata.json frontend/dist/
cp model_mushrooms_weights.buf frontend/dist/
The Webpack Setup:
We will write the code in ES6 and prepare it for the browser using the webpack JavaScript code and asset bundler. So, install webpack and the webpack development server via npm by running
npm install webpack -g
npm install webpack-dev-server -g
You will also want to start a node project and install the required packages
npm init
npm install --save keras-js url-loader
I will use a very basic HTML file placed directly in the 'frontend/dist/index.html' distribution directory, which is generally not a good idea but works for this demonstration.
The actual model loading code will live inside 'frontend/entry.js'
cd frontend
webpack
To view the app, run:
webpack-dev-server
and open the indicated address (likely http://localhost:8080) in a web browser.
Just type in the file input the name of an image file located in the folder 'frontend/dist/' and click the 'Predict' button. After some seconds you will have as output the prediction of the model with the top 3 confidence probabilities.