Solution design

To achieve the ability to screen images before we display them to the users on our application, we are going to do the following:

  1. On the view-thread page, we are going to provide a button next to Reply named Reply with Image to keep things simple
  2. The user is going to upload an image to our server using this interface
  3. The image will be saved on our servers temporarily
  1. The uploaded images will then be sent to the Google Cloud Vision API to detect labels and safe search annotations
  2. If the safe search annotations return POSSIBLE for the adult, medical, or violence categories, we do not allow the user to upload the image
  3. If the image is safe, we then upload it to Cloudinary, an image hosting service
  4. Once the upload to Cloudinary is successful, we will get the public URL
  5. Using all the data we have gathered so far, we are going to create a new message and then respond to it
  6. The Angular app will process the response and update the thread
Uploading images to Cloudinary is optional. I have implemented it to show an end-to-end flow.

Before we start the implementation, we need to create an API key for Cloudinary.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.119.253.31