{"id":23093120,"url":"https://github.com/crispengari/mnist-dl","last_synced_at":"2026-04-03T23:36:47.975Z","repository":{"id":43869873,"uuid":"459472289","full_name":"CrispenGari/mnist-dl","owner":"CrispenGari","description":"🎈🕶 This is a simple deep learning hand written digit recognition application using deep learning and nextjs. This application consist of the server and client and all are deployed.","archived":false,"fork":false,"pushed_at":"2022-02-15T07:37:18.000Z","size":571,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T17:02:42.279Z","etag":null,"topics":["artificial-intelligence","css","deep-learning","flask","javascript","machine-learning","nextjs","python","pytorch","react","typescript","webapplication"],"latest_commit_sha":null,"homepage":"","language":"Jupyter Notebook","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CrispenGari.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-15T07:28:26.000Z","updated_at":"2022-02-16T16:04:36.000Z","dependencies_parsed_at":"2022-09-02T06:30:27.628Z","dependency_job_id":null,"html_url":"https://github.com/CrispenGari/mnist-dl","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2Fmnist-dl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2Fmnist-dl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2Fmnist-dl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2Fmnist-dl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CrispenGari","download_url":"https://codeload.github.com/CrispenGari/mnist-dl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247061234,"owners_count":20877166,"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":["artificial-intelligence","css","deep-learning","flask","javascript","machine-learning","nextjs","python","pytorch","react","typescript","webapplication"],"created_at":"2024-12-16T21:46:30.340Z","updated_at":"2025-12-30T20:04:26.634Z","avatar_url":"https://github.com/CrispenGari.png","language":"Jupyter Notebook","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Hand Written Digit Recognition\n\nThis is a simple deep learning application for hand digits recognition in realtime.\n\n\u003cimg src=\"/mnist.png\" alt=\"img\" width=\"100%\"/\u003e\n\n### Deployed applications\n1. [server](https://lenet-mnist.herokuapp.com/)\n2. [client](https://mnist-next-client.vercel.app/)\n\n\nThis application is using a multi-repo approach with the following packages:\n\n```\n📁 mnist-dl\n    📁 server\n    📁 notebooks\n    📁 client\n```\n\n### 📁 server\n\nThe server contains a machine learning rest api for image classification using artificial neural network. The model architecture that was used for this task is the modified version of the `LeNet` which looks as follows in code:\n\n```py\nclass LeNet(nn.Module):\n    def __init__(self, output_dim):\n        super(LeNet, self).__init__()\n        self.features = nn.Sequential(\n            nn.Conv2d(in_channels=1, out_channels=6, kernel_size =5),\n            nn.MaxPool2d(kernel_size=2),\n            nn.ReLU(),\n            nn.Conv2d(in_channels=6, out_channels=16, kernel_size =5),\n            nn.MaxPool2d(kernel_size=2),\n            nn.ReLU()\n        )\n        self.classifier = nn.Sequential(\n            nn.Linear(16 * 4 * 4, 120),\n            nn.ReLU(),\n            nn.Linear(120, 84),\n            nn.ReLU(),\n            nn.Linear(84, output_dim)\n        )\n\n    def forward(self, x):\n        x = self.features(x) # x = [batch size, 16, 4, 4]\n        x = x.view(x.shape[0], -1) # x = [batch size, 16*4*4 = 256]\n        x = self.classifier(x) # x = [batch size, output dim]\n        return x\n```\n\n### 📁 notebooks\n\nThis contain a `ipynb` notebook that was used for training the digit recognition classifier in `pytorch`.\n\n### 📁 client\n\nClient is nothing but a next.js application. This application will consume the api from the server and make predictions on the hand digits that will be sketched by the user on the canvas.\n\n### Deploying and Hosting.\n\nIn this section we are going to walk through all deployment process of our server and client packages.\n\n### Hosting our server\n\nWe are going to host the server on Heroku. We are going to follow the following step to host our site.\n\n1. Make sure you have `Git` and `Python` installed on your computer\n2. [Create or Sign In to Heroku](https://id.heroku.com/login)\n3. [Install Heroku](https://devcenter.heroku.com/articles/heroku-cli#other-installation-methods)\n\n#### Installing gunicorn\n\nTo install `gunicorn` we run the following command:\n\n```shell\npip install gunicorn\n```\n\n##### Making required filed by Heroku\n\n1. `requirements.txt`\n\nCreate a requirements.txt by running the following command:\n\n```shell\npip freeze \u003e requirements.txt\n```\n\n2. Create a _Procfile_\n\n- [Procfile](https://devcenter.heroku.com/articles/procfile) is a Process file that is required for all Heroku applications. Procfile specifies the commands that are executed by the app on startup.\n- Create _`Procfile`_ in the root of your project and add the following\n\n```shell\nweb: gunicorn app:app\n```\n\nHere, the `app` is the name of your main (`.py`) file. In my case, it is `app.py`.\n\n3. Create the `runtime.txt`\n\nIn this file we are going to put the version of python that we are using in my case i'm using version `3.8.5` so i will add the following in the `runtime.txt`:\n\n```txt\npython-3.8.5\n```\n\n#### Creating a heroku application\n\nTo create a heroku application we first going to login by running the following command:\n\n```shell\nheroku login\n```\n\nCreate a new github repository and push your project using git commands\n\n```shell\n$ git init\n$ git add .\n$ git branch -M master\n$ git remote add origin https://github.com/crispendev/lenet-mnist.git\n$ git commit -m \"message-commit\"\n$ git push -u origin master\n```\n\n- Enter the credentials and run the following command to create a heroku application\n\n```shell\nheroku create \u003c your_app_name \u003e\n# example\nheroku create lenet-mnist\n```\n\nTo deploy run the following command:\n\n```shell\ngit push heroku main\n```\n\n### Deploying client to vercel\n\n1. First create or login to [vercel.com](https://vercel.com/signup)\n2. Authorize with a provider (i recommend github)\n\n#### Pushing the client code to github\n\n- Before importing the project to `vercel` we need to create a repository for our client app and push it to our github account so that we will have access to it in the vercel dashboard.\n\n```shell\ngit init\ngit add .\ngit commit branch -M main\ngit remote add origin https://github.com/crispendev/mnist-next-client.git\ngit commit -m \"init-commit\"\ngit push -u origin main\n```\n\n3. Look for the project that you want to deploy and click `import`\n4. Select the project and click `deploy`\n\n### Deployed version of the client\n\n- [mnist-next-client](https://mnist-next-client.vercel.app/)\n\n### Deployed version of the server\n\n- [deployed version of the server](https://lenet-mnist.herokuapp.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrispengari%2Fmnist-dl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrispengari%2Fmnist-dl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrispengari%2Fmnist-dl/lists"}