Cloudinary Blog

How to automatically tag images with Amazon Rekognition

Analyze and auto tag images with Amazon Rekognition

Knowledge is power. And if you allow your users to upload images, you also probably want to better understand what their images contain. Whether a photo is of a building, people, animals, celebrities, or a product, image processing and analysis can assist in further comprehension. The benefits of this knowledge can go beyond "merely" categorizing your content and making your image library searchable: drawing insights from user generated content can be very useful! What better way to learn more about your users than to analyze the images they upload and find out what they care about and then have the ability to display relevant content to them according to their interests or even match them with other users that share similar interests.

Analyzing the contents of a photograph would be a huge time sink if performed manually on a lot of images. Enter Amazon Rekognition, a service that uses deep neural network models to detect and tag thousands of people, objects and scenes in your images, and lets you easily build powerful visual search and discovery into your applications.

Cloudinary has integrated two Amazon Rekognition add-ons into its image management and manipulation pipeline: the Amazon Rekognition Auto Tagging add-on and the Amazon Rekognition Celebrity Detection add-on.

Customers are increasingly looking for innovative ways to generate more data around their media assets to derive actionable business insights. By using Amazon Rekognition, Cloudinary is bringing this technology closer to its clients so they can build their own unique experience.

- Ranju Das, Director of Amazon Rekognition, Amazon Web Services, Inc.

Amazon Rekognition: Categorization

The Amazon Rekognition Auto Tagging add-on can automatically identify what's in a photograph and returns a list of detected categories and the confidence score of each category. The add-on is very simple to use: just set the categorization parameter of Cloudinary's image upload API to aws_rek_tagging while uploading a new image or updating an existing image and the response will include a list of identified tags for the image.

For example, uploading the following picture of a puppy to Cloudinary and requesting categorization:

Ruby:
Cloudinary::Uploader.upload("cute_puppy.jpg", 
  :categorization => "aws_rek_tagging")
PHP:
\Cloudinary\Uploader::upload("cute_puppy.jpg", 
  array("categorization" => "aws_rek_tagging"));
Python:
cloudinary.uploader.upload("cute_puppy.jpg",
  categorization = "aws_rek_tagging")
Node.js:
cloudinary.v2.uploader.upload("cute_puppy.jpg", 
  {categorization: "aws_rek_tagging"},
  function(error, result){console.log(result);});
Java:
cloudinary.uploader().upload("cute_puppy.jpg", ObjectUtils.asMap(
  "categorization", "aws_rek_tagging"));

Ruby:
cl_image_tag("cute_puppy.jpg")
PHP:
cl_image_tag("cute_puppy.jpg")
Python:
CloudinaryImage("cute_puppy.jpg").image()
Node.js:
cloudinary.image("cute_puppy.jpg")
Java:
cloudinary.url().imageTag("cute_puppy.jpg");
JS:
cloudinary.imageTag('cute_puppy.jpg').toHtml();
jQuery:
$.cloudinary.image("cute_puppy.jpg")
React:
<Image publicId="cute_puppy.jpg" >

