---
title: Drawing
---

<span title="Label: Pro" data-view-component="true" class="Label Label--api text-uppercase">
  Unstable API
</span>
<span title="Label: Pro" data-view-component="true" class="Label Label--version text-uppercase">
  0.10.0
</span>
<span title="Label: Pro" data-view-component="true" class="Label Label--package">
  <a target="_blank" href="https://www.npmjs.com/package/@project-lakechain/image-layer-processor">
    @project-lakechain/image-layer-processor
  </a>
</span>
<span class="language-icon">
  <svg role="img" viewBox="0 0 24 24" width="30" xmlns="http://www.w3.org/2000/svg" style="fill: #3178C6;"><title>TypeScript</title><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"/></svg>
</span>
<div style="margin-top: 26px"></div>

---

The image layer processor middleware provides the capability to draw layers on top of images. It makes it possible to use images semantic metadata generated by upstream middlewares to draw bounding boxes, blur areas such as text or objects, etc.

---

### 🖊️ Highlight Areas

In the below example, we are coupling the [Rekognition Image Processor](/project-lakechain/image-processing/rekognition-image-processor) middleware with the image layer processor to draw bounding boxes around detected faces in an image.

> 💁 The image layer processor uses the information provided by the Rekognition image processor to determine around which area to draw the bounding boxes.

```typescript
import { RekognitionImageProcessor, dsl as r } from '@project-lakechain/rekognition-image-processor';
import { ImageLayerProcessor, dsl as l } from '@project-lakechain/image-layer-processor';
import { CacheStorage } from '@project-lakechain/core';

class Stack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string) {
    const cache = new CacheStorage(this, 'Cache');

    // Create the Rekognition image processor.
    const rekognitionProcessor = new RekognitionImageProcessor.Builder()
      .withScope(this)
      .withIdentifier('ImageProcessor')
      .withCacheStorage(cache)
      .withSource(source)
      .withIntent(
        r.detect().faces(r.confidence(80)) // 👈 Face detection
      )
      .build();

    // Create the image layer processor.
    const layerProcessor = new ImageLayerProcessor.Builder()
      .withScope(this)
      .withIdentifier('LayerProcessor')
      .withCacheStorage(cache)
      .withSource(rekognitionProcessor)
      .withLayers(
        l.highlight(l.faces()) // 👈 Highlight faces
      )
      .build();
  }
}
```

<br>

---

#### Examples

<br>

| Face Highlighting  | Object Highlighting  |
| ------------------ | -------------------  |
| ![Face Highlighting](../../../assets/bounding-box-face-example.jpeg) | ![Object Highlighting](../../../assets/bounding-box-object-example.jpeg) |

<br>

---

#### Operations

Below is a list of subjects that the `highlight` operation supports and that follow the same logic as in the previous example. These subjects are used to highlight different areas of the image, and expect upstream middlewares to provide the necessary semantic metadata to do so.

| Subject | Description |
| ------- | ----------- |
| `faces` | Highlight faces on the image. |
| `objects` | Highlight objects on the image. |
| `text` | Highlight text on the image. |
| `landmarks` | Highlight face landmarks on the image. |

<br>

---

### 👾 Pixelate

Another drawing operation supported by this middleware is its ability to pixelate areas of images based on semantic metadata provided by upstream middlewares.

> 💁 In the below example, we are blurring the faces detected from images.

```typescript
import { RekognitionImageProcessor, dsl as r } from '@project-lakechain/rekognition-image-processor';
import { ImageLayerProcessor, dsl as l } from '@project-lakechain/image-layer-processor';
import { CacheStorage } from '@project-lakechain/core';

class Stack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string) {
    const cache = new CacheStorage(this, 'Cache');

    // Create the Rekognition image processor.
    const rekognitionProcessor = new RekognitionImageProcessor.Builder()
      .withScope(this)
      .withIdentifier('ImageProcessor')
      .withCacheStorage(cache)
      .withSource(source)
      .withIntent(
        r.detect().faces(r.confidence(80)) // 👈 Face detection
      )
      .build();

    // Create the image layer processor.
    const layerProcessor = new ImageLayerProcessor.Builder()
      .withScope(this)
      .withIdentifier('LayerProcessor')
      .withCacheStorage(cache)
      .withSource(rekognitionProcessor)
      .withLayers(
        l.pixelate(l.faces()) // 👈 Pixelate faces
      )
      .build();
  }
}
```

<br>

---

#### Examples

<br>

| Face pixelation    | Object pixelation   |
| ------------------ | ------------------- |
| ![Face pixelation](../../../assets/pixelation-face-example.jpeg) | ![Object pixelation](../../../assets/pixelation-object-example.jpeg) |

<br>

---

#### Operations

Below is a list of subjects that the `pixelate` operation supports and that follow the same logic as in the previous example.

| Subject | Description |
| ------- | ----------- |
| `faces` | Pixelate faces on the image. |
| `objects` | Pixelate objects on the image. |
| `text` | Pixelate text on the image. |

<br>

---

### 🏗️ Architecture

This middleware runs within a Lambda compute, and packages different libraries as a Docker image to draw semantic metadata on top of images.

![Image Layer Processor Architecture](../../../assets/image-layer-processor-architecture.png)

<br>

---

### 🏷️ Properties

<br>

##### Supported Inputs

|  Mime Type  | Description |
| ----------- | ----------- |
| `image/jpeg` | This middleware supports JPEG images as input. |
| `image/png` | This middleware supports PNG images as input. |
| `image/tiff` | This middleware supports TIFF images as input. |
| `image/webp` | This middleware supports WebP images as input. |

##### Supported Outputs

|  Mime Type  | Description |
| ----------- | ----------- |
| `image/jpeg` | This middleware supports JPEG images as output. |
| `image/png` | This middleware supports PNG images as output. |
| `image/tiff` | This middleware supports TIFF images as output. |
| `image/webp` | This middleware supports WebP images as output. |

##### Supported Compute Types

| Type  | Description |
| ----- | ----------- |
| `CPU` | This middleware only supports CPU compute. |

<br>

---

### 📖 Examples

- [Face Detection Pipeline](https://github.com/awslabs/project-lakechain/tree/main/examples/simple-pipelines/image-processing-pipelines/face-detection-pipeline) - An example showcasing how to build face detection pipelines using Project Lakechain.
