Dec 2022 I am trying to make an online static webpage tensorflowjs model training page or set of pages

Github location of new work at Github folder location here Demo index of new work at https://hpssjellis.github.io/beginner-tensorflowjs-examples-in-javascript/edge-tfjs/

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

Youtube Tutorials Video Playlist
A lightening Talk in the Pecha Kucha format about this site is here

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.

A description similar to these lines
A button to click to see if the Javascript code works
A textarea to click to see the working code
An expanding textarea, that you can right-click and select-all to copy the code into your text editor
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.

...

Try these Gitpod.io pre-made workspaces

Heres a link to a few more at https://rocksetta.com/rocksetta-gitpod-links.html

tfjs-models
tfjs-examples

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.html	General Tensors and how to use them	Video	....	Active Version
tfjs04-quadratic.html	First Neural Network solving the quadratic equation	Video	....	Active Version
tfjs05-matrix-math.html	Tensors and Matrix Math	Video	....	Active Version
tfjs06-javascript.html	A 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.html	Solving an XOR Neural Network	Video	....	Active Version
tfjs08-knn.html	K-Nearest Neighbor Machine Learning Classification	Video	....	Active Version
tfjs10-xor-layers.html	Bit slow but very easy to read the layers. Original by Matt Cameron. His Code is here.	...	....	Active Version
tfjs11-load-weights.html	Finally got weight saving and loading working	...	....	Active Version
tfjs14-sinusoidal.html	I just really like sinusoidals	...	....	Active Version
20keras-xOr.html	Finally made a system for working with Keras Layers. This is the easiest example	...	....	Active Version
21keras-integers.html	Now Keras Layers using Integer inputs and outputs	...	....	Active Version
22keras-decimal.html	Now Keras Layers using float (Decimal) inputs and outputs	...	....	Active Version
23keras-digital.html	Example IoT device 8 bit input 4 bit output Smart Garden example	...	....	Active Version
24keras-one-hot.html	Why use one-hot encoding	...	....	Active Version
26keras-small-image.html	Loading really small black and white images using a convolutional Keras Layer	...	....	Active Version
27keras-medium-image.html	Very 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.html	Now 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
47 Webcam face-api.js for Mobile or desktop for beginners	Github here	A must lookat Face Landmark detection webpage	On CodePen.io, On Glitch.com	.....
interpretability/50-interpret-grey.html	Sheding light on the black box	Using black "1" and white "2" to make shades of grey then using interpretabilty to analyse the predictions using "0" for transparent, which the neural network has not been trained on.	....	Active Version
beginner-examples/tfjs51-activation-functions.html	Testing making your own activation functions. not yet working	...	....	.....
.	..	...	....	.....
.	..	...	....	.....
.	..	...	....	.....

link to here

Updated Vanilla Javascript of tfjs with webserial. Started Aug 2022

My Demo Link	My Github Location	Gitpod	Demo Image	TFJS Demo	TFJS Github
Rocksetta: webserial-facemesh	my webserial facemesh Github	....	...	Original Demo	Original facemesh Github
Rocksetta: ...	my facemesh Github	....	...	Original Demo	Original Github Github

link to here

Updated Vanilla Javascript of tfjs-models started Apr 28th, 2020 Now with Tensorflowjs Version 2.0.0

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

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

My Demo	My Github	Notes	Repl.it	Repl.it Demo	Original Demo	Original Github
Rocksetta: tfjs01-posenet-webcam.html	Github and also at other github	WebCam posing program for single or multiple users using posenet	Repl.it	Repl.it Demo	Original Demo	Original Github
Rocksetta: tfjs	Github	....	Repl.it	Repl.it Demo	Original Demo	Original Github

Web Page	Explanation	Video	CodePen, Glitch	Deprecated at Version
Some General Stuff I am working on
My CodePen.io Tensorflowjs collection	I 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 collection	I 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.json	A fully useable DenseNet121 Model with shard files in Keras Layers style made ready for Tensorflowjs	This 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.json	A fully useable MobileNet Model with shard files in Keras Layers style made ready for Tensorflowjs	This 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.json	A fully useable MobileNetV2 Model with shard files in Keras Layers style made ready for Tensorflowjs	This 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.json	A fully useable NASNetMobile Model with shard files in Keras Layers style made ready for Tensorflowjs	This 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.	.....
Machine2learn	Powerful online Keras model generator and full app development. My test program showing a generated model can be loaded	...	....	.....
Parallel Browser Training	Can'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 images	Same as the below one except this uses the .png files and actually works	...	....	.....
Loading 50,000 CIFAR-10 images	NOT REALLY WORKING Takes about a min to load the first 10 K images, presently colors are messed up	...	....	.....
Rocksetta version of TFJS Getting Started	My version of the Tensorflowjs Getting Started. Can edit and run even from a cell phone	...	....	Active Version
Rocksetta version of TFJS Mobinet	Edit online even from a Mobile device	...	....	Active Version
android-issue.html	Using 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.html	Just having fun with Vega-Lite graphs and my New Kickstarter.	...	....	Active Version
PoseNet Web Cam to BVH	Web cam working not yet converting to BVH animation format	...	Code	Active Version
PoseNet Security Camera	Proof of concept. Using PoseNet to start or stop web cam recording	...	Code	Active Version
TensorHtmlPrint.html	Prints any dimension Tensor onto a web page. Not very well written but does seem to work	...	....	Active Version
Submarineering-knn.html	His 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.html	Most simple webpage for testing if a device like a Raspberry Pi 3 can use Tensorflowjs	...	....	.....
tfjs14-sinusoidal.html	I just really like sinusoidals	...	....	Active Version
tfjs16-console.html	For that one in a 1000 time when you need to test something in the console	Paste the code without the script tags into the browser console.	Some fancy stuff here that is interesting to checkout	tfjs16b-console.html Even easier example of using the console
keras-links.html	So 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 tensor	CodePen 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.

Link	Code	Notes: use (ctrl-shift-I) to open browser console
Rocksetta: Addition RNN	Right Click-->View Page Source	Works! May not work on Android 8.0.0
Tensorflow: Getting Started	Right Click-->View Page Source	No Changes to this Tensorflow Beginner Page
Rocksetta Layers: Iris Demo	Right Click-->View Page Source	Works!
Rocksetta: Train MNIST with the Core API	Right Click-->View Page Source	Works!
Rocksetta Layers: MNIST CNN Transfer Learning Demo	Right Click-->View Page Source	Works!
Rocksetta: Train MNIST with the Layers API	Right Click-->View Page Source	Works!
Rocksetta: Using a pretrained MobileNet	Right Click-->View Page Source	Works!
Rocksetta: Fitting a curve to synthetic data	Right Click-->View Page Source	Works!
Rocksetta: Polynomial Regression Training Example	Right Click-->View Page Source	Works!
Rocksetta: Layers: Sentiment Analysis Demo	Right Click-->View Page Source	Works!
Rocksetta:Layers: Sequence-to-Sequence (English-French Translation)	Right Click-->View Page Source	Works!
Rocksetta: Pacman Game webcam-transfer-learning	Right Click-->View Page Source	Works!
Rocksetta: tiny-yolo-demo	Right Click-->View Page Source	Works! just not on my Android 8.0 Mobile, but does on iPhone
Rocksetta:Sentiment Analysis converting Keras	Right Click-->View Page Source	Works!....
Rocksetta:posenet/camera	Right Click-->View Page Source	WebCam posing program for single or multiple users using posenet
Rocksetta: posenet/coco images	Right Click-->View Page Source	Loads 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.html	Interesting 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.1	0.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!