Introduction

The Udacity PyTorch Scholarship Challenge course, that I took from November 9th 2018 to January 9th 2019, has the 102 flowers classification task as the final challenge.

This side project is building a flower inference service and a PWA client accessing that service.

Using this client app, you can take a picture of a random flower, and the app will predict the name of the flower and show that prediction to you.

Please run/install the app at https://102-flowers.aldianfazrihady.com.

Using The App

Once you opens https://102-flowers.aldianfazrihady.com on Chrome or Firefox web browser, you will see the screen similar to this wireframe:

Once you clicks the "Choose File" button, the Operating System default dialog to open either Camera or Gallery will be displayed to you.

The image produced by the Camera shot, or loaded from Gallery, will be displayed, similar to this wireframe:

On the wireframe shown above, you can see that a progress spinner is shown. It indicates that the inference to predict the flower name is in progress. After waiting for (hopefully only) 1 or 2 seconds, you will see the screen displays prediction as described in this wireframe:

.

That's all!

Architecture

The PyTorch Model

I just need to re-use the PyTorch model trained for the challenge project. The checkpoint file and the inference code are hosted on the same machine. I call the machine as the inference box.

Hosting the Inference Box

I am using AWS SageMaker to host the inference box.

As SageMaker is only used for accepting inference, not model training, I needed to create a Docker image that wraps the inference algorithm and store it on AWS EC2 Container Repository.

After that, I created a SageMaker model that points to the Docker Image ARN, and created a SageMaker endpoint that uses the SageMaker model.

Accessing the Inference Endpoint from Web Browser JavaScript

Directly accessing SageMaker endpoint from Browser JavaScript code instead of Web Server (Python) code is great for improving the scalability of this app.

However, we have the problem that CORS configuration for SageMaker is not available yet.

As the workaround, I added an AWS Lambda layer that intermediate the connection between Browser JavaScript code and SageMaker endpoint.