Using P5js, deploy your Machine Learning Project Easy and Fast.
In the age of AI, the world is growing so fast and its changing the way we look to the technology.
We have evolve so much in the field of AI from simple linear regression to simple Perceptron, to the GANs, Self-driven car, robotic and more.
So in this post I wanna share some fun and easy way to deploy your machine learning model in the client web browsing using p5js + HTML/CSS which is an JavaScript client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
MODEL for project
We can use our own model or we can use teachable machine to train and download our model.
- For teachable machine go to Teachable Machine, and clicked get started button. Choose your project (Image, Audio or Pose Net).
- Change the class according to yourself and train your model. You can change the parameter too( advanced button).
- After training download the whole project or you can just download the model. Or you can Copy the link of your model but don’t forget to download the json file of your MODEL.
For Web Browsing:
You can modify according to yourself, but remember to have a script for p5js and ml5.js in index.html
p5js:
You can check the Coding train video for p5js more clear and details.
The steps are:
- Initialize the Variables and Load the Model
- Create the Video
- Get the Classification!
- Draw the label
You can find the whole code on my GitHub: https://github.com/jinsel/Fun-with-Machine-Learning/tree/master/computer_vision/image_classifier
It’s so easy to deploy your model by using the p5js and help from Teachable Machine. Try to be creative and have lots of FUN while learning the new concepts.
Try to look the ML5js, which has lots of simpler project.