</Image>
Angular:
<cl-image public-id="cute_puppy.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("cute_puppy.jpg")
Android:
MediaManager.get().url().generate("cute_puppy.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("cute_puppy.jpg")!, cloudinary: cloudinary)
image of a cute puppy

The upload response includes the various categories that were automatically detected in the uploaded photo together with the confidence level of the detected category. So Amazon Rekognition is 91% sure that the picture contains a puppy and is 82% sure that the breed is Newfoundland.

...
"info": {
  "categorization": {
    "aws_rek_tagging": {
      "status": "complete", 
      "data": [
        {"tag": "Animal", "confidence": 0.9117},
        {"tag": "Canine", "confidence": 0.9117}, 
        {"tag": "Dog", "confidence": 0.9117}, 
        {"tag": "Mammal", "confidence": 0.9117}, 
        {"tag": "Pet", "confidence": 0.9117}, 
        {"tag": "Puppy", "confidence": 0.9117}, 
        {"tag": "Newfoundland", "confidence": 0.8253}, 
        {"tag": "Husky", "confidence": 0.596}, 
        {"tag": "Adorable", "confidence": 0.5791} 
...

For more information on the Amazon Rekognition Auto Tagging add-on, see the documentation.

Amazon Rekognition: Celebrity Detection

The Amazon Rekognition Celebrity Detection add-on can automatically recognize thousands of celebrities in a wide range of categories, such as entertainment and media, sports, business, and politics. This add-on is also very simple to use: just set the detection parameter of Cloudinary's image upload API to aws_rek_face while uploading a new image or updating an existing image, and the response will include a list of identified celebrities for the image.

For example, uploading the following picture to Cloudinary and requesting detection:

Ruby:
Cloudinary::Uploader.upload("brangelina.jpg", 
  :detection => "aws_rek_face")
PHP:
\Cloudinary\Uploader::upload("brangelina.jpg", 
  array("detection" => "aws_rek_face"));
Python:
cloudinary.uploader.upload("brangelina.jpg",
  detection = "aws_rek_face")
Node.js:
cloudinary.v2.uploader.upload("brangelina.jpg", 
  {detection: "aws_rek_face"},
  function(error, result){console.log(result);});
Java:
cloudinary.uploader().upload("brangelina.jpg", ObjectUtils.asMap(
  "detection", "aws_rek_face"));

Ruby:
cl_image_tag("brangelina.jpg")
PHP:
cl_image_tag("brangelina.jpg")
Python:
CloudinaryImage("brangelina.jpg").image()
Node.js:
cloudinary.image("brangelina.jpg")
Java:
cloudinary.url().imageTag("brangelina.jpg");
JS:
cloudinary.imageTag('brangelina.jpg').toHtml();
jQuery:
$.cloudinary.image("brangelina.jpg")
React:
<Image publicId="brangelina.jpg" >

</Image>
Angular:
<cl-image public-id="brangelina.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("brangelina.jpg")
Android:
MediaManager.get().url().generate("brangelina.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("brangelina.jpg")!, cloudinary: cloudinary)
brangelina

The upload response includes the various celebrities that were automatically detected in the uploaded photo together with the confidence level of the detected celebrity. So Amazon Rekognition is 100% sure that this is a picture of Brad Pitt and Angelina Jolie. The response also includes information about unrecognized faces detected in the image if relevant, and the results provide detailed data on each face's location, pose, orientation within the image, and facial landmarks.

{
...
"info": 
  {"detection": 
    {"aws_rek_face": 
      {"status": "complete",
       "data": 
        {"celebrity_faces": 
          [{ 
            "name": "Angelina Jolie",
            "match_confidence": 100.0
            "face":
             {"bounding_box":
               {"width"...
              },
              "landmarks":
               [{"type": "eyeLeft",
                 "x": ...
               }],
            ...
           },
                 ...
            "name": "Brad Pitt",
            "match_confidence": 100.0},
                 ...
        "unrecognized_faces": [ ],
         ...
}}}}}

For more information on the Amazon Rekognition Celebrity Detection add-on, see the documentation.

Automatically tagging images

Cloudinary allows you to tag uploaded images, where each image can be assigned one or more tags. You can also leverage the Amazon Rekognition add-ons to automatically assign tags to your images based on a minimum confidence score of identified categories/celebrities.

Simply add the auto_tagging parameter to the upload call and the image is automatically assigned resource tags based on the Amazon Rekognition detected categories/celebrities. The value of the auto_tagging parameter is the minimum confidence score of a detected celebrity that should be used for the automatically assigned resource tag. The value of the auto_tagging parameter is given as a decimal value between 0 and 1, where 1 represents 100%. Assigning these resource tags allows you to list and search images in your media library using Cloudinary's API and Web interface.

Note that the automatic tagging feature can be used with either of the Amazon Rekognition add-ons or with both together. The following example automatically tags an uploaded image with all detected categories and celebrities that have a confidence score of at least 70% (auto_tagging = 0.7).

Ruby:
Cloudinary::Uploader.upload("steve.jpg", 
  :detection => "aws_rek_face", 
  :categorization => "aws_rek_tagging",
  :auto_tagging => 0.7)
PHP:
\Cloudinary\Uploader::upload("steve.jpg", 
  array(
    "detection" => "aws_rek_face", 
    "categorization" => "aws_rek_tagging", 
    "auto_tagging" => 0.7));
Python:
cloudinary.uploader.upload("steve.jpg",
  detection = "aws_rek_face",
  categorization = "aws_rek_tagging",
  auto_tagging = 0.7)
Node.js:
cloudinary.v2.uploader.upload("steve.jpg", {
  detection: "aws_rek_face", 
  categorization: "aws_rek_tagging", 
  auto_tagging: 0.7},
  function(error, result){console.log(result);});
Java:
cloudinary.uploader().upload("steve.jpg", ObjectUtils.asMap(
  "detection", "aws_rek_face", 
  "categorization", "aws_rek_tagging",
  "auto_tagging", "0.7"));

Ruby:
cl_image_tag("steve.jpg")
PHP:
cl_image_tag("steve.jpg")
Python:
CloudinaryImage("steve.jpg").image()
Node.js:
cloudinary.image("steve.jpg")
Java:
cloudinary.url().imageTag("steve.jpg");
JS:
cloudinary.imageTag('steve.jpg').toHtml();
jQuery:
$.cloudinary.image("steve.jpg")
React:
<Image publicId="steve.jpg" >

</Image>
Angular:
<cl-image public-id="steve.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("steve.jpg")
Android:
MediaManager.get().url().generate("steve.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("steve.jpg")!, cloudinary: cloudinary)
Steve Jobs

The response of the upload API call above returns the detected categories, the detected celebrities, and the automatically assigned tags.

{
   ...
  "tags": ["people","person","human","electronics","iphone","mobile phone","phone","Steve Jobs"]
  "info": {
    "detection": {
      "aws_rek_face": {
        "status": "complete",
        "data": [{
           "name": "Steve Jobs", 
           "match_confidence": 99.99,
            "face": {
              "bounding_box": {
                "width"...
             },
             "landmarks": [{
               "type": "eyeLeft",
                 "x": ...
               }],
            ...
           },
        "unrecognized_faces": [ ],
         ...
     }
     "categorization": {
       "aws_rek_tagging": {
         "status": "complete", 
         "data": [{
           "tag": "People", "confidence": 0.9925},
           "tag": "Person", "confidence": 0.9925},
           "tag": "Human", "confidence": 0.9924},
           "tag": "Electronics", "confidence": 0.7918},
           "tag": "Iphone", "confidence": 0.7918},
           "tag": "Mobile Phone", "confidence": 0.7918},
           "tag": "Phone", "confidence": 0.7918},
           "tag": "Computer", "confidence": 0.6756},
           "tag": "Tablet Computer", "confidence": 0.6756},
           "tag": "Face", "confidence": 0.5396},
           "tag": "Selfie", "confidence": 0.5396},
           "tag": "Cell Phone", "confidence": 0.5067}]}
      ...  
}

Summary

Understanding the images that your users upload can provide you with great insights, allow you to take actions such as creating dynamic content pages, and match content to user preferences. Cloudinary’s service together with the fully integrated Amazon Rekognition Auto Tagging and Amazon Rekognition Celebrity Detection add-ons provides developers with the powerful ability to enhance their image content management as well as increase their online users’ engagement and conversion.

celebrity detection

auto tagging

The add-ons are available with all Cloudinary plans, and both add-ons have a free tier for you to try out. If you don't have a Cloudinary account yet, sign up for a free account here.

(Hugh Laurie photo credit to Fido)

Recent Blog Posts

10 Website Videos Mistakes and How to Solve Them

It should come as no surprise that video use on the internet is exploding. You can see the dramatic growth of video on the average site in this SpeedCurve blog post.

Average Website Weight over Time

With the growth in video comes greater bandwidth use, which is not only costly for your IT budget, but for your visitors as well. Beyond the expense, there is the user experience to consider. The heavier the page, the longer it will take to load, and the greater likelihood visitors will abandon your site. Page load speed is also an important factor in SEO ranking, so clearly video is something we need to take seriously and get right. Video is challenging, presenting terms still unfamiliar to developers - like codecs, bitrate and adaptive bitrate streaming. As a result, mistakes are being made in video implementation.

Read more
Android Data Saver: Optimizing Mobile Data Usage with Cloudinary

Over the life of a mobile device, the cost of a cellular data plan often exceeds that of the device itself. To optimize data usage and purge useless data on their mobile devices, users can enable Data Saver from Android 7.0 (API level 24). To do so, users toggle Data Saver in quick settings under the Notification shade or under Settings > Data usage. With Data Saver enabled, apps that aren't whitelisted cannot use cellular data in the background. They are also directed to consume less data while active.

Read more
Introducing the Cloudinary Upload Widget v2

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals. Cloudinary is an end-to-end solution for all your image and video needs, including upload, storage, administration, manipulation, optimization and dynamic delivery.

Read more
Convert an Image to a 3D Canvas With Cloudinary

Note
This post was cowritten with Daniel Mendoza.
Note
This post was cowritten with Daniel Mendoza.
Note

Famed American poet Henry David Thoreau once said, “This world is but a canvas to our imagination.” And, like your imagination, the transformations you can apply to images with Cloudinary are practically endless. You can even render any flat image to appear three-dimensional and framed on a canvas.

Read more
Mobile Optimization: Optimize Your Mobile-Web User Experience

TL;DR

We live in a visual world, often while on the go, and consumers expect media-rich web content. Accordingly, the loading speed of images and videos is a big factor in user experience. To optimize customer satisfaction with your mobile content, you must focus on the quality, format, and size of your digital assets. With Cloudinary, optimization is simple, not only enhancing your mobile web and app performance, but also upping your SEO game and boosting customer experience.

Read more