Beginner Tensorflowjs Examples in Javascript
This is the easiest set of Machine Learning examples that I can find or make. I hope you enjoy it.



...


The main github for these pages is at: https://github.com/hpssjellis/beginner-tensorflowjs-examples-in-javascript



The github webpage copy of this site which may be a little more up-to-date is at https://hpssjellis.github.io/beginner-tensorflowjs-examples-in-javascript/


Youtube Tutorials Video Playlist


For some robotics and IOT solutions using the Particle.io Photon and Mesh Devices try my other main teaching stie at this github Robotics IOT Particle.io which also has lots of videos linked from that page.

    Most of the examples are in the following format:
  1. A description similar to these lines
  2. A button to click to see if the Javascript code works
  3. A textarea to click to see the working code
  4. An expanding textarea, that you can right-click and select-all to copy the code into your text editor
  5. An edit button that shows after clicking the textarea and can dynamically make changes to any non-script tag enclosed Javascript
Go ahead, try editing something and click the Update and run button! It's a whole new way to program.



...











Following is my main table of Pure Javascript, Machine Learning, no need to compile, web examples:


Web Page Explanation Video CodePen, Glitch Deprecated at Version
Tensorflowjs Version 1.0.0 and newer
tfjs01-functions.html Updated to also show functions with multiple variable returns using arrays and objects and module solutions using namespacing Video.... Active Version
tfjs02-basics.html Beware lots of Tensors in one function Video.... Active Version
tfjs03-general.htmlGeneral Tensors and how to use themVideo....Active Version
tfjs04-quadratic.htmlFirst Neural Network solving the quadratic equationVideo....Active Version
tfjs05-matrix-math.htmlTensors and Matrix MathVideo....Active Version
tfjs06-javascript.htmlA reminder of many things Javascript can do. This is still in draft mode. I have a lot still to do here.......Active Version
tfjs07-xor-neural-network.htmlSolving an XOR Neural NetworkVideo....Active Version
tfjs08-knn.htmlK-Nearest Neighbor Machine Learning Classification Video....Active Version
tfjs10-xor-layers.htmlBit slow but very easy to read the layers. Original by Matt Cameron. His Code is here. .......Active Version
tfjs11-load-weights.htmlFinally got weight saving and loading working.......Active Version
tfjs14-sinusoidal.htmlI just really like sinusoidals.......Active Version
20keras-xOr.htmlFinally made a system for working with Keras Layers. This is the easiest example.......Active Version
21keras-integers.htmlNow Keras Layers using Integer inputs and outputs.......Active Version
22keras-decimal.htmlNow Keras Layers using float (Decimal) inputs and outputs.......Active Version
23keras-digital.htmlExample IoT device 8 bit input 4 bit output Smart Garden example.......Active Version
24keras-one-hot.htmlWhy use one-hot encoding.......Active Version
26keras-small-image.htmlLoading really small black and white images using a convolutional Keras Layer.......Active Version
27keras-medium-image.htmlVery cool, takes any image and converts it to a 32 x 32 single digit text image, 0=white, 1=black, 2-8 ROY-G-BIV 9=brown........Active Version
28keras-full-image.htmlNow much more difficult. Full RGB color 64 x 48 pixel images, loaded from the web (CORS OK) with webcam analysis.......Active Version
pre-trained/31-squeezenet.html Finally got this very cool Squeezenet webcam demo working. I didn't have the image data normalized between 0 and 255.......Active Version
pre-trained/32-mobilenet.html Finally got this very cool Mobilenet webcam demo working. I didn't have the image data normalized between -1 and 1.......Active Version
pre-trained/33-mnist.html MNIST white numbers on a black background.......Active Version
pre-trained/34-switch-models.html Model switching example. Must first find a "4" then trapped on the second model until you find an "8". Note: must be white numbers on a black background.......Active Version
advanced-keras/40keras-lstm.html An LSTM attempt presently not optimzed for large inputs.......Active Version
advanced-keras/41b-cloud-gpu-challenge.html My Cloud GPU TPU challenge. this is the new version. It has a link to the old version.......Active Version
advanced-keras/42-knn-classifier.html Very cool KNN-Classifier example that you can easily train in the browser. Just waiting for how to save and load the data.......Active Version
advanced-keras/43keras-multi-input.html For a while I have wanted to start making Advanced Keras Models. This is the first. It has two inputs and one output, unlike a regular sequential model that always has one input and one output.......Active Version
advanced-keras/face/44-face-knn-classifier.html This is a KNN-Classifier connected to a face-api.js Should be able to identify your friends. Waiting for saving the knn-Classifier.......Active Version
advanced-keras/face/45-face-classifier-saving.html Made this a while back and forgot to put it up. Shows how to save and load a knn classifier, by tricking tfjs to think the classifier is a multilayer tfjs model. .......Active Version
advanced-keras/46keras-multi-output.html This has one input and two outputs. .......Active Version



update vanilla Javascript of tfjs-models started Apr 28th, 2020 Now with TFJS Version 2.0.0

