Tutorial: creating FindKeanu app using new Amplify Predictions and Angular

Is this a fake selfie? Hold my beer. Image by vertecchi*.

Introduction to Amplify

Introduction to Predictions

Predictions is based in highly scalable, deep learning technology and requires no machine learning expertise to use.

AWS services provided by Predictions

Introduction to Amazon Rekognition

  • Detecting objects and scenes
  • Detecting and analysing faces including custom-collections
  • People path tracking in videos
  • Detecting celebrities
  • Detecting inappropriate content
  • Detecting text

Setting up a new project with the Angular CLI

npm install -g @angular/cli
ng new amplify-app
cd amplify-app
npm install
ng serve

Changes to Angular CLI project

{
"compilerOptions": {
"types": ["node"]
},
}
(window as any).global = window;(window as any).process = {
env: { DEBUG: undefined }
};

Installing the AWS Amplify dependencies

npm install --save aws-amplify 
npm install --save @aws-amplify/auth @aws-amplify/predictions

Installing the Amplify CLI

npm install -g @aws-amplify/cli
amplify configure
  • Specify the AWS Region: pick-your-region
  • Specify the username of the new IAM user: amplify-app
  • Enter the access key of the newly created user:
    accessKeyId: YOUR_ACCESS_KEY_ID
    secretAccessKey: YOUR_SECRET_ACCESS_KEY
  • Profile Name: default

Setting up your Amplify environment

amplify init
  • Enter a name for the project: amplify-app
  • Enter a name for the environment: dev
  • Choose your default editor: Visual Studio Code
  • Please choose the type of app that you’re building javascript
  • What javascript framework are you using angular
  • Source Directory Path: src
  • Distribution Directory Path: dist/amplify-app
  • Build Command: npm run-script build
  • Start Command: ng serve
  • Do you want to use an AWS profile? Yes
  • Please choose the profile you want to use default
<amplify-app>
|_ amplify
|_ .config
|_ #current-cloud-backend
|_ backend
team-provider-info.json

Adding Predictions to identify celebrities

amplify add predictions
  • Please select from one of the categories below (Use arrow keys): Identify
  • You need to add auth (Amazon Cognito) to your project in order to add storage for user files. Do you want to add auth now? Yes
  • Do you want to use the default authentication and security configuration? Default configuration
  • How do you want users to be able to sign in? Username
  • Do you want to configure advanced settings? No, I am done
  • What would you like to identify? Identify Entities
  • Provide a friendly name for your resource: (identifyEntities0212d2f3) <Enter>
  • Would you like use the default configuration? Default Configuration
  • Who should have access? Auth and Guest users

Pushing changes to the cloud

amplify push

Configuring the Angular application

import Auth from '@aws-amplify/auth';
import Predictions, { AmazonAIPredictionsProvider, InterpretTextCategories } from '@aws-amplify/predictions';
import amplify from './aws-exports';
Auth.configure(amplify);
Predictions.configure(amplify);
Predictions.addPluggable(new AmazonAIPredictionsProvider());

Adding Styling

npm i --save @aws-amplify/ui
@import "~@aws-amplify/ui/src/Theme.css";
@import "~@aws-amplify/ui/src/Angular.css";

Creating FindKeanu UI

Selecting the image file to analyse

<input type="file" (change)="findKeanu($event)" accept="image/*" />
findKeanu(event) {
const { target: { files } } = event;
const file = files[0];
}
Predictions.identify({
entities: {
source: { file },
celebrityDetection: true
}
}).then(response)
  • Bounding box — The coordinates of the bounding box that surrounds the face. Properties: top, left, width and height.
  • Facial landmarks — An array of facial landmarks. For each landmark, eyes, nose and mouth, the response provides their coordinates. Properties: type, x and y.
Bounding box and type values: eyeLeft, eyeRight, nose, mouthLeft, mouthRight. 3D model by Caleb_Rolph*.
  • Metadata — Additional information. This provides a unique identifier, a display name, a list of links, if available, and a pose. Properties: id, name, urls and pose.

Using coordinates

Understanding face pose values

Top to bottom: pitch, roll and yaw axis movement. 3D model by Caleb_Rolph*.

Finding Keanu in the results

Predictions.identify(config).then(result => {
this.celebrities = [];
let keanuFound = result.entities.filter((entity) => {
const {metadata: {id} = { } } = entity;
if (id) {
this.celebrities.push(entity);
}
return id == "32wO2f3"; // Keanu Reeves
})

Bonus feature: identify other celebrities

<div *ngIf="celebrities.length>0">
<div *ngFor="let e of celebrities">
<a href="http://{{e.metadata.urls[0]}}" target="_blank">
{{e.metadata.name || 'Not found'}}
</a>
</div>
</div>
Is not all lost if Keanu is not in there. Give it a try!

Understanding results and improving accuracy

  • Massive catalog — Prediction APIs can operate with up to 20 million indexed facial feature vectors.
  • Intended usage — This API is designed to filter massive volumes of images/videos and identify a small set that is likely to contain a celebrity. Eg: press release image and video catalogs. For critical use cases, adding a human verification step would be required.
  • Image size and overall quality — The larger the better. To be detected, a face must be larger than 40x40 pixels for a 1920x1080 image or same proportion if larger.
  • Face size and pose — Frontal pictures perform better. Minimum face size is 80x80.
Predictions.identify({
entities: {
source: { file },
collection: true
}
}).then(response)

Ready to code?

Free tier for a new AWS Account. For latest pricing check here

Thanks for reading!

--

--

--

Helping Devs to succeed #AI #web3 / ex @AWSCloud / Just be AWSome / MC Speaker Trainer Community Leader @web3_london / @ReactEurope @ReactiveConf @ngcruise

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Pattern Matching in Ruby 2.7.0

Omni-Channel Retail and Customer 360 with Apache Kafka

Understanding Camera2 API from callbacks (Part 1)

Beautify Flask Web App using CSS, HTML

Is Headless Shopify More Expensive?

『TW電影』鬼滅之刃劇場版 無限列車篇線上看小鴨完整版【Kimetsu no Yaiba: Mugen Ressha-Hen】

Difference Between Automated and Manual Software Testing

manual and automated software testing

Azure Cost Optimization

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gerard Sans

Gerard Sans

Helping Devs to succeed #AI #web3 / ex @AWSCloud / Just be AWSome / MC Speaker Trainer Community Leader @web3_london / @ReactEurope @ReactiveConf @ngcruise

More from Medium

JavaScript Frameworks

HOW TO IMPLEMENT ANIMATE ON SCROLL IN ANGULAR WEB APPS — USING THE AOS LIBRARY

Which JS Framework Your Project Requires: Angular vs. React 2022

Creating AutoComplete/ AutoSuggestor in vanilla Javascript