Cloudinary AI Content Analysis

Cloudinary is a cloud-based service that provides solutions for image and video management. These include server or client-side upload, on-the-fly image and video transformations, fast CDN delivery, and a variety of asset management options.

The Cloudinary AI Content Analysis add-on (formerly known as the Cloudinary Object-Aware Cropping add-on) uses AI-based object detection and content-aware algorithms to provide the following functionality:

  • Object-aware cropping: Ensures that your image crops keep the specific objects that matter to you, even when you significantly modify the aspect ratio.

  • Automatic image tagging: Adds tags to your images based on objects or abstract concepts detected by the content-aware detection models specified on upload, or when invoked on images already stored in your account.

Getting started

Before you can use the Cloudinary AI Content Analysis add-on:

  • You must have a Cloudinary account. If you don't already have one, you can sign up for a free account.

  • Register for the add-on: make sure you're logged in to your account and then go to the Add-ons page. For more information about add-on registrations, see Registering for add-ons.

  • Keep in mind that many of the examples on this page use our SDKs. For SDK installation and configuration details, see the relevant SDK guide.

  • If you are new to Cloudinary, you may want to take a look at How to integrate Cloudinary in your app for a walk through on the basics of creating and setting up your account, working with SDKs, and then uploading, transforming and delivering assets.

Important
By default, delivery URLs that use this add-on either need to be signed or eagerly generated. You can optionally remove this requirement by selecting this add-on in the Allow unsigned add-on transformations section of the Security account settings in the Cloudinary console (the demo account has this setting applied to make the examples on this page easier to read and try out).

Supported content-aware detection models

The Cloudinary AI Content Analysis add-on supports a number of built-in content-aware detection models, each supporting a specific set of categories and objects. You can specify which version of each model to invoke for each use of the add-on.

Cloudinary currently supports the following models, as well as other Cloudinary-developed models, which you can see in the table below:

This table shows the capabilities of each supported version of each model:

  • Default version is the version of the model that is invoked if left unspecified.
  • Version indicates support for a particular version of the model - different versions have different accuracies.
  • Default confidence shows the confidence level used when auto_tagging is set to default.
  • Tag indicates support for returning tags. This is a required capability for automatic image tagging.
  • Confidence indicates support for returning confidence levels.
  • Bounding Box indicates support for returning bounding boxes. This is a required capability for object-aware cropping.
  • Mask indicates support for returning a grayscale mask for each detection.
  • Attributes indicates support for returning attributes for each tag in a (key,value) list.

Notes

  • If you use an alternative data center, currently you can use only the COCO and Open Images models.
  • If you have difficulty accessing any of the models, please contact support.
  • The human-anatomy model identifies parts of the body, and works best when the majority of a human body is detected in the image.

Supported objects and categories

Start typing the name of an object or category to see if it's supported by one of the built-in models.



  • For object-aware cropping:

    • The Full URL Syntax column shows the syntax to use to detect a specific object or category in a particular version of a model (e.g. coco_v1_tie). You can also omit the version (e.g. coco_tie), or both the model and version (e.g. tie).
  • For automatic image tagging:

    • You can specify the model and version (e.g. coco_v1), or only the model (e.g. coco).

Private models

If you have your own content-aware detection models that you would like to use, these can be integrated as private models that work only on your accounts and/or sub-accounts. Contact our support team to find out more.

Object detection demo

This demo lets you choose one of the content-aware detection models, and shows up to twenty objects that are detected by that model in an image of your choice.

Tip
To see a full list of all the detected objects and other information returned by the model, expand the JSON that appears under the image after upload.

Automatic image tagging is requested on upload, and the response provides the necessary information to overlay bounding boxes around the detected objects, together with the confidence level.

1   

2      Upload an image

3    See the detected objects:

Image showing bounding boxes

Click the image to open it full size in a new tab.


Learn more

  • Read this blog to discover all the Cloudinary features in this demo.

Object-aware cropping

When object-aware cropping is invoked, Cloudinary applies advanced AI-based object detection algorithms on-the-fly during the crop process. You can either use it in conjunction with auto-gravity to give higher priority to the objects you care about, or directly specify that the crop should be exactly based on the detected coordinates of the specified objects.

Watch this demo to see how the same image is cropped according to the parameters specified in the URL:

Applying object-aware cropping

After registering for the Cloudinary AI Content Analysis add-on, you can apply it in one of two ways:

  • Automatic gravity with a high weighting towards a specified object
    This variant of auto-gravity cropping enables you to indicate specific objects or object categories that should be given priority when parts of a photo are cropped out. This is done by specifying an object or an object category as the focal_gravity attribute for the auto gravity parameter (for example, g_auto:cat in URLs) together with a cropping option. If the specified content is not found in the image, the gravity is determined by the standard auto-gravity algorithm.

  • Object-specific gravity
    By specifying an object or object category as the gravity parameter (for example, g_cat in URLs) together with a cropping option, you can accurately crop around objects without needing to specify dimensions or aspect ratio. If the specified content is not found in the image, the gravity remains at the center of the image.

When specifying an object or category, you can optionally include a specific model and version. For example, you can specify:

  • Only the object/category, e.g.: g_auto:cat or g_cat
  • The model with the object/category, e.g.: g_auto:coco_cat or g_coco_cat
  • The model and version with object/category, e.g.: g_auto:coco_v1_cat or g_coco_v1_cat

If you choose not to specify a model, each model is invoked in turn until the specified content is detected. The order in which they are invoked is: coco > lvis > openimages > cld-fashion > human-anatomy > cld-text.

