Easily create an AI app for your phone — zero coding experience

I used Teachable Machine and P5JS to create a simple AI webapp. The app shows the names of each part of my motorbike, a Royal Enfield classic 350, when I pointed at them using my phone camera. Here is the video of the same:

Sharing this video online got many friends curious about how this works, and I thought I’ll write a tutorial on the same.

This can be done in 3 larger steps and require very very minimal coding. In-fact anyone can do this with a laptop, a smartphone and a wifi connection. I’ll try to explain the first step with existing tutorial videos and, the second and last step in detail. Ok let’s get started.

Step 1 : Using Teachable Machine(TM)

Teachable Machine is a beautiful tool to try out AI based experiments like image classification, sound classification etc. You could use it to classify your vegetables, create an app to teach your child different shapes etc.

Starting off with teachable machine is very straight-forward and intuitive. Nevertheless, here are the videos from Teachable Machine “get started” series to get you started. (I won’t go into the details of how to use TM here.)

Gather Samples : https://youtu.be/DFBbSTvtpy4

Train your model : https://youtu.be/CO67EQ0ZWgA

Export model : https://youtu.be/n-zeeRLBgd0

Practice till here and get comfortable with TM. We can then move on to creating the mobile web-app.

Step 2 : Creating the data for the app

So Teachable Machine currently works only for Desktop. But this implementation extends it to the mobile phone also. The first step is gathering the images.

What I did is:

1. Recorded a video for each part of the bike using my phone.
2. Then converted the videos into frames (images) using Adobe Media Encoder (You could also try this ). Images of each part was put into different folders. (So there was a folder for “fuel-tank” images and there was another folder for “engine” images)

Each part’s images in a separate folder

4. The model was then trained.

Step 3: Making the app

Ok, now begins the part where you set up the webapp in the smartphone:

1. Go to https://github.com/nurecas/visualmanual and click Clone/Download — Download Zip. (You might have to create a Github account if you do not have it already). Extract it to a folder, preferably in Desktop, rename the folder to RoyalEnfield .

2. Open RoyalEnfield.js inside the folder in a text editor like Brackets, MS visual studio, notepad etc.

3. Now open your Teachable Machine experiment and press “export model”.

4. Now under Tensorflow.js, you will find “Upload my model”. Click that.

5. Once upload is complete, copy the generated link.

6. Open the text editor with RoyalEnfield.js. In line 4, replace the URL, i.e,

change

let imageModelURL = ‘https://teachablemachine.withgoogle.com/models/s379EsNn/';

with

let imageModelURL = ‘the URL you just copied’;

7. Save the file.

8. If you are in Mac, open terminal (CMD+Space, type in Terminal).

If you are in Windows, open Command Prompt (You might have to install python in this case)

9. Use “cd” command to change your path to the folder you extracted. For example, if you are in Desktop, type in:

cd Desktop/RoyalEnfield/

10. Type this command to start a local server (this is for MacOS Catalina or latest Windows versions):

python -m 
 http.server 8013

If this doesn’t work and you have an older OS, type this:

python -m SimpleHTTPServer 8013

<If you can create an HTTPS server instead of an HTTP server, that is highly recommended. The step here creates a simple HTTP server and should only be used for testing/prototyping/experimenting>

11. Once the server is started, test if everything is good in the browser in your computer:

Type in localhost:8013 in the address bar of your browser and press enter. If all good, continue.

12. Now you need to find your computer’s local IP address. This can be found by clicking on the WiFi icon on top in the Mac and selecting “Open Network Preferences”. You will see “WiFi is connected to *** and the IP address is x.y.z.a “. Note down this numerical IP address (x.y.z.a)

For Windows, check this link .

13. If all good, then connect your phone to the same WiFi as the Mac.

14. Open Chrome in your phone and type in chrome:flags and press enter.

15. Search for “ Insecure origins treated as secure ”. In the text box that shows up type in your IP address and port 8013. For example if your IP is 192.168.23.3, type in http://192.168.23.3:8013 .

<I know this step sounds creepy but this step has to be done because the server we setup is an HTTP server instead of the secure HTTPS server. In case you created an HTTPS server by some other methods, you can ignore this step.>

16. Now change disabled to enabled.

< Please make sure you change it back to disabled after playing with the experiment >

17. Press Relaunch

18. Alright! We have reached the end. Now type in your IP + port (eg. http://192.168.23.3:8013/ ) in the web browser in your phone and press enter. If all steps were done correctly, you will have it working.

If in case you see a black screen, try steps 15–17 again.

I hope this helps you get up and running with some simple AI experiments. If you run into any problems, feel free to drop me a message in my Twitter : https://twitter.com/@fabinrasheed

All credits goes to the amazing team behind Teachable Machine and P5JS.

Follow my works at : www.nurecas.com

Thank you :)