Master Neural Networks: Build with JavaScript and React

Set up the neural networks project by creating a folder, opening it in Visual Studio Code, and creating nodes.md to document the perceptron concepts and mNIST pattern recognition.

Explore the similarities and differences between the biological neuron and the perceptron, illustrating how weights and scale and a weighted sum drive a binary classification via an activation function.

Define a two-input perceptron to classify pencils versus erasers, using training data with x1 as weight and x2 as scale, and include weights, a bias, and a learning rate.

define data in code for a perceptron: set train inputs and labels, initialize weights, bias, and learning rate in JavaScript to prepare for training and testing.

Compute the weighted sum from inputs, weights, and bias, apply the activation function, and train the model by adjusting weights and bias to improve predictions.

Adjust the weights and bias to recompute the weighted sum and activation function, showing how the predicted y changes when data and weights yield different results.

Update weights shows training a simple perceptron by adjusting weights and bias using y true minus y pred with a 0.1 learning rate, demonstrated on inputs (2,7) then (3,6).

Compute the weighted sum for perceptron inputs, update weights and bias through a training loop, and validate the first weighted sum of -1.4 with debugging steps.

Demonstrates updating perceptron weights and bias for five inputs: compute weighted sums, apply activation, compare to true labels, and adjust with learning rate 0.1.

Update weights in code using a step activation function, train with inputs and labels, and adjust weights and bias via learning rate; verify results with perceptron outputs.

Learn how to measure and improve perceptron accuracy by implementing a predict method, calculating training accuracy, and training over multiple epochs to adjust weights and bias.

Learn how to evaluate a trained model with testing data and unseen data, measure testing accuracy, and recognize overfitting and underfitting with simple toy data.

Initialize neural network weights and bias randomly in JavaScript, and use seedrandom to keep them reproducible across runs while tuning learning rate on simple data.

Measure training and testing accuracy after each epoch to track how a simple perceptron learns, using JavaScript and React to see accuracy evolve across epochs.

Explore mnist data for a binary zero versus not zero task using 60k training and 10k testing 28x28 images, and prepare a data sets/mnist folder.

Parse mnist data by reading the first four bytes to verify the big-endian magic number 2051 and uint8 data, then interpret the next blocks for item count and image dimensions.

Decode and parse a binary data buffer to extract metadata and grayscale image pixels, reading 60,000 training images of size 28x28 with four-byte offsets and uint32 counters.

Parse the label file by checking the magic number 2049 and reading 60,000 labels that correspond to 28x28 images, differentiating it from the image file.

Read the label file as unsigned eight-bit bytes, and fill the labels array by iterating 60,000 times, then return an object with type labels and data.

Parse images by iterating items, rows, and columns to build a 60,000-image array of 28x28 pixels. Manage offset, read bytes as uint8, push rows into images, and prepare for storage.

Parse the testing images and testing labels, then save them into a JSON file for the frontend to display as labeled inputs.

Initialize the front end with React using Create React App, then display stored images and labels from the JSON file in a simple hello world setup.

Create a home page and simple navigation in a React app, organize a pages folder with a home component and a custom router to preview MNIST images with labels.

Build a custom router in React to navigate between the home page and an mNIST preview test images page using window location path name and a switch statement.

Build a simple client-side router using window.history.pushState, dispatching popstate events and using useEffect to update the rendered page as the path changes.

Learn to preview mnist test images by copying the data set into the public/mNIST folder, fetching testdata.json with useEffect in React, and displaying labels and inputs in the frontend.

Implement batch loading of mNIST data by splitting 10,000 items into 5,000-item JSON files, updating the savedata function, and saving each batch with a batch id.

Display all labels by iterating over inputs to render each label and its 28 by 28 image, using an index for the label and a create image url function.

Create a canvas and a 2D context to render 28×28 MNIST grayscale images. Build image data arrays (RGBA) and display 5,000 images on the test page.

Create save training data functions to load mnist train images and train labels for 784-input perceptron training. Store 60,000 training items with the test data to enable backend perceptron training.

Prepare training and test data for a binary perceptron by mapping zero labels to one and non-zero labels to zero, flatten 28 by 28 images to 784 inputs for training.

Create a mNIST perceptron and load train images and labels from JSON files, initialize 784 input weights, and train across 10 batches to improve accuracy.

Assess testing accuracy of a trained perceptron on MNIST test data, compare with training accuracy, and explore improvements such as shuffling and adjusting epochs, weights, and bias for higher performance.

Measure misclassified data during testing, implement a misclassification finder for the perceptron, and review 75 errors in 10,000 samples with 99.25% accuracy, saving weights and bias for the frontend.

Export the perceptron by saving its weights and bias to a JSON file with a save model method, writing to the front-end public folder as binary-model.json for 28x28 canvas predictions.

Fetch the binary perceptron model from the public folder, store its weights and bias in JSON, and apply it on the frontend to predict 0 or 1 for image inputs.

