Capstone Project: Dice Classifier (TensorFlow.js)

This demo trains and evaluates a lightweight dice face classifier entirely in your browser using TensorFlow.js—no server, no data leaves your device.

Workflow: (1) Generate synthetic training data (12×12 grayscale patches of dice with high‑contrast pips) or upload a JSON dataset. (2) Train a compact CNN and save it locally. (3) Load a test image and run inference to label each cell in a grid as a face from 1 to 9.

Under the hood, the app slices the input image into an N×N grid, converts each tile to grayscale, optionally binarizes and auto‑inverts per tile to match the training distribution, crops a few pixels to avoid grid borders, resizes to 12×12, and feeds the batch to the model. The canvas then visualizes the per‑tile predictions.

Tip: For best results, use high‑contrast images where dice cells are aligned to a uniform grid. All computations run on WebGL/CPU via TFJS for fast, private, and portable execution.

Training Data

Generate training data from dice rolls and save as JSON file.

Upload Training Data

Upload a previously generated JSON file with training data to train the model.


Train the Model
20Epochs

Training may take a few minutes depending on the data size and your device. The download will include two files: a JSON file with the model architecture and a binary file (.bin)with the model weights. Please, create a folder to store them together.

Model (*.json)

Upload a trained model (JSON) to run inference on a test image.

Image

The image has to be a black & white image with white background

Imagen de entrada