By Anchal Bhalla | Published January 21, 2019
Have you ever wondered how the filters on Snapchat work? This tutorial shows you how to create a mustache filter app that is built as a serverless application running on the cloud. You can learn more about serverless computing at See the simplicity of serverless.
This tutorial shows how to build an app that fetches random mustache URLs from the serverless cloud function service and uses facial detection to overlay the images on real-time images of a user’s face.
Complete this tutorial to understand how to build a serverless application running on the cloud that gets image filters uses facial detection to apply to mobile device images in real time.
Before you begin the tutorial, make sure you have the following software installed on your machine:
This tutorial takes about 20 minutes to complete if you already have an IBM cloud account set up.
First you set up the Cloud Functions service on IBM Cloud. Then you set up the client application.
Log in to IBM Cloud and go to the catalog. Search for Functions. Select the page for Cloud Functions and click Start Creating. Cloud Functions is a function as a service (FaaS) that runs functions in response to events, so developers do not need to worry about the underlying infrastructure.
Create an action. An action contains the function code, and you can invoke the action using REST API calls or a HTTPS event. Give a name to the action and select Python 3 as the runtime environment. Copy paste the following Python code:
mus_urls = ['https://sublimerobots.com/wp-content/uploads/2014/12/mustache.png', 'https://i.pinimg.com/originals /67/2e/0f/672e0f6f71ebe08a5029a89e85df1e18.png', 'https://images.vexels.com/media/users/3/130978/isolated/lists/f932a333154f1d6bff554c1010466f00-hipster-mustache-5.png', 'https://www.papilbo.com/2743-large_default/basic-classi-con-fiocco-blu.jpg', 'https://www.660citynews.com/wp-content/blogs.dir/sites/8/2016/11/01/moustache.png' ]
index = random.randint(0, len(mus_urls)-1)
The previous code sample contains an array of mustache image URLs. In the app, a random item is returned in JSON format.
Go to Endpoints and click enable web action. Make sure to copy the HTTPS URL because you use it later it in the application.
Now you set up the main mustache filter application.
Go to the /anchalbhalla/mustache-filter Github repository and download the serverless-detection.py and the Haar Cascade files. For more information, see the Face Detection using Haar Cascades documentation. Haar Cascade files are basically a classifier that you use to detect the object from the source. In this example app, you are detecting the face and nose so you can correctly position and scale the superimposed mustache.
Next, open the serverless-detection.py file and edit it to include the HTTPS URL to send requests to the cloud function that you created. The application simply sends a request to the cloud function to retrieve the image URL in JSON format, which is further parsed and converted to image form and stored locally. The app overlays the mustache image on the face image, after facial detection and resizing. The following architecture flow diagram explains the process:
Run the code and you see that you have your very own mustache filter application up and running on your machine.
This tutorial introduced serverless functions by showing how to build a fun serverless mustache filter app. You started by creating a function on the IBM Cloud platform. Then you built the application on the client side and made a call to the function.
Ready to try it yourself with your own app? You can start at Cloud Functions.
February 22, 2019
February 13, 2019
Back to top