{"id":28413,"date":"2022-05-04T07:02:28","date_gmt":"2022-05-04T07:02:28","guid":{"rendered":"http:\/\/auto-tag-and-categorize-images-using-cloudinary"},"modified":"2025-02-25T16:17:44","modified_gmt":"2025-02-26T00:17:44","slug":"auto-tag-and-categorize-images-using-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/auto-tag-and-categorize-images-using-cloudinary\/","title":{"rendered":"Auto-Tag and Categorize Images Using Cloudinary"},"content":{"rendered":"

An ever-increasing amount of visual data is created and stored due to the rapid evolution of digital technology. Therefore, there is an urgent need for an effective and efficient tool or mechanism for categorizing and finding visual information on demand. Image tagging<\/a> is adding text tags to an image based on what is in the image.<\/p>\n

Although images can be annotated manually by humans, this approach can be too subjective and even impractical when there are a large number of images. However, a better approach is image auto-tagging, a time-saving and cost-effective process by which tags in the form of keywords are automatically assigned to digital images and are used to organize and retrieve images of interest from a collection or database. Images that have been auto-tagged can be retrieved using those tags or labels.<\/p>\n

Cloudinary<\/a> offers a Google auto-tagging add-on<\/a> fully integrated into its image management and transformation system and allows detecting, automatically categorizing, and assigning multiple tags to images based on the categories in each image.<\/p>\n

In this article, we\u2019ll go through how to use Cloudinary to generate tags for images automatically, fetch the generated image tags, and access image resources based on a specified tag.<\/p>\n

Here is a link<\/a> to the demo CodeSandbox.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Setting Up the Project<\/h2>\n

Create a new Next.js application using the following command:<\/p>\n

npx create-next-app cloudinary-image-autotag\n<\/code><\/span><\/pre>\n
Next, let\u2019s add the project dependencies using the following command:<\/p>\n
npm install cloudinary axios dotenv\n<\/code><\/span><\/pre>\n
Now we can start our application on http:\/\/localhost:3000\/<\/a> using the following command:<\/p>\n
npm start\n<\/code><\/span><\/pre>\n
Setting up Cloudinary<\/h2>\n
First, sign up for a free Cloudinary account<\/a> if you don\u2019t have one already. Displayed on your account\u2019s Management Console (aka Dashboard) are important details: your cloud name, API key, etc.<\/p>\n
Next, let\u2019s create environment variables to hold the details of our Cloudinary account. Create a new file called .env<\/code> at the root of your project and add the following to it:<\/p>\n
CLOUD_NAME = YOUR CLOUD NAME HERE\nAPI_KEY = YOUR API API KEY\nAPI_SECRET = YOUR API API SECRET\n<\/code><\/span><\/pre>\n
This will be used as a default when the project is set up on another system. To update your local environment, create a copy of the .env<\/code> file using the following command:<\/p>\n
cp<\/span> .env<\/span> .env<\/span>.local<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
By default, this local file resides in the .gitignore<\/code> folder, mitigating the security risk of inadvertently exposing secret credentials to the public. You can update the .env.local<\/code> file with your Cloudinary credentials.<\/p>\n
Before using the Google Auto Tagging add-on, we need to register for the add-on. Go through these steps to register for the add-on:<\/p>\n