DEV Community

Cover image for Cloudinary Unsigned Upload and Face Detection
Alex Patterson for CodingCatDev

Posted on • Originally published at ajonp.com on

Cloudinary Unsigned Upload and Face Detection

Face Smash Demo Project

I am working on an Ionic Studio and Cloudinary demo called Face Smash, that allows you to upload a pic and then get hit by a water balloon.

Using the Cloudinary Upload API users can upload a photo, then using Cloudinary’s Face Detection it will display a list of all uploaded files and their faces (yours should be at the top), when you click this it will smash your face with a water balloon.

What is Ionic Studio

A powerful IDE that delivers a smooth developer experience for teams building with Ionic. Get started with the fastest and easiest way to create award-winning, cross-platform apps, from a single tool.

The reason Ionic Studio is stated perfectly by Ionic’s CEO Max Lynch, in the blog post Announcing Ionic Studio: A Powerful New Way to Build Apps

Check out Ionic Studio today!

What is Cloudinary

In the JAMStack world, Cloudinary is the market leader in providing a comprehensive cloud-based image and video management platform. Cloudinary is being used by hundreds of thousands of users around the world, from small startups to large enterprises. In my opinion it is the best solution around when it comes to hosting media on the web today!

Cloudinary API Upload

Image Upload API

There are several different SDKs available to use for uploading images to Cloudinary, using the Image Upload API. To keep things simple we will just use the endpoint type for unsigned uploads. I just happen to have a picture laying around of myself in the much coveted Ionic Hat

Ionic hat

In this blog example we will just reference this picture using the file parameter

file=https://res.cloudinary.com/ajonp/image/upload/v1565636611/AlexPics/alex_ionic_hat_inside.jpg
Enter fullscreen mode Exit fullscreen mode

Cloudinary will take and automagically make a copy of this file, then add it to a new location on Cloudinaries servers (please note although I am using a cloudinary image url you can use any).

In AJonP’s application we will have the users take a picture, which will also be reference using the file parameter, but it will send the Base64 Encoded string to the endpoint.

Please see the Date Upload Options for everything that is available.

Unsigned uploads

In our example we must also use the upload_preset parameter. This is because we are using an unsigned upload. Unsigned upload is an option for performing upload directly from a browser or mobile application with no authentication signature, and without going through your servers at all. However, for security reasons, not all upload parameters can be specified directly when performing unsigned upload calls.

It is for this reason that I had to create a new upload preset in my Console. Upload Preset

This preset places all of the newly uploaded photos into the folder ajonp-ionic-cloudinary-facesmash folder. preset folder

Now when we need to upload and trigger this preset operation we can our parameter for upload_preset

upload_preset=kuqm4xkg
Enter fullscreen mode Exit fullscreen mode

Endpoint Upload

Now that we know the process in which all of this is going to work, lets complete the actual upload using the endpoint.

https://api.cloudinary.com/v1_1/ajonp/image/upload?file=https://res.cloudinary.com/ajonp/image/upload/v1565636611/AlexPics/alex_ionic_hat_inside.jpg&upload_preset=kuqm4xkg
Enter fullscreen mode Exit fullscreen mode

Once this is uploaded you should see some a returned json payload.

{
  "public_id": "ajonp-ionic-cloudinary-facesmash/raumizdelqrlows7pvzy",
  "version": 1565650174,
  "signature": "59905774f17ea06629ff90b73dfc9bed6c7fbdfd",
  "width": 2448,
  "height": 3264,
  "format": "jpg",
  "resource_type": "image",
  "created_at": "2019-08-12T22:49:34Z",
  "tags": [
    "facesmash",
    "face",
    "head",
    "chin",
    "selfie",
    "forehead",
    "photography",
    "fun"
  ],
  "pages": 1,
  "bytes": 1882858,
  "type": "upload",
  "etag": "4ae8ba0edfb90689101fdfbb8b97548d",
  "placeholder": false,
  "url": "http://res.cloudinary.com/ajonp/image/upload/v1565650174/ajonp-ionic-cloudinary-facesmash/raumizdelqrlows7pvzy.jpg",
  "secure_url": "https://res.cloudinary.com/ajonp/image/upload/v1565650174/ajonp-ionic-cloudinary-facesmash/raumizdelqrlows7pvzy.jpg",
  "access_mode": "public",
  "moderation": [
    {
      "response": { "moderation_labels": [] },
      "status": "approved",
      "kind": "aws_rek",
      "updated_at": "2019-08-12T22:49:36Z"
    }
  ],
  "info": {
    "categorization": {
      "google_tagging": {
        "status": "complete",
        "data": [
          { "tag": "Face", "confidence": 0.9635 },
          { "tag": "Head", "confidence": 0.9097 },
          { "tag": "Chin", "confidence": 0.8504 },
          { "tag": "Selfie", "confidence": 0.8183 },
          { "tag": "Forehead", "confidence": 0.7823 },
          { "tag": "Photography", "confidence": 0.738 },
          { "tag": "Fun", "confidence": 0.7039 },
          { "tag": "Headgear", "confidence": 0.6748 },
          { "tag": "Cap", "confidence": 0.6577 },
          { "tag": "T-shirt", "confidence": 0.5763 },
          { "tag": "Smile", "confidence": 0.5404 }
        ]
      }
    }
  },
  "faces": [[132, 906, 808, 1077]],
  "coordinates": { "faces": [[132, 906, 808, 1077]] },
  "original_filename": "alex_ionic_hat_inside"
}
Enter fullscreen mode Exit fullscreen mode

The key line here is that it actually picked up a face in the coordinates "coordinates": { "faces": [[132, 906, 808, 1077]] },. It is still no 💯% perfect yet. Here is an example that wont work.

Alex Ionic Hat Outside

"coordinates":{"faces":[]}
Enter fullscreen mode Exit fullscreen mode

I hope to work with the Cloudinary Team to see if I can help in any way to improve the detection rates.

How to use Cloudinary face detection

There is a huge array of information covering Cloudinary Face-detection in the documentation.

Very simply pput the g_face parameter will add “gravity” to the position of the largest face in the image, you can then start to do image manipulations as you see fit. In our sample program I intend on adding all the pics as thumbnails.

Here is our sample image as a thumbnail

http://res.cloudinary.com/ajonp/image/upload/w_1000,h_1000,c_crop,g_face,r_max/w_200/v1565650174/ajonp-ionic-cloudinary-facesmash/raumizdelqrlows7pvzy.jpg
Enter fullscreen mode Exit fullscreen mode

Cropped Sample Thumbnail

Understandable Sidenote

I can’t help but think of Facemash from the Social Network, and don’t want their to be confusion, this is a very fun project and we won’t be rating anyone 🤢!! I am hoping that the Amazon Rekognition AI Moderation will catch most the bad stuff. If it gets out of hand I am going to take it down.

So I just want everyone to remain calm, this app won’t be degrading anyone! I don’t ever want to degrade anyone and write a facemash apology like Zuck, so we will be using photos that you can upload yourself.

Discussion (0)