ML Models

End-to-end digit recognition machine learning application 🔢

Overview

• frontend: www.mlmodels.org
• backend: api.mlmodels.org

Frontend

• TypeScript
• React
• React-Query - data synchronization
• Styled Components - styling
• NextUI - styling
• Netlify - CI/CD and hosting

Backend

• Python
• Poetry - dependency management and packaging
• FastAPI - API
• ONNX - machine learning models and inference runtime
• Traefik - reverse proxy and SSL
• Docker Compose - deployment
• GitHub Actions - CI/CD
• DigitalOcean - hosting

Installation

Frontend

• install packages:

yarn install

• add environment variables to .env file in project root:

#.env
REACT_APP_MNIST_URL=<backend_url>/v1/predict/mnist

• run app for development:

yarn start

• build app for production in build folder:

yarn build

Backend

• install packages:

poetry install

• add environment variables to .env file in project root:

#.env
CORS_ORIGINS=<frontend_url>

• run app for development:

poetry run python scripts/main.py

Deployment

Frontend

The frontend application is running at www.mlmodels.org. It is deployed via GitHub through Netlify.

Backend

The backend application is running at api.mlmodels.org. It is deployed via GitHub through GitHub Actions using Docker and Docker Compose.

The following GitHub secrets are required:

• BACKEND_URL - the URL of the backend
• DASHBOARD_PASSWORD - the password for the Traefik dashboard
• DASHBOARD_URL - the URL of the Traefik dashboard
• FRONTEND_URL - the URL of the frontend
• HOST - the ssh host
• KEY - the ssh private key of the client
• PORT - the ssh port of the server
• USERNAME - the ssh username