COMP0016 Team 15

Our service is hosted on a Linode server, we built the frontend with React and the backend with Python and FastAPI. The system allows for uploads and downloads of datasets and trained machine learning models which are dockerised. Datasets and docker images are stored in file stores, and records of these aswell as users, feedback, and model downloads are stored in a postgres database. These dockerised machine learning models can be downloaded by the user and ran locally for testing. Here is a systems architecture diagram explaining the system:

To upload a trained model, users provide their source code as a zip, a pickle of the trained model, their requirements, and a configuration file. When these files are uploaded they are copied into a temporary directory along with an API file and a Docker file, the source code is unzipped, and the docker image is built with the requirements installed. This image is then stored in the docker image file store, ready to be downloaded. When the image is run, the API loads the pickle into memory, and dynamically imports the predict function using the config file. The docker file then serves an API on port 8000 with a predict endpoint which calls. When a user downloads a model, they get two images, a pre-built frontend image and the model image. They also get a readme and a docker compose. The readme gives step by step instructions on how to run the package, Once run, the frontend is served at localhost and provides a UI for calling the models predict endpoint.

We use a database to store user data, uploaded models and datasets, feedback on models, and records of model downloads so users are promted to give feedback on the models they have tested. Below is an entity relation diagram of the database:

We use PostgreSQL for the database and SQLAlchemy for an Object Relational Mapping (ORM) to represent our database tables as Python classes, where each instance of that class represents a row in the database. We use Alembic manage database migrations and to aid in maintainability and extendibility.

These are the endpoints of our backend's API, which we made with FastAPI:

Each component of our system lives on a docker container, and communicates with other containers over a docker network. We used dockerised deployment to make our system portable, and be able to be deployed easily on other cloud platforms. HTTP requests are handled with an NGINX reverse proxy for security and load balancing. Here is a webflow diagram showing how HTTP requests are communicated across the system:

To make it easier to understand the overall flow of our frontend, we have attached the diagram below.

When create our UI, we decided to follow some of the widely used and accepted design principles to guide us. [1]

The main principle that we have kept in mind is to keep the UI as simple as possible and is centered around the users, this has been achieved by using a minimalistic design and reducing number of copmonents to be displayed on each screen.

We also strived to maintain consistency across the entire application both with the visual styles and with functional components to avoid potential confusion, as you would notice with our consistent form designs and the navigation bar design.

Another important aspect is providing good user feedback for actions, this is acheived through adding animations to components in response to user actions. We have also included progress bar for uploading/downloading and pop-up menus for displaying responsive messages back to users to avoid confusion.

Last but not least, we significantly reduced the number of user actions required for them to access the resources that they need, which currently only takes a maximum number of 2-clicks, hence reducing the required cognitive load from the users.

After several iterations of UI design changes and discussion with our client, we have settled with the following UI design, and we would like to show a few snippets of them here:

Home Page

Dashboard

Popups

Progress Bar

References:

[1] “The basic principles of User Interface Design,” Studio by UXPin, 03-Aug-2021. [Online]. Available: https://www.uxpin.com/studio/blog/ui-design-principles/. [Accessed: 27-Mar-2022].