Digit-Inator

The Digit-Inator allows you to convert your favorite hand drawn digit to text with the latest and greatest in computer vision.

Try out the Digit-Inator

Table of Contents

• Web Application Installation
• Run the Application Locally
• Run Tests
  • Run Unit Tests
  • Run Integration Tests
• Run the Application in Production Mode
• Web Technology
• Deep Learning Technology
• Number Detection Model Details
  • Confusion Matrix Plot
  • Confusion Matrix Error Plot
• Modify the Number Detection Model
  • Prerequisites
  • Steps
• Reinstate the Server
• Edit the Logo

Web Application Installation

1. Install npm
2. Install yarn
3. Run yarn at the root of the project to install dependencies

Run the Application Locally

1. Run yarn dev at the root of the project to start the application
2. Navigate to http://localhost:3000/ to view the application

Run Tests

Run Unit Tests

1. Run yarn test:unit at the root of the project

Run Integration Tests

1. Run yarn test:integration at the root of the project
2. In the Cypress runner, click the test suite you want to run or click "Run all specs"

Run the Application in Production Mode

1. Run yarn build at the root of the project
2. Run yarn start at the root of the project

Web Technology

• Next.js (React)
• TensorFlow.js
• TypeScript
• SCSS Modules
• Jest
• React Testing Library
• Cypress

Deep Learning Technology

• TensorFlow
• Keras
• MNIST dataset
• Convolutional Neural Network (CNN)

Number Detection Model Details

Model Accuracy: 99.120%

Confusion Matrix Plot

Confusion Matrix Error Plot

Modify the Number Detection Model

Prerequisites

Python, version between 3.7 and 3.9 exclusive

Steps

1. Run pip install -r number_detection_model/requirements.txt

2. Build the model by running python number_detection_model/build_model.py

   NOTE: Building the model takes around 5 minutes in its current state. It generates a number_detection_model.h5 file.

3. Run python number_detection_model/test_model.py

   NOTE: Creates images for confusion matrices that can be found in the number_detection_model directory.

4. Convert the .h5 model into .json and make it available to the web application by running the following command:

tensorflowjs_converter --input_format=keras --output_format=tfjs_layers_model number_detection_model.h5 ./public/model

Reinstate the Server

The server didn't add much value, increased the complexity of the codebase, and increased the cost of hosting. So, the server was removed.

If you have any ideas pertinent to this project that require a server—feel free to fork this repository and reference the pull request that removed the server to reinstate it.

The server used:

• Node.js
• Express.js
• TypeScript
• MongoDB
• Mongoose
• Jest

Edit the Logo

Install AdobeXD to build off of the current .xd file in the design directory.