src/app/components/train/train.component.ts
| selector | app-train |
| styleUrls | ./train.component.scss |
| templateUrl | ./train.component.html |
Properties |
Methods |
constructor(data: AzureFaceApiDataService)
|
||||||
|
Parameters :
|
| addImage | ||||||||||||||||
addImage(group_id: string, image: File, personID: string)
|
||||||||||||||||
|
Adds an image assosiated to the person in the PersonGroup in the API.
Parameters :
Returns :
void
None |
| createGroup | ||||||||||||||||
createGroup(id: string, name: string, data: string)
|
||||||||||||||||
|
Creates a new PersonGroup in the API.
Parameters :
Returns :
void
None |
| createPerson | ||||||||||||||||
createPerson(group_id: string, name: string, data: string)
|
||||||||||||||||
|
Creates a new person in the API.
Parameters :
Returns :
void
None |
| getPersonFromPersonGroup | ||||||||||||
getPersonFromPersonGroup(groupID: string, personID: string)
|
||||||||||||
|
Gets a person from the API given the group ID and person ID.
Parameters :
Returns :
void
None |
| handleFileInput | ||||||
handleFileInput(event)
|
||||||
|
Handles the file input event.
Parameters :
Returns :
void
None |
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| trainPersonGroup | ||||||||
trainPersonGroup(group_id: string)
|
||||||||
|
Trains the group with the given id.
Parameters :
Returns :
void
None |
| add_image_response |
Type : any
|
| create_group_response |
Type : any
|
|
main variables to handle user inputs |
| create_person_response |
Type : any
|
| get_person_response |
Type : any
|
| person_image |
Type : any
|
Default value : null
|
| train_response |
Type : any
|
import { Component, OnInit } from '@angular/core';
import { AzureFaceApiDataService } from '../services/azure-face-api-data.service';
import { observable } from 'rxjs';
@Component({
selector: 'app-train',
templateUrl: './train.component.html',
styleUrls: ['./train.component.scss']
})
export class TrainComponent implements OnInit {
/**
* main variables to handle user inputs
*/
create_group_response: any;
create_person_response: any;
add_image_response: any;
get_person_response: any;
train_response: any;
person_image: any = null;
constructor(private data: AzureFaceApiDataService) { }
ngOnInit() {
}
/**
* Handles the file input event.
* @param {Event} event - the file input event.
* @returns None
*/
handleFileInput(event) {
this.person_image = event.target.files[0];
}
/**
* Creates a new PersonGroup in the API.
* @param {string} id - The id of the group.
* @param {string} name - The name of the group.
* @param {string} data - The data of the group.
* @returns None
*/
createGroup(id: string, name: string, data: string) {
this.data.createPersonGroup(id, name, data).subscribe(res => { this.create_group_response = res.status }, error => console.log(error));
}
/**
* Creates a new person in the API.
* @param {string} group_id - the group id of the group to create the person in.
* @param {string} name - the name of the person to create.
* @param {string} data - the data of the person to create.
* @returns None
*/
createPerson(group_id: string, name: string, data: string) {
this.data.createPerson(group_id, name, data).subscribe(res => { this.create_person_response = res.body }, error => console.log(error));
}
/**
* Adds an image assosiated to the person in the PersonGroup in the API.
* @param {string} group_id - the group id of the group to add the image to.
* @param {File} image - the image to add.
* @param {string} personID - the id of the person to add the image to.
* @returns None
*/
addImage(group_id: string, image: File, personID: string) {
this.data.addPersonImageToPersonGroup(group_id, image, personID).subscribe(res => { this.add_image_response = res.body }, error => console.log(error));
}
/**
* Gets a person from the API given the group ID and person ID.
* @param {string} groupID - the group ID of the person to get
* @param {string} personID - the ID of the person to get
* @returns None
*/
getPersonFromPersonGroup(groupID: string, personID: string) {
this.data.getPersonFromPersonGroup(groupID, personID).subscribe(res => { this.get_person_response = res.body }, error => console.log(error));
}
/**
* Trains the group with the given id.
* @param {string} group_id - the id of the group to train
* @returns None
*/
trainPersonGroup(group_id: string) {
this.data.trainPersonGroup(group_id).subscribe(res => { this.train_response = res.status, console.log(res) }, error => console.log(error));
}
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center">
<div class="col-12">
<div class="card bg-dark shadow-2-strong">
<div class="card-body">
<div class="table-responsive">
<table class="table table-dark table-borderless mb-0">
<thead>
<tr>
<th class="text-center lead" scope="col">Actions</th>
<th class="text-center lead col-4" scope="col">Parameters</th>
<th class="text-center lead" scope="col">API Requests</th>
<th class="text-center lead col-8" scope="col">
API Responses
</th>
</tr>
</thead>
<tbody>
<tr>
<th>Create PersonGroup</th>
<td>
<mdb-form-control class="form-white mx-auto">
<input mdbInput type="text" id="formWhite" class="form-control" #id1 />
<label mdbLabel class="form-label" for="formWhite">Group ID</label>
</mdb-form-control>
<mdb-form-control class="form-white mx-auto">
<input mdbInput type="text" id="formWhite" class="form-control" #name1 />
<label mdbLabel class="form-label" for="formWhite">Group Name</label>
</mdb-form-control>
<mdb-form-control class="form-white mx-auto">
<input mdbInput type="text" id="formWhite" class="form-control" #data1 />
<label mdbLabel class="form-label" for="formWhite">User Data</label>
</mdb-form-control>
</td>
<td>
<button (click)="createGroup(id1.value, name1.value, data1.value)" type="button" role="button"
class="btn-grad btn-primary mx-auto">
PUT
</button>
</td>
<td>
{{ create_group_response | json }}
</td>
</tr>
<tr>
<th>Create Person</th>
<td>
<mdb-form-control class="form-white mx-auto">
<input mdbInput type="text" id="formWhite" class="form-control" #id2 />
<label mdbLabel class="form-label" for="formWhite">Group ID</label>
</mdb-form-control>
<mdb-form-control class="form-white mx-auto">
<input mdbInput type="text" id="formWhite" class="form-control" #name2 />
<label mdbLabel class="form-label" for="formWhite">Person Name</label>
</mdb-form-control>
<mdb-form-control class="form-white mx-auto">
<input mdbInput type="text" id="formWhite1" class="form-control" #data2 />
<label mdbLabel class="form-label" for="formWhite1">Person Data</label>
</mdb-form-control>
</td>
<td>
<button (click)="
createPerson(id2.value, name2.value, data2.value)
" type="button" class="btn-grad btn-primary mx-auto">
POST
</button>
</td>
<td>
{{ create_person_response | json }}
</td>
</tr>
<tr>
<th>Add Person Image</th>
<td>
<mdb-form-control class="form-white mx-auto">
<input mdbInput type="text" id="formWhite" class="form-control" #id3 />
<label mdbLabel class="form-label" for="formWhite">Group ID</label>
</mdb-form-control>
<mdb-form-control class="form-white mx-auto myfileuploader">
<input mdbInput type="file" id="formWhite2" class="form-control"
(change)="handleFileInput($event)" />
</mdb-form-control>
<mdb-form-control class="form-white mx-auto">
<input mdbInput type="text" id="formWhite1" class="form-control" #personID1 />
<label mdbLabel class="form-label" for="formWhite1">Person ID</label>
</mdb-form-control>
</td>
<td>
<button (click)="
addImage(id3.value, person_image, personID1.value)
" type="button" class="btn-grad btn-primary mx-auto">
POST
</button>
</td>
<td>
{{ add_image_response | json }}
</td>
</tr>
<tr>
<th>Get Person</th>
<td>
<mdb-form-control class="form-white mx-auto">
<input mdbInput type="text" id="formWhite" class="form-control" #id4 />
<label mdbLabel class="form-label" for="formWhite">Group ID</label>
</mdb-form-control>
<mdb-form-control class="form-white mx-auto">
<input mdbInput type="text" id="formWhite1" class="form-control" #personID2 />
<label mdbLabel class="form-label" for="formWhite1">Person ID</label>
</mdb-form-control>
</td>
<td>
<button (click)="getPersonFromPersonGroup(id4.value, personID2.value)" type="button"
class="btn-grad btn-primary mx-auto">
GET
</button>
</td>
<td class="text-wrap">
{{ get_person_response | json }}
</td>
</tr>
<tr>
<th>Train Group</th>
<td>
<mdb-form-control class="form-white mx-auto">
<input mdbInput type="text" id="formWhite" class="form-control" #id5 />
<label mdbLabel class="form-label" for="formWhite">Group ID</label>
</mdb-form-control>
</td>
<td>
<button (click)="trainPersonGroup(id5.value)" type="button" class="btn-grad btn-primary mx-auto">
POST
</button>
</td>
<td>
{{ train_response | json }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
./train.component.scss
@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
html,
body,
.intro {
height: 100%;
width: 40%;
}
.lead {
background:
linear-gradient(to right, #ff76b4 0%, #66f1ff 51%, #ff76b4 100%);
background-size: 100% 2px;
background-position: bottom 0 left 0, bottom 5px left 0;
background-repeat: no-repeat;
}
table td,
table th {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: center;
justify-content: center;
}
thead th,
tbody th {
color: #fff;
}
tbody td {
font-weight: 500;
color: rgba(255, 255, 255, .65);
}
tbody tr {
border-bottom: rgba(255, 255, 255, .65) solid 1px;
padding-bottom: 5px;
}
.card {
border-radius: .5rem;
}
.container {
margin-top: 50px
}
.btn-grad {
background-image: linear-gradient(to right, #ff76b4 0%, #66f1ff 51%, #ff76b4 100%)
}
.btn-grad {
padding: 8px 20px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: #262626;
box-shadow: 0 0 20px #262626;
border-radius: 10px;
display: block;
outline: none;
border-color: #262626;
}
.btn-grad:hover {
background-position: right center;
/* change the direction of the change here */
color: #fff;
text-decoration: none;
}
.form-white {
margin-bottom: 5px;
}
.form-control {
margin-bottom: 10px;
}