Implement front-end predictions by flattening the 28x28 image to 784 inputs, multiplying by the binary model weights, adding bias, and applying the activation function to yield 0 or 1 predictions.

Compare predictions to labels and display green borders for correct results and red borders for incorrect ones, driven by the predict function in the user interface.

Create a new image prediction page under mNIST that renders a 28 by 28 canvas for drawing digits, with predict and clear buttons, using a fetched binary model to predict.

Enhance the image prediction canvas by wiring a 2D context, enabling drawing with the mouse, and adding start, draw, and stop handlers with proper cleanup.

Learn to draw on the canvas by handling mouse events, using context methods such as beginPath, moveTo, lineTo, and stroke, and scale coordinates to a 28 by 28 canvas.

Extract 784 grayscale values from the 28×28 canvas by reading every fourth image data value, 0-255, after preprocessing, then predict using a weighted sum, bias, and activation to classify digits.

Implement a canvas-based digit prediction by computing a weighted sum with bias, applying a threshold activation function, and storing the prediction in state for live testing and debugging.

Implement canvas clear and prediction display in a React workflow. Wire a clear canvas button, manage the prediction state, and conditionally render non-null results (including zero and 1–9) in JSX.

Enhance neural network predictions by thresholding image pixels in training and testing data, keeping values above a threshold and zeroing the rest, with processed images for the front end.

Experiment with training and retraining a mnist perceptron, adjust pixel threshold, and normalize inputs by dividing by 255 to improve accuracy and crisper image predictions on canvas.

Capture and label misclassified canvas images, save pixel data and labels to a backend JSON training set, and adjust preprocessing by normalizing during prediction rather than in preprocessing.

Create a basic express backend with cors, define /test and /save misclassified endpoints, and demonstrate sending pixel data and labels from the frontend to the backend for storage and retraining.

Store misclassified data by appending input and label to a JSON file in datasets/mNIST, creating the file if needed, so each misclassification supports later model retraining.

Explore a simple perceptron training on MNIST digits using misclassified JSON data, adjust threshold to 20, and train across epochs to achieve about 98% accuracy.

Transition from a single perceptron to a two-neuron hidden layer in a multi-layer perceptron. Normalize a 2x2 image's pixel inputs to 0-1 and establish inter-layer weights.

Finish constructing a multilayer perceptron with input, hidden, and output layers, defining biases and weights, and wiring connections to classify zero or one, with activation and backpropagation planned for later.

Perform the forward pass by computing weighted sums and activations from four inputs through two hidden neurons with biases, then to two outputs using ReLU activations.

Define the mlp parameters in JavaScript code, including input-hidden and hidden-output weights and biases, then compute the hidden activations using weighted sums and a ReLU function.

Compute the forward pass by calculating the weighted sums for hidden neurons from input pixel values using the weights and biases.

Compute hidden activations from hidden sums using a ReLU activation in JavaScript, mapping each weighted sum through max(0, z) and storing results in hidden activations for verification.

Compute hidden sums and activations, then derive output weighted sums from hidden activations using weights and biases, with hidden activations produced by the ReLU function.

Explore softmax explanation and math for multi-class classification in neural networks, deriving output probabilities from weighted sums and applying the softmax function to determine the most likely class.

Learn how softmax probabilities map to eight output neurons for digit classification, using labels and example probabilities like 0.769 and 0.231 to illustrate predictions and weight updates.

Recap the neural network from a four-pixel example to a 784-input model, detailing inputs, weights, biases, hidden activations, ReLU, softmax, and one-hot labels for training.

Learn to compute output probabilities for a two-neuron network by implementing softmax in JavaScript, performing the forward pass with weighted sums, and handling numerical stability by subtracting the maximum value.

Clean up the neural network training by introducing a unified forward and backward propagation method, storing output sums and probabilities, and wiring a train method to update weights toward targets.

Learn to implement backward propagation in a neural network, computing output deltas from probabilities versus targets and preparing to update weights after the forward pass.

Compute and backpropagate deltas to the hidden layer in a neural network, using weighted sums and the ReLU derivative to derive deltas for hidden neuron 1 and 2.

Compute delta for hidden neuron two using the same formula as hidden neuron one, multiply output deltas by their weights, and apply the ReLU derivative of z_h2, yielding zero.

Reproduce hidden neuron delta calculations in backpropagation by deriving hidden deltas from hidden sums and output deltas, using the ReLU derivative and mlp.js backward method.

Compute the gradient of loss for hidden-to-output weights, update weights and biases using output and hidden deltas, and verify improved probabilities.

learn to implement backpropagation by updating hidden-to-output weights and output biases in code, using a learning rate, deltas, and hidden activations for verification.

Compute and apply weight updates from the input layer to the hidden layer using the learning rate and hidden deltas, update biases, and illustrate with concrete input values.

Compute and apply weights from input to hidden with biases in the backward pass, using inputs, targets, and hidden deltas to update weights, biases, and train on MNIST digits.