File
Implements
Methods
|
Async
faceIdentify
|
faceIdentify(group_id: string)
|
|
|
Takes in a group_id and a list of faceIds and returns the personId of the person that
best matches the faceIds.
Parameters :
| Name |
Type |
Optional |
Description |
| group_id |
string
|
No
|
- the group_id of the person to search for
|
|
|
getPreview
|
getPreview(file: File)
|
|
|
Takes in a file and returns the URL of the file.
Parameters :
| Name |
Type |
Optional |
Description |
| file |
File
|
No
|
- the file to get the URL of.
|
|
|
Async
handleFileInput
|
handleFileInput(event, group_id: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
|
No
|
| group_id |
string
|
No
|
|
|
faceIds
|
Type : string[]
|
Default value : []
|
|
|
|
uploadedFiles
|
Type : []
|
Default value : []
|
|
|
import { Component, OnInit } from '@angular/core';
import { AzureFaceApiDataService } from '../services/azure-face-api-data.service';
@Component({
selector: 'app-identify',
templateUrl: './identify.component.html',
styleUrls: ['./identify.component.scss']
})
export class IdentifyComponent implements OnInit {
//variables using during the comparison between faceIds and Person Id
uploadedFiles = [];
faceIds: string[] = [];
url: any;
matchName: string;
matchId: string;
matchData: string;
constructor(private data: AzureFaceApiDataService) { }
ngOnInit(): void {
}
//Handling the face Identification
async handleFileInput(event, group_id: string) {
this.uploadedFiles = event.target.files;
this.getPreview(this.uploadedFiles[0]);//checking the uploading of the image
/**
* Gets the face IDs of the uploaded image.
* @returns None
*/
const getIDs = await this.data// Await keyword shall freeze the system until we get the faceId which is coming from the API
.detectFace_File(this.uploadedFiles[0])
.toPromise()
.then(
(data) => {
const ressource = data[0];
this.faceIds[0] = ressource['faceId'];
},
(error) => console.log(error)
);
/**
* Identify the faces in the given image.
* @param {string} group_id - the group id of the faces to identify
* @returns None
*/
this.faceIdentify(group_id);
}
/**
* Takes in a group_id and a list of faceIds and returns the personId of the person that
* best matches the faceIds.
* @param {string} group_id - the group_id of the person to search for
* @param {string[]} faceIds - the list of faceIds to search for
* @returns None
*/
async faceIdentify(group_id: string) {
const getID = await this.data
.faceIdentify(group_id, this.faceIds)
.toPromise()
.then((data) => (this.matchId = data.body[0].candidates[0].personId));
const getName = await this.data
.getPersonFromPersonGroup(group_id, this.matchId)
.toPromise()//colllect that person which belongs to this group_id and match_id
.then((data) => {
this.matchName = data.body['name'];
this.matchData = data.body['userData'];
});
}
/**
* Takes in a file and returns the URL of the file.
* @param {File} file - the file to get the URL of.
* @returns None
*/
getPreview(file: File) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
this.url = (event.target as FileReader).result;
};
}
}
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<div class="container">
<div class="only-logo">
<div *ngIf="url; else elseBlock1">
<div class="wrapper">
<img id="pic" [src]="url" height="400" width="400" /><br />
</div>
</div>
<ng-template #elseBlock1>
<!--We added the path to file -->
<img
src="http://placehold.jp/262626/ffffff/400x400.png?text=Upload%20an%20image%20to%20Test%20Model%20Training&css=%7B%22border-radius%22%3A%2215px%22%7D"
alt="Upload Files"
height="400"
width="400"
/>
</ng-template>
</div>
<!--Group Id -->
<mdb-form-control class="col-2 mx-auto">
<input mdbInput type="text" id="form1" class="form-control" #groupID />
<label mdbLabel class="form-label" for="form1">PersonGroup ID</label>
</mdb-form-control>
<!--Designing the Upload a file button -->
<div class="upload-btn-wrapper">
<a
class="btn-grad btn-primary col-2 mx-auto"
role="button"
(click)="uploader.click()"
>
Upload Image
<input
type="file"
accept="image/*"
#uploader
(change)="handleFileInput($event, groupID.value)"
multiple
/>
</a>
</div>
<!--Printing the name in case of successful match -->
<div class="result col-4 mx-auto" *ngIf="matchName">
<p class="note note-success text-start font-monospace text-wrap">
<strong>Identified Name:</strong> {{ matchName }}
</p>
<br />
<p class="note note-success text-start font-monospace text-wrap">
<strong>User Data:</strong> {{ matchData }}
</p>
</div>
</div>
@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
img {
border-radius: 15px;
padding: 1px;
}
/*Here we are again creating all the classes and will going to use in HTML file*/
.container {
padding-top: 20px;
}
.only-logo {
padding-bottom: 3em;
}
.wrapper {
position: relative;
}
.upload-btn-wrapper {
margin-top: 5px;
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.result {
padding-top: 1em;
padding-bottom: 50px;
align-self: start;
}
.btn-grad {
background-image: linear-gradient(to right, #ff76b4 0%, #66f1ff 51%, #ff76b4 100%)
}
.btn-grad {
margin: 10px;
padding: 15px 20px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: #262626;
box-shadow: 0 0 20px #ffffff;
border-radius: 10px;
display: block;
}
.btn-grad:hover {
background-position: right center;
/* change the direction of the change here */
color: #fff;
text-decoration: none;
}
Legend
Html element with directive