Learn serverless computing with a mustache filter app for images

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.

Example real-time image with mustache filter applied

Learning objectives

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.

Prerequisites

Before you begin the tutorial, make sure you have the following software installed on your machine:

Estimated time

This tutorial takes about 20 minutes to complete if you already have an IBM cloud account set up.

Steps

First you set up the Cloud Functions service on IBM Cloud. Then you set up the client application.

Create an IBM Cloud account and set up the Cloud Functions service

  1. 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.

  2. 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:

     import sys
     import random
    
     def main(dict):
    
     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)
     print(mus_urls[index])
    
     return {'url':mus_urls[index]}
    

    The previous code sample contains an array of mustache image URLs. In the app, a random item is returned in JSON format.

  3. Go to Endpoints and click enable web action. Make sure to copy the HTTPS URL because you use it later it in the application.

Cloud Functions screen capture

Set up the client application

Now you set up the main mustache filter application.

  1. 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.

  2. 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:

    Serverless computing architecture flow diagram

  3. Run the code and you see that you have your very own mustache filter application up and running on your machine.

Summary

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.

Anchal Bhalla