Make sure you have updated the code as previously detailed and installed the required dependencies before going forward. To test the app, from the root of the application folder, run:

$ npm run dev

Or run this:

$ yarn dev

This will launch our application. From the home page, click on Create New Thread and create a new thread named Vision API Test, or any name you want:

Once we create a new thread and navigate to the view thread page, we should see the new reply section:

When we click on Reply with Image, we should see a popup where you can upload an image. If the image is valid and under 2 MB, we should see a preview:

This handsome guy is Dexter. Now, when we click on Reply, the image will get uploaded to our server first, and then it will upload the same image to Cloud Vision API to get the labels and safe search annotations. If everything is as expected, this image will be uploaded to Cloudinary, a public URL of this image is fetched, and the description for this image is constructed and sent back. And this is how the final message will look:

The labels appear on the left side and the safe search information below the image. Here is the image from Pexels, https://www.pexels.com/image/alphabets-camera-card-desk-407294/, and the results are as follows:

You can try uploading various images and test the complete flow end to end.

To wrap up this chapter, we are going to push the code to Heroku.