React (https://facebook.github.io/react/) is one of the fastest maturing frontend JavaScript libraries for building component-based single page applications. This section will cover a hands-on tutorial to build a user interface using React to upload a file and get prediction using Einstein Vision on Heroku. We will use Express as a middleware to authenticate to the Prediction API and make API calls to the Einstein Vision Services. The final product can be viewed at https://powerful-bastion-25704.herokuapp.com/. It's a public Node.js app sitting on Heroku that accepts a flower image (at this point, it loads only roses, lilies, and lotuses of size less than 1 MB) and recognizes the image intelligently.
The app uses the model we built in the Explore Einstein Vision APIs section, which is trained to understand whether an uploaded flower image is of a rose, a lily, or a lotus. We will cover applicable Node.js concepts, ES6 concepts, and also ReactJS concepts as we walk along. These are a few assumptions that we will make to simplify the problem:
- We will assume that the training of the dataset will be carried out via the command line, and we will have modelId from the trained dataset. The details of this are covered in the Explore Einstein Vision APIs section
- We will assume that the reader has a Heroku account, CURL installed, and Heroku CLI and Node (version 6.9 and above) installed
- Also, at this point, we will assume that the reader has a thorough understanding of the authentication mechanism and the Prediction Vision APIs
Let's divide the problem of building this application into three major parts:
- Build a UI in React that accepts attachments and parses the responses to display the result set in a tabular format.
- Express middleware to authenticate with Private Key to the Einstein Vision API and get predictions about the image via the API.
- Connect the React app to middleware to trigger the application run upon file drop.
The following diagram shows the sequence diagram for the application we will build:
