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
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
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. 
This preset places all of the newly uploaded photos into the folder ajonp-ionic-cloudinary-facesmash folder. 
Now when we need to upload and trigger this preset operation we can our parameter for upload_preset
upload_preset=kuqm4xkg
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
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"
}
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.
"coordinates":{"faces":[]}
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
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.
Top comments (0)