my-examples-of-tensorflowjs-for-tinytorch
This page as a web page index.
hpssjellis.github.io/my-examples-of-tensorflowjs-for-tinytorch/
and the Github it is built at my-examples-of-tensorflowjs-for-tinytorch
This page supports the mlsysbook.ai and it’s tinyTorch implementation at mlsysbook.ai/tinytorch/intro.html
This page is trying to simplify for High School students and non-engineering undergrads TinyTorch without needing to do any Python installation
It does not reach the same extent of total understanding of the system, but is a half way point between just using machine learning and TinyTorch understanding.
Reminder to donate to the openCollective!
ML map
What We Have Made
We have built a series of interactive web applications that allow students to learn Artificial Intelligence without installing any software. Each torchjs##.html file corresponds approximately to a tinyTorch Python step, but adds visual feedback that only a browser can easily provide:
Live Visuals: Students can see their camera feed and the “Binary View” (what the AI sees) side-by-side.
Instant Interaction: Buttons allow for manual data fetching, real-time training, and immediate weight exporting.
No-Setup Training: By using the computer’s GPU through the browser, students can train models on their own data in seconds.
How to Use It
Open the File: Simply double-click any .html file to open it in Chrome, Edge, or any modern browser.
Start the Hardware: Click the “Start Camera” button to grant the browser permission to see your webcam.
Load or Train: Depending on the file, use the buttons to either fetch professional data from the internet or capture your own drawings.
Click the black textarea to see running code, copy it for your own work, change it, click the “Update and Run” button to live see your changes.
Export: Once the AI is performing well, use the “Export .h” button to save the “brain” as a C++ header file, ready to be flashed onto an ESP32-S3 microcontroller. (This part is still in draft mode)
🚀 The Full Curriculum (Math to Microcontroller)
| File | Title | Concept Learned | tinyTorch Chapter |
|---|---|---|---|
| torchjs01.html | Scalar Tensors | Creating basic numbers and the “Tensor” data type. | 1.1 The Tensor Class |
| torchjs02.html | Autograd Math | How TFjs tracks math history for derivatives. | 6.1 Differentiation |
| torchjs03.html | Linear Regression | Solving the y = Mx + B line equation. | 2.1 Linear Regression |
| torchjs04.html | The First Neuron | Building a single-layer neural network. | 2.2 Neurons & Perceptrons |
| torchjs05.html | Hidden Layers | Adding “inner thoughts” for non-linear problems. | 3.1 Multi-Layer Perceptrons |
| torchjs06.html | Optimizers | Using SGD and Adam to “walk” toward the answer. | 7.1 Optimization |
| torchjs07.html | Camera Intro | Connecting the webcam to the browser canvas. | 4.1 Data Loading |
| torchjs08.html | Motion Detect | Using frame differencing to see movement. | 4.2 Image Ops |
| torchjs09.html | Binary Classifier | Training the brain to see “Hand” vs “Background”. | 2.2 Binary Classification |
| torchjs10.html | Persistent Memory | Saving and Loading weights to local files. | 6.1 Serialization |
| torchjs11.html | Multiclass Logic | Expanding to 3+ classes (Hand, Object, Empty). | 5.5 Softmax & Multiclass |
| torchjs12.html | Data Augment | Cropping and resizing images to make AI smarter. | 4.3 Augmentation |
| torchjs13.html | Validation Logic | Using 20% of data to “test” the brain’s honesty. | 7.1 Evaluation |
| torchjs14.html | Feature Maps | Visualizing the Conv1 filters (The Brain’s Eyes). | 8.1 Visualization |
| torchjs15.html | Export Master | Converting weights to C++ Header (.h) arrays. | 9.1 Deployment Bridge |
| torchjs16.html | MNIST Trainer | Training on 60,000 professional digit samples. | 10.1 Standard Datasets |
| torchjs17.html | Live Digit Reader | Live webcam OCR using Adaptive Thresholding. | 10.2 Real-world Inference |
| torchjs18.html | Tokenization | Turning words into numbers (Vocabulary IDs). | 10.1 Tokenization |
| torchjs19.html | Word Embeddings | Vector math: Moving words into a semantic map. | 11.2 Embeddings |
| torchjs20.html | Self-Attention | The “Focus” mechanism: How words relate to context. | 12.1 Attention |
| torchjs21.html | Probabilistic AI | Predicting the next word using Softmax weights. | 11.1 Embeddings |
| torchjs22.html | Quantization | Shrinking bits (32-bit to 8-bit) for tiny chips. | 15.1 Quantization |
| torchjs23.html | Brain Pruning | Deleting “lazy” neurons to speed up the network. | 16.1 Pruning Ops |
| torchjs24.html | Performance Lab | Benchmarking Latency and FPS in real-time. | 19.1 Benchmarking |
| torchjs25.html | The Memory Guard | Debugging GPU leaks with .dispose() logic. |
1.1 Memory Management |
| torchjs00.html | Finale JS to XIAOML Kit | Putting Vision all together for the XIAO ML Kit (esp32S3). (DRAFT note larger numbers are the most recent models) | 1.1 Memory Management |
| esp-on-device-train 3 programs | Got full on-device training working using 3 programs: record images, train, inference. I like this as the steps are clear, more work moving images into folders. Folder names determine classes, max 30 images each class | Putting Vision all together on the XIAO ML Kit (esp32S3). | 1.1 Memory Management |
| Best esp-on-device-train Single Program | Put the above 3 programs into one with an OLED A0 touch trigger (short and long press) Menu: record 3 classes of images, train, inference. This is very impressive, but a bit buggy at the moment. Does everything without needing to manually move images around on the micro sd card. It works, but don’t expect good results yet, that is why we use EdgeImpulse. | Putting Vision all together on the XIAO ML Kit (esp32S3). | 1.1 Memory Management |
Note: Recent stable web final version bare metal vision to the XIAOML kit
torchjs00.html is copyied from torchjs72.html
Best esp-on-device-train Single Program esp-all-menu-A0-image-train-infer22.txt as of Jan 15, 2026
It’s a process!
By Jeremy Ellis, Use at your own Risk
github Profile hpssjellis
LinkedIn jeremy-ellis-4237a9bb
Support the opencollective.com/mlsysbook
This Github is at:my-examples-of-tensorflowjs-for-tinytorch
The $22 USD xiaoMLkit ($38 USD if you need a usbC cable and a micro SD Card)
For training
You can print it
The link QR code to:
https://opencollective.com/mlsysbook