Last updated: October 15, 2024

<span aria-hidden="true" id="smart-cdn-enhanced-with-ai-powered-face-detection"></span>

# Smart CDN enhanced with AI-powered face detection

![Charlie Macnamara](/assets/images/teammates/charlie.jpg?dpl=dpl_5eQDcFwLGbzg3PfkSEW2a2j2x5pY)

**Charlie Macnamara**

Technical Writer & Support Engineer · Scotland · Show bio

Our Smart CDN is one of the most exciting features we have released in the past few years. It helps our users receive the fastest request times we can offer, and despite it being in beta, it's making great strides every day. Today, we are excited to announce that we have updated the list of compatible Robots to now include our AI-powered[/image/facedetect](/docs/robots/image-facedetect.md) Robot!

![/image/facedetect Robot](/_next/static/immutable/media/opengraph-image.3dg02i4gj6o23.png)

Recently, we swapped our previously used API to AWS's AI service, improving our face detectionRobot, and helping to speed up transcoding when importing files from an S3 bucket. This means our [/image/facedetect](/docs/robots/image-facedetect.md) Robot is now right at home with our Smart CDN.

Stay tuned for a quick overview of how you can make use of this new update.

<span aria-hidden="true" id="setup"></span>

## Setup

Before we get started with an example, we need to have some form of cloud storage in place that contains an image of some faces and a Template. Since our API runs on AWS, we recommend storing your files in an S3 bucket to allow for the lowest latency. If you have a different preference, you can instead opt for one of our other [importing Robots](/services/file-importing.md).

Let's get started with creating our Template. Please be sure to take a note of yourTemplate ID, as we need to use that later in this demonstration.

```json
{
  "steps": {
    "imported": {
      "robot": "/s3/import",
      "result": true,
      "credentials": "YOUR_S3_CREDENTIALS",
      "path": "upload/${fields.input}"
    },
    "facedetect": {
      "robot": "/image/facedetect",
      "use": "imported",
      "crop": true,
      "faces": "${fields.type}",
      "format": "preserve",
      "crop_padding": "10%",
      "result": true
    },
    "served": {
      "use": "facedetect",
      "robot": "/file/serve"
    }
  }
}

```

As mentioned above, we make use of S3 in our Template for importing our file. The critical thing to look at in the first Step, "imported", is the `path` parameter. Its value specifies that we want to target a specific folder. An Assembly Variable is then set up to determine which file we wish to call in our URL transformation.

The imported image is now passed to the `facedetect` Step, where our AI-powered[/image/facedetect](/docs/robots/image-facedetect.md) Robot handles the face detection. Again, this Step uses Assembly Variables to interface with the`faces` parameter when the URL we created is called. If you would like a more in-depth explanation about this parameter, you can find it in our previous[/image/facedetect blog](/blog/2019/10/facedetect-faces-blog.md).

Closing off our Template, we use the [/file/serve](/docs/robots/file-serve.md) Robot to deliver our Assembly result.

<span aria-hidden="true" id="signature-authentication"></span>

## Signature Authentication

I'd also like to take a quick moment here to show just how easy it is to add[Signature Authentication](/docs/api/authentication.md#smart-cdn) to our URL transformation method.

It isn't necessary to set up Signature Authentication, but we do recommend it as a best practice. It automatically protects you against DDoS attacks, makes URLs expire after generating them, and helps avoid abuse. On top of that, it probably only takes a few extra minutes to implement into your back-end.

If you'd like to see how to use our Smart CDN without Signature Authentication, you can do so on the [content delivery page](/services/content-delivery.md) on our website.

<span aria-hidden="true" id="code"></span>

## Code

We've written the Signature Authentication in Node.js for this example. If you prefer to use another language in your back-end, you can see some examples[here](/docs/api/authentication.md#smart-cdn).

```javascript
const crypto = require('crypto')

const secret = 'YOUR-AUTH-SECRET'
const expires = +new Date() + 60 * 60 * 1000
const stringToSign = `YOUR-APP-NAME/YOUR-TEMPLATE-NAME/faces.jpg?&exp=${expires}&type=max-confidence`
const signature = crypto
  .createHmac('sha256', secret)
  .update(Buffer.from(stringToSign, 'utf-8'))
  .digest('hex')
const url = `https://YOUR-APP-NAME.tlcdn.com/${stringToSign}&sig=sha256:${signature}`

console.log(url)

```

The program above uses the crypto module to generate an encrypted string using your TransloaditAuth Secret and the current date that will be passed into your generated URL.

Next to the `stringToSign` variable, you will have to replace `YOUR-TEMPLATE-NAME` with the name of your own Template. Directly after that, you can specify the name of your image. In my case, the example file is called `faces.jpg`. Next, we use a wildcard with the `type` field attribute we created earlier in our Template to specify we wish to use the`max-confidence` parameter value. The `type` field comes after `exp` because the parameters most be sorted for the signature calculation.

Moving on, you need to alter the `url` variable to contain your Transloadit App name. With that all in place, running your Node.js app will generate a result URL!

<span aria-hidden="true" id="result"></span>

## Result

With our URL generated, all we need to do is visit the new URL for our encoding to take place. Visiting this URL in a browser will automatically cause the encoded result to pop up once the process is complete. If you like, you could just as easily save the Assembly result directly to your machine using the command below. Make sure to replace `url` with the value that was outputted to your console.

```bash
curl -fsSLo /your/choosen/path/file_name.jpg ${url}

```

That concludes a quick look at the recent update to our Smart CDN. We're excited to see the creative ways in which you'll be able to incorporate this new feature into your projects, and we would love to hear about it on [Twitter⁠](https://twitter.com/transloadit)!

[#image-facedetect-robot](/blog/tags/image-facedetect-robot.md)[#smart-cdn](/blog/tags/smart-cdn.md)[#file-serve-robot](/blog/tags/file-serve-robot.md)

### 👩‍💻 Join 20k+ developers

Sign up for our [monthly newsletter](/newsletters.md) to receive direct links to 3 exclusive tech — and 2 product updates. No less, no more.

Your email:

Get access

## File uploading and encoding. Made simple.

Transloadit streamlines file handling for developers, trusted by brands like Coursera and The New York Times. We’re known for a reliable API, top-notch support, and a strong commitment to open source, with projects like [Uppy⁠](https://uppy.io) and [Tus⁠](https://tus.io) setting standards in file processing.

[Sign up](/c/)[Book a Demo](https://survey.typeform.com/to/kRg47Xi5)

No credit card needed

Cancel anytime
