Tfjs image training website?

Does anyone know of links to demo TFJS sites with working image training and classification models working fully in the browser on the clientside? Either from scratch or transfer learning using mobilenet etc.

Here is a page I made years ago using TFJS version 1.0.2

https://www.rocksetta.com/tensorflowjs/beginner-keras/28keras-full-image.html which kind of shows what I want just with a more modern interface. Perhaps loading the images from disk or localstorage.

I took a few years off using TFJS to do tinyML work on Arduiino microcontrollers but now would like to get back into TFJS. Wondering who are the top people for image classification webpage projects?

P.S. I teach High School ML and Robotics also coding, 3D printing and animation.

@Jeremy_Ellis yes, feel free to have a look here:

I think it covers all functionality from your screenshot + many more.

Enjoy

1 Like

+1 to Teachable Machine. It does transfer learning on Mobilenet, and it’s really easy to set up an image classification demo with a small set of classes. It can also export to TFJS, TF, or TFLite.

Thanks @Matthew_Soulanille and @Dennis you are right that Teachable Machine is an awesome site, but it is fully cloud based and I want to make something much simpler but client based so that it will also work off-line and be reasonably simple to understand. “I teach robotics and ML in a High School”

I am not a beginner having made > 50 TFJS demos most of are on this site https://hpssjellis.github.io/beginner-tensorflowjs-examples-in-javascript/

I just haven’t done any TFJS for a few years. I am wondering if anyone has made a simpler version of the Teachable Machine. Preferable using vanilla javascript.

An earlier version of Teachable Machine was open sourced on GitHub. It doesn’t work offline as it’s currently written, but it could probably be modified into a simpler offline example. It hasn’t been updated in a long time, though (it uses TFJS 0.11.7!), so it may take some work to bring it up-to-date.

Let me see if anyone else on the team knows of a better example.

2 Likes

@chunduriv I think I will try to make a client side version of the TeachableMachine linked to above, for multiple reasons:

  1. Teaches the full process of making an ML model using TFJS
  2. All the benefits of client side, from security, bandwidth, etc
  3. Able to include other sensors more than just vision and sound
  4. Hackable
  5. Possible connection with TFlite (actually this part I have already done)
  6. Possible webUSB microcontroller connection (ditto)

I teach high school robotics so am fairly good at simplifying complex code. When I first started making TFJS demos around 2017 (it was called deeplearnjs then) I had some amazing assistance from very helpful people from Google such as: Nikhil Thorat, Daniel Smilkov, Yannick Assogba, Shanqing Cai, Manraj Singh and many others.

Can you think of anyone on the present Tensorflow team that would be interested in such a project? Better if they actually took it on (with my help of course). :grinning:

I kind of know what I am doing , just nice to get opinions about other ways to do things in Javascript. I have recently been helping Harvard with their tinyML4D engineering education team which is bringing the Arduino ML Kit to developing countries. Without deadlines I typically complete what I set out to do.

Anyone else interested in such a project just like this post.

You could try the following two examples and the both have source codes:

  1. TensorFlow.js — Handwritten digit recognition with CNNs  |  Google Codelabs is digit recognition with CNNs, which is very simple and easy to start.

  2. Tensorflowjs Mobilenet Transfer Learning is relatively complicated but the model is better and you could reuse the model for your application.

1 Like

Great to look at the code of that, but even with a few npm audit fix --force it was not wanting to run for me, plus I want more modern code as I already have lots of old demo code.

Right idea, keep the suggestions coming!

Thanks @Lin_Chen for the suggestions.

I got Jason’s Glitch Mobilnet Transfer Learning site working on a static webpage and updated to TFJS Version 4.1.0 and it is very nicely done.

I am struggling with Yannick’s Digit recognition Codelab, but as a >30 year coding teacher I have always had issue with Codelab’s, they never seem to work for me. I learn a ton from working examples, this having to make it myself always messes up, also like most people I just want a static tensorflowjs site and switching from a codelab to a static page is always complex. I am close, just having a few minor issues.

If anyone wants to see the demo’s check here

Anyway, thanks so much for giving the suggestions, it was good to see nicely made code. I am also trying chatGPT to see if it can write the code for me. It is not too bad, just timing out a lot from heavy use.

Could you try to delete this line: beginner-tensorflowjs-examples-in-javascript/script.js at master · hpssjellis/beginner-tensorflowjs-examples-in-javascript · GitHub?

It looks like you import twice TensorFlow.js in your demo.

1 Like

Nice catch @Lin_Chen . Thanks, so both of those examples can be updated to TFJS version 4.1.0 and work on a static webpage. That is a good start. I will see what else I can do.

P.S. Only kind of connected to this topic, but here is what I was working on this morning.

GIF-221214_104832

It would be nice to be able to process this vision data using TensorflowJS.

1 Like