Note
If you have any private models set up, these are invoked first, in the order specified in your account settings.

Consider the original image of a kitchen below:

Original

Using auto-gravity, you can deliver a square thumbnail crop that prioritizes the detected coordinates of the sink, microwave, or refrigerator. To do this, specify the relevant object option for the g_auto gravity definition in conjunction with the thumb cropping option:

Ruby:
Copy to clipboard
cl_image_tag("docs/kitchen1.jpg", :aspect_ratio=>"1.0", :gravity=>"auto:sink", :width=>600, :crop=>"thumb")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('docs/kitchen1.jpg'))
  ->resize(Resize::thumbnail()->width(600)
->aspectRatio(1.0)
  ->gravity(
  Gravity::autoGravity()
  ->autoFocus(
  AutoFocus::focusOn(
  FocusOn::sink()))
  )
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/kitchen1.jpg", array("aspect_ratio"=>"1.0", "gravity"=>"auto:sink", "width"=>600, "crop"=>"thumb"))
Python:
Copy to clipboard
CloudinaryImage("docs/kitchen1.jpg").image(aspect_ratio="1.0", gravity="auto:sink", width=600, crop="thumb")
Node.js:
Copy to clipboard
cloudinary.image("docs/kitchen1.jpg", {aspect_ratio: "1.0", gravity: "auto:sink", width: 600, crop: "thumb"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").gravity("auto:sink").width(600).crop("thumb")).imageTag("docs/kitchen1.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("docs/kitchen1.jpg").resize(
  thumbnail()
    .width(600)
    .aspectRatio("1.0")
    .gravity(autoGravity().autoFocus(focusOn(sink())))
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('docs/kitchen1.jpg', {aspectRatio: "1.0", gravity: "auto:sink", width: 600, crop: "thumb"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/kitchen1.jpg", {aspect_ratio: "1.0", gravity: "auto:sink", width: 600, crop: "thumb"})
React:
Copy to clipboard
<Image publicId="docs/kitchen1.jpg" >
  <Transformation aspectRatio="1.0" gravity="auto:sink" width="600" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="docs/kitchen1.jpg" >
  <cld-transformation aspect-ratio="1.0" gravity="auto:sink" width="600" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/kitchen1.jpg" >
  <cl-transformation aspect-ratio="1.0" gravity="auto:sink" width="600" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().AspectRatio("1.0").Gravity("auto:sink").Width(600).Crop("thumb")).BuildImageTag("docs/kitchen1.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setAspectRatio("1.0").setGravity("auto:sink").setWidth(600).setCrop("thumb")).generate("docs/kitchen1.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").gravity("auto:sink").width(600).crop("thumb")).generate("docs/kitchen1.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("docs/kitchen1.jpg")
   resize(Resize.thumbnail() { width(600)
 aspectRatio(1.0F)
   gravity(
  Gravity.autoGravity() {
   autoFocus(
  AutoFocus.focusOn(
  FocusOn.sink()))
   })
   }) 
}.generate()

g_auto:sink g_auto:sink g_auto:microwave g_auto:microwave g_auto:refrigerator g_auto:refrigerator

Using object-specific gravity, you can choose not to give dimensions or aspect ratio, and deliver an image that is tightly cropped to the object. To do this, specify the relevant object option for the gravity definition in conjunction with the crop cropping option:

Ruby:
Copy to clipboard
cl_image_tag("docs/kitchen1.jpg", :gravity=>"sink", :crop=>"crop")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('docs/kitchen1.jpg'))
  ->resize(Resize::crop()
  ->gravity(
  Gravity::focusOn(
  FocusOn::sink()))
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/kitchen1.jpg", array("gravity"=>"sink", "crop"=>"crop"))
Python:
Copy to clipboard
CloudinaryImage("docs/kitchen1.jpg").image(gravity="sink", crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("docs/kitchen1.jpg", {gravity: "sink", crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("sink").crop("crop")).imageTag("docs/kitchen1.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("docs/kitchen1.jpg").resize(
  crop().gravity(focusOn(sink()))
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('docs/kitchen1.jpg', {gravity: "sink", crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/kitchen1.jpg", {gravity: "sink", crop: "crop"})
React:
Copy to clipboard
<Image publicId="docs/kitchen1.jpg" >
  <Transformation gravity="sink" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="docs/kitchen1.jpg" >
  <cld-transformation gravity="sink" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/kitchen1.jpg" >
  <cl-transformation gravity="sink" crop="crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("sink").Crop("crop")).BuildImageTag("docs/kitchen1.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("sink").setCrop("crop")).generate("docs/kitchen1.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("sink").crop("crop")).generate("docs/kitchen1.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("docs/kitchen1.jpg")
   resize(Resize.crop() {
   gravity(
  Gravity.focusOn(
  FocusOn.sink()))
   }) 
}.generate()

g_sink g_sink g_microwave g_microwave g_auto:refrigerator g_refrigerator

You can also specify an aspect ratio together with the crop cropping option, without including specific dimensions. This keeps the object but may show more of the image to fit the aspect ratio.

Ruby:
Copy to clipboard
cl_image_tag("docs/kitchen1.jpg", :gravity=>"sink", :aspect_ratio=>"1", :crop=>"crop")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('docs/kitchen1.jpg'))
  ->resize(Resize::crop()->aspectRatio(1.0)
  ->gravity(
  Gravity::focusOn(
  FocusOn::sink()))
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/kitchen1.jpg", array("gravity"=>"sink", "aspect_ratio"=>"1", "crop"=>"crop"))
Python:
Copy to clipboard
CloudinaryImage("docs/kitchen1.jpg").image(gravity="sink", aspect_ratio="1", crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("docs/kitchen1.jpg", {gravity: "sink", aspect_ratio: "1", crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("sink").aspectRatio("1").crop("crop")).imageTag("docs/kitchen1.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("docs/kitchen1.jpg").resize(
  crop()
    .aspectRatio("1.0")
    .gravity(focusOn(sink()))
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('docs/kitchen1.jpg', {gravity: "sink", aspectRatio: "1", crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/kitchen1.jpg", {gravity: "sink", aspect_ratio: "1", crop: "crop"})
React:
Copy to clipboard
<Image publicId="docs/kitchen1.jpg" >
  <Transformation gravity="sink" aspectRatio="1" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="docs/kitchen1.jpg" >
  <cld-transformation gravity="sink" aspect-ratio="1" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/kitchen1.jpg" >
  <cl-transformation gravity="sink" aspect-ratio="1" crop="crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("sink").AspectRatio("1").Crop("crop")).BuildImageTag("docs/kitchen1.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("sink").setAspectRatio("1").setCrop("crop")).generate("docs/kitchen1.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("sink").aspectRatio("1").crop("crop")).generate("docs/kitchen1.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("docs/kitchen1.jpg")
   resize(Resize.crop() { aspectRatio(1.0F)
   gravity(
  Gravity.focusOn(
  FocusOn.sink()))
   }) 
}.generate()

g_sink g_sink g_microwave g_microwave g_auto:refrigerator g_refrigerator

In addition to the crop and thumb cropping modes, object aware cropping can also be used with the fill and lfill (limit fill) cropping modes. The fill_pad cropping mode works with the auto-gravity variant of object aware cropping, but not object-specific gravity.

Notes on specifying categories and objects

When applying object-aware cropping, you can specify either individual objects or more general object categories.

  • When you specify a category, the algorithm gives priority to any objects that are detected from that category.
  • The regular auto-gravity behavior also impacts the cropping decision. But if requested objects are detected, they get significantly higher priority than the subjects or salient areas that the regular auto-gravity algorithm selects.
  • If you specify the generic object category with auto-gravity (g_auto:object), then any detected objects from any category get priority.
  • If there are multiple objects of the same type in the image, object-specific gravity selects the most prominent of the objects, and bases its crop around only that object, whereas auto-gravity may choose to keep more than one of the objects in the crop.
  • The categories and objects also work in their plural forms when using object-specific gravity. So, for example, c_crop,g_birds keeps all birds in the crop, whereas c_crop,g_bird keeps only the most prominent bird.

Combining focal gravity options using auto-gravity

When using auto gravity to determine the area to keep in a crop, you can specify multiple focal_gravity options.

This means that in a single auto-gravity parameter, you can optionally specify:

  • One or multiple objects (from the same or different categories and/or models)
  • Built-in focal gravity options such as face/faces or custom_no_override
  • Other add-on based focal gravity options, such as the adv_face, adv_eyes options from the Advanced Facial Attributes Detection add-on
  • Only the classic or only the subject auto-gravity algorithm, which in some cases may have some impact on the exact coordinates of the crop, even if other specified objects or focal gravity options are detected. Note that the default algorithm, which combines both of these algorithms, is recommended in the majority of cases.

For example, your auto-gravity URL parameter might be: g_auto:cat:sofa:faces:adv_eyes

This would instruct the cropping mechanism to give top priority to any cats, sofas, faces, or eyes detected in the photo.

For a complete list of all focal_gravity options, see the g_<special_position> section of the Transformation URL API Reference.

Important

  • The focal gravity options can be specified in any order. The order does not impact the result.
  • When multiple items are detected that match the requested focal options, larger, more central, and more in-focus (less blurry) objects will get higher priority.
    In special cases, it's possible to fine-tune this default prioritization further. For details, contact support.
  • If a particular image has custom coordinates defined, those coordinates always override all other focal gravity options, unless you use the custom_no_override option in conjunction with the other options.

Combining focal gravity options using object-specific gravity

When using object-specific gravity to determine the area to keep in a crop, you can specify multiple focal_gravity options, but unlike auto-gravity, the order in which they are specified has an impact on the delivered image.

For example, consider this photo of a cat and dog:

Original

By setting the gravity parameter to cat:dog the cat gets precedence:

Ruby:
Copy to clipboard
cl_image_tag("docs/one_cat_one_dog.jpg", :gravity=>"cat:dog", :crop=>"crop")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('docs/one_cat_one_dog.jpg'))
  ->resize(Resize::crop()
  ->gravity(
  Gravity::focusOn(
  FocusOn::cat(),
  FocusOn::dog()))
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/one_cat_one_dog.jpg", array("gravity"=>"cat:dog", "crop"=>"crop"))
Python:
Copy to clipboard
CloudinaryImage("docs/one_cat_one_dog.jpg").image(gravity="cat:dog", crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("docs/one_cat_one_dog.jpg", {gravity: "cat:dog", crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("cat:dog").crop("crop")).imageTag("docs/one_cat_one_dog.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("docs/one_cat_one_dog.jpg").resize(
  crop().gravity(focusOn(cat(), dog()))
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('docs/one_cat_one_dog.jpg', {gravity: "cat:dog", crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/one_cat_one_dog.jpg", {gravity: "cat:dog", crop: "crop"})
React:
Copy to clipboard
<Image publicId="docs/one_cat_one_dog.jpg" >
  <Transformation gravity="cat:dog" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="docs/one_cat_one_dog.jpg" >
  <cld-transformation gravity="cat:dog" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/one_cat_one_dog.jpg" >
  <cl-transformation gravity="cat:dog" crop="crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("cat:dog").Crop("crop")).BuildImageTag("docs/one_cat_one_dog.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("cat:dog").setCrop("crop")).generate("docs/one_cat_one_dog.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("cat:dog").crop("crop")).generate("docs/one_cat_one_dog.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("docs/one_cat_one_dog.jpg")
   resize(Resize.crop() {
   gravity(
  Gravity.focusOn(
  FocusOn.cat(),
  FocusOn.dog()))
   }) 
}.generate()

g_cat:dog

Whereas, if you switch the order to dog:cat the dog gets precedence:

Ruby:
Copy to clipboard
cl_image_tag("docs/one_cat_one_dog.jpg", :gravity=>"dog:cat", :crop=>"crop")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('docs/one_cat_one_dog.jpg'))
  ->resize(Resize::crop()
  ->gravity(
  Gravity::focusOn(
  FocusOn::dog(),
  FocusOn::cat()))
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/one_cat_one_dog.jpg", array("gravity"=>"dog:cat", "crop"=>"crop"))
Python:
Copy to clipboard
CloudinaryImage("docs/one_cat_one_dog.jpg").image(gravity="dog:cat", crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("docs/one_cat_one_dog.jpg", {gravity: "dog:cat", crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("dog:cat").crop("crop")).imageTag("docs/one_cat_one_dog.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("docs/one_cat_one_dog.jpg").resize(
  crop().gravity(focusOn(dog(), cat()))
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('docs/one_cat_one_dog.jpg', {gravity: "dog:cat", crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/one_cat_one_dog.jpg", {gravity: "dog:cat", crop: "crop"})
React:
Copy to clipboard
<Image publicId="docs/one_cat_one_dog.jpg" >
  <Transformation gravity="dog:cat" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="docs/one_cat_one_dog.jpg" >
  <cld-transformation gravity="dog:cat" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/one_cat_one_dog.jpg" >
  <cl-transformation gravity="dog:cat" crop="crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("dog:cat").Crop("crop")).BuildImageTag("docs/one_cat_one_dog.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("dog:cat").setCrop("crop")).generate("docs/one_cat_one_dog.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("dog:cat").crop("crop")).generate("docs/one_cat_one_dog.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("docs/one_cat_one_dog.jpg")
   resize(Resize.crop() {
   gravity(
  Gravity.focusOn(
  FocusOn.dog(),
  FocusOn.cat()))
   }) 
}.generate()

g_dog:cat

You can also combine the auto option to invoke the auto-gravity algorithm if none of the specified objects are found. For example:

  • g_dog:cat:auto - auto-gravity is invoked only if no dogs and cats are detected.
  • g_dog:auto:cat - auto-gravity weighted by cat (g_auto:cat) is invoked if no dogs are detected.

Important
If you use the auto option then you also need to specify at least one dimension parameter (width or height).

For example, consider this photo of a cat and three birds:

Original

As there is no dog in the photo, auto-gravity weighted by bird is invoked when using dog:auto:bird. In this case, two birds are kept in the crop:

Ruby:
Copy to clipboard
cl_image_tag("docs/cat_and_birds.jpg", :gravity=>"dog:auto:bird", :width=>600, :height=>800, :crop=>"crop")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('docs/cat_and_birds.jpg'))
  ->resize(Resize::crop()->width(600)
->height(800)
  ->gravity(
  Gravity::focusOn(
  FocusOn::dog())
  ->fallbackGravity(
  Gravity::autoGravity()
  ->autoFocus(
  AutoFocus::focusOn(
  FocusOn::bird()))
  )
  )
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/cat_and_birds.jpg", array("gravity"=>"dog:auto:bird", "width"=>600, "height"=>800, "crop"=>"crop"))
Python:
Copy to clipboard
CloudinaryImage("docs/cat_and_birds.jpg").image(gravity="dog:auto:bird", width=600, height=800, crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("docs/cat_and_birds.jpg", {gravity: "dog:auto:bird", width: 600, height: 800, crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("dog:auto:bird").width(600).height(800).crop("crop")).imageTag("docs/cat_and_birds.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("docs/cat_and_birds.jpg").resize(
  crop()
    .width(600)
    .height(800)
    .gravity(
      focusOn(dog()).fallbackGravity(autoGravity().autoFocus(focusOn(bird())))
    )
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('docs/cat_and_birds.jpg', {gravity: "dog:auto:bird", width: 600, height: 800, crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/cat_and_birds.jpg", {gravity: "dog:auto:bird", width: 600, height: 800, crop: "crop"})
React:
Copy to clipboard
<Image publicId="docs/cat_and_birds.jpg" >
  <Transformation gravity="dog:auto:bird" width="600" height="800" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="docs/cat_and_birds.jpg" >
  <cld-transformation gravity="dog:auto:bird" width="600" height="800" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/cat_and_birds.jpg" >
  <cl-transformation gravity="dog:auto:bird" width="600" height="800" crop="crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("dog:auto:bird").Width(600).Height(800).Crop("crop")).BuildImageTag("docs/cat_and_birds.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("dog:auto:bird").setWidth(600).setHeight(800).setCrop("crop")).generate("docs/cat_and_birds.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("dog:auto:bird").width(600).height(800).crop("crop")).generate("docs/cat_and_birds.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("docs/cat_and_birds.jpg")
   resize(Resize.crop() { width(600)
 height(800)
   gravity(
  Gravity.focusOn(
  FocusOn.dog()) {
   fallbackGravity(
  Gravity.autoGravity() {
   autoFocus(
  AutoFocus.focusOn(
  FocusOn.bird()))
   })
   })
   }) 
}.generate()

g_auto:bird

Notice that if auto-gravity is not specified, the object-specific algorithm chooses the most prominent bird out of the three and only keeps this bird in the crop:

Ruby:
Copy to clipboard
cl_image_tag("docs/cat_and_birds.jpg", :gravity=>"dog:bird", :width=>600, :height=>800, :crop=>"crop")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('docs/cat_and_birds.jpg'))
  ->resize(Resize::crop()->width(600)
->height(800)
  ->gravity(
  Gravity::focusOn(
  FocusOn::dog(),
  FocusOn::bird()))
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/cat_and_birds.jpg", array("gravity"=>"dog:bird", "width"=>600, "height"=>800, "crop"=>"crop"))
Python:
Copy to clipboard
CloudinaryImage("docs/cat_and_birds.jpg").image(gravity="dog:bird", width=600, height=800, crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("docs/cat_and_birds.jpg", {gravity: "dog:bird", width: 600, height: 800, crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("dog:bird").width(600).height(800).crop("crop")).imageTag("docs/cat_and_birds.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("docs/cat_and_birds.jpg").resize(
  crop()
    .width(600)
    .height(800)
    .gravity(focusOn(dog(), bird()))
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('docs/cat_and_birds.jpg', {gravity: "dog:bird", width: 600, height: 800, crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/cat_and_birds.jpg", {gravity: "dog:bird", width: 600, height: 800, crop: "crop"})
React:
Copy to clipboard
<Image publicId="docs/cat_and_birds.jpg" >
  <Transformation gravity="dog:bird" width="600" height="800" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="docs/cat_and_birds.jpg" >
  <cld-transformation gravity="dog:bird" width="600" height="800" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/cat_and_birds.jpg" >
  <cl-transformation gravity="dog:bird" width="600" height="800" crop="crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("dog:bird").Width(600).Height(800).Crop("crop")).BuildImageTag("docs/cat_and_birds.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity("dog:bird").setWidth(600).setHeight(800).setCrop("crop")).generate("docs/cat_and_birds.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("dog:bird").width(600).height(800).crop("crop")).generate("docs/cat_and_birds.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("docs/cat_and_birds.jpg")
   resize(Resize.crop() { width(600)
 height(800)
   gravity(
  Gravity.focusOn(
  FocusOn.dog(),
  FocusOn.bird()))
   }) 
}.generate()

g_bird

Specifying objects to avoid using auto-gravity

In addition to specifying objects to keep in an image, you can specify objects that you would rather not see. To minimize the likelihood of including a particular object in the cropped image, use auto-gravity with the avoid option for the relevant object or category.

For example, in photos like the one below, you may prefer not to include people because the purpose of the photo is to show an interesting store front, and the people are a distraction.

Original

Using g_auto by itself makes the people the focal point, but if we use g_auto:person_avoid, the other side of the photo is shown, without the people.

Ruby:
Copy to clipboard
cl_image_tag("docs/store_front.jpg", :width=>500, :aspect_ratio=>"1.0", :gravity=>"auto:person_avoid", :crop=>"fill")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('docs/store_front.jpg'))
  ->resize(Resize::fill()->width(500)
->aspectRatio(1.0)
  ->gravity(
  Gravity::autoGravity()
  ->autoFocus(
  AutoFocus::focusOn(
  FocusOn::person())->avoid())
  )
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("docs/store_front.jpg", array("width"=>500, "aspect_ratio"=>"1.0", "gravity"=>"auto:person_avoid", "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("docs/store_front.jpg").image(width=500, aspect_ratio="1.0", gravity="auto:person_avoid", crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("docs/store_front.jpg", {width: 500, aspect_ratio: "1.0", gravity: "auto:person_avoid", crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(500).aspectRatio("1.0").gravity("auto:person_avoid").crop("fill")).imageTag("docs/store_front.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("docs/store_front.jpg").resize(
  fill()
    .width(500)
    .aspectRatio("1.0")
    .gravity(autoGravity().autoFocus(focusOn(person()).avoid()))
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('docs/store_front.jpg', {width: 500, aspectRatio: "1.0", gravity: "auto:person_avoid", crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/store_front.jpg", {width: 500, aspect_ratio: "1.0", gravity: "auto:person_avoid", crop: "fill"})
React:
Copy to clipboard
<Image publicId="docs/store_front.jpg" >
  <Transformation width="500" aspectRatio="1.0" gravity="auto:person_avoid" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="docs/store_front.jpg" >
  <cld-transformation width="500" aspect-ratio="1.0" gravity="auto:person_avoid" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/store_front.jpg" >
  <cl-transformation width="500" aspect-ratio="1.0" gravity="auto:person_avoid" crop="fill">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).AspectRatio("1.0").Gravity("auto:person_avoid").Crop("fill")).BuildImageTag("docs/store_front.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setAspectRatio("1.0").setGravity("auto:person_avoid").setCrop("fill")).generate("docs/store_front.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(500).aspectRatio("1.0").gravity("auto:person_avoid").crop("fill")).generate("docs/store_front.jpg");
Kotlin:
Copy to clipboard
// This code example is not currently available.

g_auto g_auto g_auto:person_avoid g_auto:person_avoid

Choosing the cropping mode

When you specify an object, either specifically or in your auto-gravity parameter, the Object-Aware Cropping AI algorithm detects the coordinates of the object and those coordinates are used by the cropping mode.

  • When using thumb cropping (c_thumb), the image is cropped as closely as possible to the detected coordinates of the object given the requested aspect ratio, and then scaled to the requested pixel size. Note that if the requested pixel size is greater than the crop, the image is not scaled up, but filled with further pixels from the image.

  • When using crop mode (c_crop), the detected coordinates are prioritized as the area to keep when determining how much to cut from each edge of the photo in order to achieve the requested pixel size. If using auto-gravity and the requested pixel size is larger than the coordinates of the detected object, other elements of the image that receive priority from g_auto may impact what else is included in the photo and where in your resulting image the detected object may be located, meaning that the detected object will not necessarily be the center of the photo.

  • When using any of the fill-based modes (c_fill, c_lfill, c_fill_pad), the coordinates of the detected object should be retained if any cropping is required after scaling. If using auto-gravity, other elements of the image that receive priority from g_auto may impact what else is included in the photo and where in your resulting image the detected object may be located, meaning that the detected object will not necessarily be the center of the photo.

The following examples show how different your cropping results may be for the same requested object in the gravity, but with different cropping modes. In this case, we take the original photo below and apply g_auto:bottle and g_bottle with fill, crop, and thumb cropping modes. In all cases, the same width and aspect ratio are requested.

Original Original

 

g_auto:bottle

c_fill c_fill c_crop c_crop c_thumb c_thumb

g_bottle

c_fill c_fill c_crop c_crop c_thumb c_thumb

Using object-aware cropping for responsive delivery

You can take advantage of object-aware cropping with various cropping modes to assist in responsive art direction. This means that when you deliver different sized images to different devices, you don't just scale the same image, but rather crop images differently for different sizes, so that the important objects are always highly visible.

For example, you may:

  • deliver a full-size image to large HD screens
  • use g_auto:[your_important_object], or g_[your_important_object] with fill cropping for medium sized screens
  • use g_auto:[your_important_object], or g_[your_important_object] with thumb cropping for very small screens.

For more details on delivering responsive images, see the Responsive images guide.

Signed URLs

Cloudinary's dynamic image transformation URLs are powerful tools. However, due to the potential costs of your customers experimenting with dynamic URLs that apply the object-aware cropping algorithm, image transformation add-on URLs are required (by default) to be signed using Cloudinary's authenticated API. Alternatively, you can eagerly generate the requested derived images using Cloudinary's authenticated API.

To create a signed delivery URL, set the sign_url parameter to true when building a URL or creating an image tag.

The following code example applies object-aware cropping to the skater image, including a signed Cloudinary URL:

Ruby:
Copy to clipboard
cl_image_tag("Skater.jpg", :width=>400, :aspect_ratio=>"1", :gravity=>"auto:skateboard", :crop=>"thumb", :sign_url=>true)
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('Skater.jpg'))
  ->resize(Resize::thumbnail()->width(400)
->aspectRatio(1.0)
  ->gravity(
  Gravity::autoGravity()
  ->autoFocus(
  AutoFocus::focusOn(
  FocusOn::skateboard()))
  )
  )
  ->sign();
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("Skater.jpg", array("width"=>400, "aspect_ratio"=>"1", "gravity"=>"auto:skateboard", "crop"=>"thumb", "sign_url"=>true))
Python:
Copy to clipboard
CloudinaryImage("Skater.jpg").image(width=400, aspect_ratio="1", gravity="auto:skateboard", crop="thumb", sign_url=True)
Node.js:
Copy to clipboard
cloudinary.image("Skater.jpg", {width: 400, aspect_ratio: "1", gravity: "auto:skateboard", crop: "thumb", sign_url: true})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(400).aspectRatio("1").gravity("auto:skateboard").crop("thumb")).signed(true).imageTag("Skater.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("Skater.jpg")
  .resize(
    thumbnail()
      .width(400)
      .aspectRatio("1.0")
      .gravity(autoGravity().autoFocus(focusOn(skateboard())))
  )
  .setSignature("acvfjq2y");
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('Skater.jpg', {width: 400, aspectRatio: "1", gravity: "auto:skateboard", crop: "thumb", signUrl: true}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("Skater.jpg", {width: 400, aspect_ratio: "1", gravity: "auto:skateboard", crop: "thumb"})
React:
Copy to clipboard
<Image publicId="Skater.jpg" signUrl="true">
  <Transformation width="400" aspectRatio="1" gravity="auto:skateboard" crop="thumb" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="Skater.jpg" sign-url="true">
  <cld-transformation width="400" aspect-ratio="1" gravity="auto:skateboard" crop="thumb" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="Skater.jpg" sign-url="true">
  <cl-transformation width="400" aspect-ratio="1" gravity="auto:skateboard" crop="thumb">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).AspectRatio("1").Gravity("auto:skateboard").Crop("thumb")).Signed(true).BuildImageTag("Skater.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setAspectRatio("1").setGravity("auto:skateboard").setCrop("thumb")).generate("Skater.jpg", signUrl: true)!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(400).aspectRatio("1").gravity("auto:skateboard").crop("thumb")).signed(true).generate("Skater.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("Skater.jpg")
   resize(Resize.thumbnail() { width(400)
 aspectRatio(1.0F)
   gravity(
  Gravity.autoGravity() {
   autoFocus(
  AutoFocus.focusOn(
  FocusOn.skateboard()))
   })
   })
   signature() 
}.generate()

The generated Cloudinary URL shown below includes a signature component (/s--acvfjq2y--/). Only URLs with a valid signature that matches the requested image transformation will be approved for on-the-fly image transformation and delivery.

Copy to clipboard
https://res.cloudinary.com/my_cloud/image/upload/s--acvfjq2y--/w_400,ar_1,c_thumb,g_auto:skateboard/Skater.jpg

For more details on signed URLs, see Signed delivery URLs.

Note
You can optionally remove the signed URL default requirement for a particular add-on by selecting that add-on in the Allow unsigned add-on transformations section of the Security account settings in the Cloudinary console.

Automatic image tagging

The automatic image tagging behavior of the Cloudinary AI Content Analysis add-on can be invoked on uploading an image, or by updating an image that's already stored in your account. Using the specified model, it analyzes the image, identifies categories and objects, and suggests tags that could be applied to the image.

Object and category detection

Take a look at the following photo of a woman dressed fashionably for winter:

Woman dressed fashionably for winter

By setting the detection parameter to the name of the model (and optionally the version) you want to invoke when calling Cloudinary's upload or update methods, the add-on automatically analyzes the content of the uploaded or specified existing image. For example, invoking version 2 of the cld-fashion detection model while uploading winter_fashion.jpg:

Ruby:
Copy to clipboard
Cloudinary::Uploader.upload("winter_fashion.jpg", 
  :detection => "cld-fashion_v2")
PHP:
Copy to clipboard
\Cloudinary\Uploader::upload("winter_fashion.jpg", 
  ["detection" => "cld-fashion_v2"]);
Python:
Copy to clipboard
cloudinary.uploader.upload("winter_fashion.jpg",
  detection = "cld-fashion_v2")
Node.js:
Copy to clipboard
cloudinary.v2.uploader.upload("winter_fashion.jpg", 
  { detection: "cld-fashion_v2" },
  function(error, result) {console.log(result, error) });
Java:
Copy to clipboard
cloudinary.uploader().upload("winter_fashion.jpg", ObjectUtils.asMap(
  "detection", "cld-fashion_v2"));
.NET:
Copy to clipboard
var uploadParams = new ImageUploadParams() 
{
  File = new FileDescription(@"winter_fashion.jpg"),
  Detection = "cld-fashion_v2"
};
var uploadResult = cloudinary.Upload(uploadParams);
iOS:
Copy to clipboard
let params = CLDUploadRequestParams().setDetection("cld-fashion_v2")
var mySig = MyFunction(params)  // your own function that returns a signature generated on your backend
params.setSignature(CLDSignature(signature: mySig.signature, timestamp: mySig.timestamp))
let request = cloudinary.createUploader().signedUpload(
  url: "winter_fashion.jpg", params: params)
Android:
Copy to clipboard
MediaManager.get().upload("winter_fashion.jpg")
  .option("detection", "cld-fashion_v2").dispatch();
cURL:
Copy to clipboard
curl https://api.cloudinary.com/v1_1/demo/image/upload -X POST --data 'file=winter_fashion.jpg&detection=cld-fashion_v2&timestamp=173719931&api_key=436464676&signature=a781d61f86a6f818af'
CLI:
Copy to clipboard
cld uploader upload "winter_fashion.jpg" detection="cld-fashion_v2"

Tip

You can use upload presets to centrally define a set of upload options including add-on operations to apply, instead of specifying them in each upload call. You can define multiple upload presets, and apply different presets in different upload scenarios. You can create new upload presets in the Upload page of the Management Console settings or using the upload_presets Admin API method. From the Upload page of the console settings, you can also select default upload presets to use for image, video, and raw API uploads (respectively) as well as default presets for image, video, and raw uploads performed via the Media Library UI.

Learn more: Upload presets

The upload API response includes the categories and objects automatically identified by the model you requested. As can be seen in the response snippet below, a hat and a specific type of outerwear are automatically detected in the uploaded photo. Depending on the capabilities of each model, different information is returned. In the example below, a confidence score, bounding box and in some cases, attributes, are returned for each detected object. The confidence score is a numerical value representing the certainty of a correct detection, where 1.0 means 100% confidence. The bounding-box parameter shows the location of the object in the image, as an array: [x-coordinate of top left corner, y-coordinate of top left corner, width of box, height of box]. Bounding-box information is used in the object detection demo.

Copy to clipboard
{
...
  "info": {
    "detection": {
      "object_detection": {
        "status": "complete",
        "data": {
          "cld-fashion": {
            "model_name": "cld-fashion",
            "model_version": 2,
            "schema_version": 1,
            "tags": {
              "hat": [
                {
                  "bounding-box": [
                    1203.4641054329725,
                    85.94320068359376,
                    419.43426051207325,
                    351.2288696289063
                  ],
                  "categories": [
                    "fashion"
                  ],
                  "confidence": 0.9853795170783997
                }
              ],
              "outerwear": [
                {
                  "attributes": {
                    "jackets_coats": [
                      [
                        "blanket (coat)",
                        0.8722688555717468
                      ]
                    ],
                    "length": [
                      [
                        "knee (length)",
                        0.5171285271644592
                      ]
                    ],
                    "neckline_type": [
                      [
                        "cowl (neck)",
                        0.6793023943901062
                      ]
                    ],
                    "pattern": [
                      [
                        "herringbone (pattern)",
                        0.7162534594535828
                      ]
                    ],
                    "silhouette_fit": [
                      [
                        "loose (fit)",
                        0.636439859867096
                      ]
                    ],
                    "special_features": [
                      [
                        "lining",
                        0.7706462740898132
                      ]
                    ]
                  },
                  "bounding-box": [
                    1134.8407251769358,
                    329.68173828125003,
                    553.6939594608659,
                    951.91826171875
                  ],
                  "categories": [
                    "fashion"
                  ],
                  "confidence": 0.9895038604736328
                }
              ]
            }
          }
        }
      }
    }
  },

Adding tags to images

By providing the auto_tagging parameter to an upload or update request, images are automatically assigned tags based on the detected content. The value of the auto_tagging parameter is the minimum confidence score of a detected category or object that should be automatically used as an assigned tag. You can also set auto_tagging to default, which uses the model's default confidence.

The following code example automatically tags an uploaded image with all detected categories that have a confidence score higher than 0.6.

Ruby:
Copy to clipboard
Cloudinary::Uploader.upload("winter_fashion.jpg", 
  :detection => "cld-fashion_v2", :auto_tagging => 0.6)
PHP:
Copy to clipboard
\Cloudinary\Uploader::upload("winter_fashion.jpg", 
  ["detection" => "cld-fashion_v2", "auto_tagging" => 0.6]);
Python:
Copy to clipboard
cloudinary.uploader.upload("winter_fashion.jpg",
  detection = "cld-fashion_v2", auto_tagging = 0.6)
Node.js:
Copy to clipboard
cloudinary.v2.uploader.upload("winter_fashion.jpg", 
  { detection: "cld-fashion_v2", 
    auto_tagging: 0.6 },
  function(error, result) {console.log(result, error) });
Java:
Copy to clipboard
cloudinary.uploader().upload("winter_fashion.jpg", ObjectUtils.asMap(
  "detection", "cld-fashion_v2", "auto_tagging", "0.6"));
.NET:
Copy to clipboard
var uploadParams = new ImageUploadParams() 
{
  File = new FileDescription(@"winter_fashion.jpg"),
  Detection = "cld-fashion_v2",
  AutoTagging = 0.6
};
var uploadResult = cloudinary.Upload(uploadParams);
iOS:
Copy to clipboard
let params = CLDUploadRequestParams()
  .setDetection("cld-fashion_v2")
  .setAutoTagging(0.6)
var mySig = MyFunction(params)  // your own function that returns a signature generated on your backend
params.setSignature(CLDSignature(signature: mySig.signature, timestamp: mySig.timestamp))
let request = cloudinary.createUploader().signedUpload(
  url: "winter_fashion.jpg", params: params)
Android:
Copy to clipboard
MediaManager.get().upload("winter_fashion.jpg")
  .option("detection", "cld-fashion_v2")
  .option("auto_tagging", "0.6").dispatch();
cURL:
Copy to clipboard
curl https://api.cloudinary.com/v1_1/demo/image/upload -X POST --data 'file=winter_fashion.jpg&detection=cld-fashion_v2&auto_tagging=0.6&timestamp=173719931&api_key=436464676&signature=a781d61f86a6f818af'
CLI:
Copy to clipboard
cld uploader upload "winter_fashion.jpg" detection="cld-fashion_v2" auto_tagging=0.6

The response to the upload request returns the detected categories as well as the assigned tags for categories meeting the minimum confidence score of 0.6:

Copy to clipboard
{ 
...    
  "tags": [
    "hat",
    "outerwear"
  ],
...
}

You can also use the update method to apply auto tagging to images already stored in your account.

The following example uses Cloudinary's update method on the puppy image in the account, to detect objects and categories in the LVIS model. Tags are automatically assigned based on the objects and categories detected with over a 90% confidence level.

Ruby:
Copy to clipboard
Cloudinary::Api.update("puppy", 
  :detection => "lvis_v1", 
  :auto_tagging => 0.9)
PHP:
Copy to clipboard
\Cloudinary\Api::update("puppy", [
    "detection" => "lvis_v1", 
    "auto_tagging" => 0.9]);
Python:
Copy to clipboard
cloudinary.api.update("puppy",
  detection = "lvis_v1", 
  auto_tagging = 0.9)
Node.js:
Copy to clipboard
cloudinary.v2.api.update("puppy", 
  { detection: "lvis_v1", 
    auto_tagging: 0.9 },
  function(error, result) {console.log(result, error) });
Java:
Copy to clipboard
cloudinary.api().update("puppy", ObjectUtils.asMap(
  "detection", "lvis_v1", 
  "auto_tagging", 0.9));
.NET:
Copy to clipboard
var updateParams = new UpdateParams("puppy") 
{
  Detection = "lvis_v1",
  AutoTagging = 0.9
};
var updateResult = cloudinary.UpdateResource(updateParams);
CLI:
Copy to clipboard
cld admin update "puppy" detection="lvis_v1" auto_tagging=0.9

You can use the Admin API's resource_by_tag method to return all resources with a certain tag, for example hat:

Ruby:
Copy to clipboard
Cloudinary::Api.resources_by_tag('hat')
PHP (cloudinary_php v2.x):
Copy to clipboard
$api->assetsByTag("hat");
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
$api->resources_by_tag("hat");
Python:
Copy to clipboard
cloudinary.api.resources_by_tag("hat")
Node.js:
Copy to clipboard
cloudinary.v2.api.resources_by_tag("hat", 
  function(error, result) {console.log(result, error); });
Java:
Copy to clipboard
api.resourcesByTag("hat", ObjectUtils.emptyMap());
.NET:
Copy to clipboard
cloudinary.ListResourcesByTag("hat");
cURL:
Copy to clipboard
curl https://<API_KEY>:<API_SECRET>@api.cloudinary.com/v1_1/<cloud_name>/resources/image/tags/hat
CLI:
Copy to clipboard
cld admin resources_by_tag hat

You can also use the Search API or the Media Library advanced search to find images with certain tags.

✔️ Feedback sent!

Rate this page: