A React Native application that recognizes handwritten digits using a neural network trained on the MNIST dataset. The app includes a real-time visualization of the neural network's decision-making process.
It uses the following libraries:
- React Native Skia for rendering the Network and the digit
- React Native Reanimated for animating everything
- React Native Gesture Handler for drawing the digit
noway-demo.mp4
Everything runs magically on Expo Go and on the Web at mnist.reactiive.io.
I was strongly inspired by this Brilliant demo: Network Visualization
The generated weights are given in the find-weights folder. I included them in the repo for convenience. They are generated using the Python script in the find-weights folder.
The find-weights.py script:
- Loads the network configuration from
network.config.json - Loads and preprocesses the MNIST dataset:
- Converts images to binary (0 and 1)
- Adds a "none" class with empty samples
- Converts labels to one-hot encoding
- Builds and trains a neural network with:
- 2 hidden layers using configurations from
network.config.json - Adam optimizer and categorical crossentropy loss
- 5 training epochs
- 2 hidden layers using configurations from
- Saves the trained weights to
model_weights.json - Generates example images and matrices for each digit (0-9) and the "none" class
To run the script:
-
Set up a Python virtual environment (recommended):
python -m venv venv source venv/bin/activate # On Windows use: venv\Scripts\activate
-
Install the required dependencies:
cd find-weights pip install -r requirements.txt -
Run the script:
python find-weights.py