{"id":27923312,"url":"https://github.com/zoaib-sir/digitdoodle","last_synced_at":"2026-04-13T20:03:09.560Z","repository":{"id":289708787,"uuid":"972157703","full_name":"Zoaib-Sir/DigitDoodle","owner":"Zoaib-Sir","description":"Digit Doodle is a Flask-powered web app where you draw two-digit answers to random arithmetic problems and a PyTorch CNN recognizes your handwriting to instantly validate your response.","archived":false,"fork":false,"pushed_at":"2025-05-03T15:14:59.000Z","size":6558,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-03T15:33:06.698Z","etag":null,"topics":["flask","machine-learning","python","pytorch"],"latest_commit_sha":null,"homepage":"https://digitdoodle.onrender.com/","language":"Jupyter Notebook","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Zoaib-Sir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-24T16:14:10.000Z","updated_at":"2025-05-03T15:16:36.000Z","dependencies_parsed_at":"2025-05-06T22:31:36.220Z","dependency_job_id":null,"html_url":"https://github.com/Zoaib-Sir/DigitDoodle","commit_stats":null,"previous_names":["zoaib-sir/digitdoodle"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zoaib-Sir%2FDigitDoodle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zoaib-Sir%2FDigitDoodle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zoaib-Sir%2FDigitDoodle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zoaib-Sir%2FDigitDoodle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Zoaib-Sir","download_url":"https://codeload.github.com/Zoaib-Sir/DigitDoodle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252779472,"owners_count":21802957,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flask","machine-learning","python","pytorch"],"created_at":"2025-05-06T22:31:21.451Z","updated_at":"2026-04-13T20:03:09.546Z","avatar_url":"https://github.com/Zoaib-Sir.png","language":"Jupyter Notebook","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Digit Doodle\n\n## Overview\n\nDigit Doodle is an interactive web application that challenges users to solve simple arithmetic problems by drawing two-digit numbers. Users draw the tens and ones digits on separate HTML canvas elements, and a PyTorch-powered convolutional neural network predicts the digits in real time. The app then evaluates the user’s answer and provides immediate feedback.\n\n## Screenshots\n![Screenshot 2025-05-03 203309](https://github.com/user-attachments/assets/95acbc8d-2a2f-4536-86bd-f5301f54f2a4)\n![Screenshot 2025-05-03 203330](https://github.com/user-attachments/assets/d4702c69-1a98-4632-8efd-3b0fdd930873)\n![Screenshot 2025-05-03 203432](https://github.com/user-attachments/assets/dac6f67b-68bc-4fb9-b8d9-c16024eedd25)\n\n\n## Features\n\n- interactive dual-canvas interface for tens and ones digits\n- random generation of addition, subtraction, and multiplication problems\n- enhanced MNIST classifier for accurate handwriting recognition\n- dynamic feedback modals indicating correct or incorrect answers\n- automatic problem refresh after each submission\n\n\n\n## Deployment\n\nAccess the live demo here: [https://digitdoodle.onrender.com](https://digitdoodle.onrender.com)\n\n\n\n## Machine Learning Pipeline\n\nDigit Doodle’s digit recognizer is an enhanced convolutional neural network trained on the MNIST dataset with data augmentation and a custom preprocessing pipeline.\n\n### Data Augmentation\n\n- random rotations up to 10°\n- affine translations up to 10%\n- random resized crops (80–120% scale)\n\n### Preprocessing Steps\n\n1. decode base64 image to grayscale\n2. threshold and invert (white digit on black background)\n3. apply morphological opening to remove noise\n4. extract the largest contour and crop the region\n5. resize to 20×20 pixels, preserving aspect ratio\n6. center in a 28×28 canvas\n7. normalize using MNIST mean and standard deviation\n\n### Model Architecture\n\n- two convolutional blocks:\n  - each block: Conv2d → BatchNorm → ReLU → Conv2d → BatchNorm → ReLU → MaxPool → Dropout(0.4)\n  - filters: 1→32→64\n- classifier head:\n  - Linear(64×7×7 → 512) → BatchNorm → ReLU → Dropout(0.4)\n  - Linear(512 → 256) → BatchNorm → ReLU → Dropout(0.4)\n  - Linear(256 → 10)\n- output: log softmax over 10 classes\n\ntraining uses the AdamW optimizer, cross-entropy loss, and a reduce-on-plateau LR scheduler. the best model (lowest validation loss) is saved as `best_model.pt`.\n\n## Performance Metrics\n\nAfter training for 50 epochs on the MNIST dataset, the model achieved the following results on the final batch and test set:\n\n```\nTrain Epoch: 50 [0/60000 (0%)]    Loss: 0.013709\nTrain Epoch: 50 [12800/60000 (21%)]    Loss: 0.084054\nTrain Epoch: 50 [25600/60000 (43%)]    Loss: 0.013258\nTrain Epoch: 50 [38400/60000 (64%)]    Loss: 0.026022\nTrain Epoch: 50 [51200/60000 (85%)]    Loss: 0.008027\n\nTest set: Average loss: 0.0000, Accuracy: 9964/10000 (99.64%)\n```\n\n## Usage\n\n1. load the web page; a random problem appears\n2. draw the tens digit on the left canvas and the ones digit on the right\n3. click Submit Answer to send your drawing for prediction\n4. view feedback in the modal and try the next problem\n\n## Future Improvements\n\n- support for multi-digit numbers beyond two places\n- user accounts and progress tracking\n- persistent storage of scores and history\n- deployment on a scalable cloud platform with GPU inference\n\n## Dependencies\n\nsee `requirements.txt` for a full list of packages, including flask, torch, torchvision, opencv-python, pillow, and numpy\n\n## Repository Structure\n\n```\ndigit-doodle/\n├── app.py                             # flask server and API endpoints\n├── templates/\n│   └── index.html                     # frontend interface and client-side logic\n├── best_model.pt                      # trained PyTorch model weights\n├── enhanced_mnist_classifier.ipynb    # notebook for training and preprocessing\n├── requirements.txt                   # python dependencies\n└── render.yaml                        # optional deployment configuration\n```\n\n## Installation\n\n1. clone the repository\n\n   ```\n   git clone https://github.com/yourusername/digit-doodle.git\n   cd digit-doodle\n   ```\n\n2. create and activate a virtual environment\n\n   ```\n   python -m venv venv\n   source venv/bin/activate       # linux/mac\n   venv\\Scripts\\activate        # windows\n   ```\n\n3. install dependencies\n\n   ```\n   pip install -r requirements.txt\n   ```\n\n4. start the flask server\n\n   ```\n   python app.py\n   ```\n\n5. open [http://localhost:10000](http://localhost:10000) in your browser\n\n## License\n\nThis project is available under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoaib-sir%2Fdigitdoodle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzoaib-sir%2Fdigitdoodle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoaib-sir%2Fdigitdoodle/lists"}