My Demo Link My Github Location Gitpod TFJS Demo TFJS Github
Rocksetta: tfjs-models/blazeface My blazeface Github.... ... Original DemoOriginal Github
Rocksetta: tfjs-models/bodypix My bodypix Github.... ... Original DemoOriginal Github
Rocksetta: tfjs-models/deeplab Not working yet My deeplab Github.... ... Original Demo Animated GifOriginal Github
Rocksetta: tfjs-models/facemesh my facemesh Github.... ... Original DemoOriginal Github
Rocksetta: tfjs-models/handpose My handpose Github.... ... Original DemoOriginal Github
Rocksetta: tfjs-models/knn-classifier Not Working yet My knn-classifier Github.... ... No Original DemoOriginal Github
Rocksetta: tfjs-models/mobilenet My mobilenet Github.... ... No Original DemoOriginal Github
Rocksetta: tfjs-models/posenet My posenet Github.... ... Original DemoOriginal Github
Rocksetta: tfjs-models/qna My qna Github.... ... Original DemoOriginal Github
Rocksetta: tfjs-models/speech-commands My speech-commands Github.... ... Original DemoOriginal Github
Rocksetta: tfjs-models/toxicity My toxicity Github.... ... Original DemoOriginal Github
Rocksetta: tfjs-models/universal-sentence-encoder My universal-sentence-encoder Github.... ... Original DemoOriginal Github



New Tensorflowjs Version 1.0.0 Examples hopefully condensed into one html/javascript file

My DemoMy GithubNotes Repl.itRepl.it Demo Original DemoOriginal Github
Rocksetta: tfjs01-posenet-webcam.htmlGithub and also at other githubWebCam posing program for single or multiple users using posenet Repl.it Repl.it Demo Original DemoOriginal Github
Rocksetta: tfjs Github.... Repl.it Repl.it Demo Original DemoOriginal Github



Web Page Explanation Video CodePen, Glitch Deprecated at Version
Some General Stuff I am working on. (Not necessarily updated to Tensorflowjs version 1.0.0)
My CodePen.io Tensorflowjs collectionI have made a collection of examples in both CodePen and Glitch.Trying tofigure out which online IDE I like Best.Presently leaning towards CodePen for Front End and Glitch for Front and Backend in node......
My Glitch.com Tensorflowjs collectionI have made a collection of examples in both CodePen and Glitch.Trying tofigure out which online IDE I like Best.Presently leaning towards CodePen for Front End and Glitch for Front and Backend in node......
DenseNet121/model.jsonA fully useable DenseNet121 Model with shard files in Keras Layers style made ready for TensorflowjsThis means you can edit it, add layers, freeze layers etc, much more powerful than taking a model from Tensorflow which is a frozen model.You may use these files. I have others just the download sizes start to get a bit big......
MobileNet/model.jsonA fully useable MobileNet Model with shard files in Keras Layers style made ready for TensorflowjsThis means you can edit it, add layers, freeze layers etc, much more powerful than taking a model from Tensorflow which is a frozen model.You may use these files. I have others just the download sizes start to get a bit big......
MobileNetV2/model.jsonA fully useable MobileNetV2 Model with shard files in Keras Layers style made ready for TensorflowjsThis means you can edit it, add layers, freeze layers etc, much more powerful than taking a model from Tensorflow which is a frozen model.You may use these files. I have others just the download sizes start to get a bit big......
NASNetMobile/model.jsonA fully useable NASNetMobile Model with shard files in Keras Layers style made ready for TensorflowjsThis means you can edit it, add layers, freeze layers etc, much more powerful than taking a model from Tensorflow which is a frozen model.You may use these files. I have others just the download sizes start to get a bit big......
Machine2learnPowerful online Keras model generator and full app development. My test program showing a generated model can be loaded............
Parallel Browser TrainingCan't really show a demo, but you could install this nodejs server and have multiple browsers help train individual layers............
Loading 10000 of the 50,000 CIFAR-10 imagesSame as the below one except this uses the .png files and actually works............
Loading 50,000 CIFAR-10 imagesNOT REALLY WORKING Takes about a min to load the first 10 K images, presently colors are messed up............
Rocksetta version of TFJS Getting StartedMy version of the Tensorflowjs Getting Started. Can edit and run even from a cell phone.......Active Version
Rocksetta version of TFJS MobinetEdit online even from a Mobile device.......Active Version
android-issue.htmlUsing the Addition RNN. I have included the ability to adjust the learning rate to show the issue with android phone. Try a learning rate of 0.01 for no NAN loss. The easiest version of the issue many Android phones are having using Tensorflowjs. Looks like it is part of the loss caculation with Layers.......Active Version
kickstarter.htmlJust having fun with Vega-Lite graphs and my New Kickstarter........Active Version
PoseNet Web Cam to BVHWeb cam working not yet converting to BVH animation format...CodeActive Version
PoseNet Security CameraProof of concept. Using PoseNet to start or stop web cam recording...CodeActive Version
TensorHtmlPrint.htmlPrints any dimension Tensor onto a web page. Not very well written but does seem to work.......Active Version
Submarineering-knn.htmlHis original tweet is an interesting take on running Javascript. This page is the IRIS Dataset KNN to identify flowers based on Petal Length etc........From a tweet by @Submarineering
Face API for the Big Bang characters (Proof of concept)..Original github at Code.........
keras-rpi3.htmlMost simple webpage for testing if a device like a Raspberry Pi 3 can use Tensorflowjs............
tfjs14-sinusoidal.htmlI just really like sinusoidals.......Active Version
tfjs16-console.htmlFor that one in a 1000 time when you need to test something in the consolePaste the code without the script tags into the browser console.Some fancy stuff here that is interesting to checkouttfjs16b-console.html Even easier example of using the console
keras-links.htmlSo I am having trouble learning Keras. This page is my attempt to get many examples in one location so that I can study them and find the easiest way to teach it............
Codepen about video stream and image taking..............
My CodePen of loading lots of image files into a tensorCodePen of loading groups of image files............
My Codepen about converting RGB to a 10 digit number..............
...............
...............



