Angular Quick Start Guide

Get started with FacePing's face recognition API using Angular

Prerequisites

A FacePing API key
Angular development environment setup
Basic knowledge of Angular and TypeScript

Installation

First, create a new Angular project and install the required dependencies:

ng new faceping-demo
cd faceping-demo
ng serve

Step 1: Create a Face Group Component

Generate a new component for managing face groups:

ng generate component face-group

Update the component files with the following content:

// face-group.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-face-group',
  templateUrl: './face-group.component.html',
  styleUrls: ['./face-group.component.css']
})
export class FaceGroupComponent {
  groupName: string = '';
  status: string = '';

  async createGroup() {
    try {
      const response = await fetch(`https://api.faceping.ai/groups/${this.groupName}`, {
        method: 'POST'
      });
      const data = await response.json();
      this.status = 'Group created successfully';
      console.log('Group created:', data);
    } catch (error) {
      this.status = 'Error creating group';
      console.error('Error:', error);
    }
  }
}

<!-- face-group.component.html -->
<div class="face-group">
  <input
    [(ngModel)]="groupName"
    type="text"
    placeholder="Enter group name"
    class="input"
  >
  <button (click)="createGroup()">Create Group</button>
  <p *ngIf="status">{{ status }}</p>
</div>

Step 2: Create Face Upload Component

Generate a new component for handling face uploads:

ng generate component face-upload

Update the component files:

// face-upload.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-face-upload',
  templateUrl: './face-upload.component.html',
  styleUrls: ['./face-upload.component.css']
})
export class FaceUploadComponent {
  file: File | null = null;
  groupName: string = '';
  status: string = '';

  handleFileInput(event: any) {
    const files = event.target.files;
    if (files.length > 0) {
      this.file = files[0];
    }
  }

  async uploadFace() {
    if (!this.file) return;

    const formData = new FormData();
    formData.append('image', this.file);

    try {
      const response = await fetch(
        `https://api.faceping.ai/groups/${this.groupName}/faces`,
        {
          method: 'POST',
          body: formData
        }
      );
      const data = await response.json();
      this.status = 'Face uploaded successfully';
      console.log('Upload result:', data);
    } catch (error) {
      this.status = 'Error uploading face';
      console.error('Error:', error);
    }
  }
}

<!-- face-upload.component.html -->
<div class="face-upload">
  <input
    [(ngModel)]="groupName"
    type="text"
    placeholder="Enter group name"
  >
  <input
    type="file"
    (change)="handleFileInput($event)"
    accept="image/*"
  >
  <button (click)="uploadFace()">Upload Face</button>
  <p *ngIf="status">{{ status }}</p>
</div>

Step 3: Create Face Search Component

Generate a new component for searching faces:

ng generate component face-search

Update the component files:

// face-search.component.ts
import { Component } from '@angular/core';

interface MatchResult {
  score: number;
}

@Component({
  selector: 'app-face-search',
  templateUrl: './face-search.component.html',
  styleUrls: ['./face-search.component.css']
})
export class FaceSearchComponent {
  file: File | null = null;
  groupName: string = '';
  results: MatchResult[] = [];
  status: string = '';

  handleFileInput(event: any) {
    const files = event.target.files;
    if (files.length > 0) {
      this.file = files[0];
    }
  }

  async searchFaces() {
    if (!this.file) return;

    const formData = new FormData();
    formData.append('image', this.file);

    try {
      const response = await fetch(
        `https://api.faceping.ai/groups/${this.groupName}/search`,
        {
          method: 'POST',
          body: formData
        }
      );
      const data = await response.json();
      this.results = data.matches || [];
      this.status = 'Search completed';
    } catch (error) {
      this.status = 'Error searching faces';
      console.error('Error:', error);
    }
  }
}

<!-- face-search.component.html -->
<div class="face-search">
  <input
    [(ngModel)]="groupName"
    type="text"
    placeholder="Enter group name"
  >
  <input
    type="file"
    (change)="handleFileInput($event)"
    accept="image/*"
  >
  <button (click)="searchFaces()">Search Faces</button>
  <p *ngIf="status">{{ status }}</p>
  <div *ngIf="results.length" class="results">
    <div *ngFor="let match of results">
      <p>Match Score: {{ match.score }}</p>
    </div>
  </div>
</div>

Update App Module

Make sure to import the required modules in your app.module.ts:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { FaceGroupComponent } from './face-group/face-group.component';
import { FaceUploadComponent } from './face-upload/face-upload.component';
import { FaceSearchComponent } from './face-search/face-search.component';

@NgModule({
  declarations: [
    AppComponent,
    FaceGroupComponent,
    FaceUploadComponent,
    FaceSearchComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Security Notes

Images are immediately discarded after vector conversion
Face vectors cannot be reverse-engineered into images
Always use HTTPS for all API calls
Store your API keys in environment.ts file