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

Images used for facial recognition are never stored. Only face metadata, aka facial feature vectors, are stored by Amazon Rekognition.

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

Setting up your Amplify environment

amplify init
<amplify-app>
|_ amplify
|_ .config
|_ #current-cloud-backend
|_ backend
team-provider-info.json

Adding Predictions to identify celebrities

amplify add predictions
amplify push
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());
npm i --save @aws-amplify/ui
@import "~@aws-amplify/ui/src/Theme.css";
@import "~@aws-amplify/ui/src/Angular.css";

Creating FindKeanu UI

<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 and type values: eyeLeft, eyeRight, nose, mouthLeft, mouthRight. 3D model by Caleb_Rolph*.

Note coordinates can sometimes return values, below 0 or over 1, as faces or landmarks can slightly fall outside the image limits near the edges.

Note left and right are taken from the observers perspective, not the subjects, in the picture or video.

Top to bottom: pitch, roll and yaw axis movement. 3D model by Caleb_Rolph*.
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

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!

My Name is Gerard Sans. I am a Developer Advocate at AWS working with AWS Amplify and AWS AppSync teams.

Node is an open source, cross-platform JavaScript run-time environment

Angular is an open source project from Google

--

--

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