Old versions of Tensorflowjs Examples, done when deeplearnjs first became Tensorflowjs

My take on the Tensorflowjs ES6 examples. My examples do not have to be compiled using Yarn. I have converted them all to pure Javascript that can simply be put on your own computer and ran from there. No need to use a server, no need to use compile tools. If you download the script source then these files can be ran without an internet connection.

LinkCodeNotes: use (ctrl-shift-I) to open browser console
Rocksetta: Addition RNNRight Click-->View Page SourceWorks! May not work on Android 8.0.0
Tensorflow: Getting StartedRight Click-->View Page SourceNo Changes to this Tensorflow Beginner Page
Rocksetta Layers: Iris DemoRight Click-->View Page SourceWorks!
Rocksetta: Train MNIST with the Core APIRight Click-->View Page SourceWorks!
Rocksetta Layers: MNIST CNN Transfer Learning DemoRight Click-->View Page SourceWorks!
Rocksetta: Train MNIST with the Layers APIRight Click-->View Page SourceWorks!
Rocksetta: Using a pretrained MobileNetRight Click-->View Page SourceWorks!
Rocksetta: Fitting a curve to synthetic data Right Click-->View Page SourceWorks!
Rocksetta: Polynomial Regression Training ExampleRight Click-->View Page SourceWorks!
Rocksetta: Layers: Sentiment Analysis DemoRight Click-->View Page SourceWorks!
Rocksetta:Layers: Sequence-to-Sequence (English-French Translation) Right Click-->View Page SourceWorks!
Rocksetta: Pacman Game webcam-transfer-learningRight Click-->View Page SourceWorks!
Rocksetta: tiny-yolo-demoRight Click-->View Page SourceWorks! just not on my Android 8.0 Mobile, but does on iPhone
Rocksetta:Sentiment Analysis converting KerasRight Click-->View Page SourceWorks!....
Rocksetta:posenet/cameraRight Click-->View Page SourceWebCam posing program for single or multiple users using posenet
Rocksetta: posenet/coco imagesRight Click-->View Page SourceLoads images for multiple or single pose positions using posenet
Rocksetta:Right Click-->View Page Source....
Rocksetta:Right Click-->View Page Source....
Rocksetta:Right Click-->View Page Source....
Rocksetta:Right Click-->View Page Source....
Rocksetta:Right Click-->View Page Source....



DEPRECATED examples that I can't get working with the latest versions of Tensorflowjs, help appreciated
jj06-squeezenet.html .. video ... 0.3.13
jj07-mnist.html .. video ... 0.6.0
Char-RNN.htmlInteresting Character RNN learns a sentence...I really want to make this simpler and make LSTM and GRU out of it but stuck getting it to run on any version higer than 0.9.10.10.3
...............
...............
...............










Best resource for Tensorflowjs information is on the TFJS gallery

https://github.com/tensorflow/tfjs/blob/master/GALLERY.md





Why don't I use build tools!

I do use build tools! I just don't like debugging build tools code. I also don't like using any frameworks. You see, since I teach and don't work on production anything, getting the concept and code working as simply as possible is my main concern. Whenever I am working on a complex new idea I don't want a framework or build tool being the problem. I want to get my code working in pure Javascript and not dealing with the mind blowing frustration of someone elses bug.

I have a short video on how to work with the TSC build tool to use Intellisense for writing code and then easily switch to pure javascript to see if it works.
I used to work with jQuery only when absolutely necessary, but now the Javascript language has changed so much that I rarely have to use jQuery. I mainly use it when I am to lazy to convert the code.



Please subscribe to my channel. It is very important as Google/youtube will shut down any cash flow without enough subscribers.





My old deprecated website for Deeplearnjs is at My Old Deeplearnjs Site


By Jeremy Ellis
Twitter@rocksetta
Website http://rocksetta.com
Use at your own risk!


A few related Tensorflowjs videos:

Tensorflowjs As Simple As Possible Deep Learning Tutorials Using Javascript









This Github, ... this Github Website Version, ... this Hosted Website Version, ... Tensorflowjs

By Jeremy Ellis
Twitter@rocksetta
Website http://rocksetta.com
Use at your own risk!