Quick Start Guide

For Quick starts in all technology stacks Click here

This guide will walk you through the essential steps to get started with FacePing's face recognition API.

Prerequisites

• A FacePing API key
• Your preferred development environment

Overview

1. Create a face group
2. Store face images as vectors
3. Search for similar faces

Step 1: Create a Face Group

Groups help organize your face vectors. Here's how to create one:

Node.js

const fetch = require('node-fetch');

async function createGroup(groupName) {
  const response = await fetch(`https://api.faceping.ai/groups/${groupName}`, {
    method: 'POST'
  });
  return await response.json();
}

// Usage
createGroup('my-group')
  .then(result => console.log(result))
  .catch(error => console.error(error));

React

import { useState } from 'react';

function FaceGroup() {
  const [groupName, setGroupName] = useState('');
  
  const createGroup = async () => {
    try {
      const response = await fetch(`https://api.faceping.ai/groups/${groupName}`, {
        method: 'POST'
      });
      const data = await response.json();
      console.log('Group created:', data);
    } catch (error) {
      console.error('Error creating group:', error);
    }
  };
  
  return (
    <div>
      <input 
        value={groupName}
        onChange={(e) => setGroupName(e.target.value)}
        placeholder="Enter group name"
      />
      <button onClick={createGroup}>Create Group</button>
    </div>
  );
}

Angular

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-face-group',
  template: `
    <input [(ngModel)]="groupName" placeholder="Enter group name">
    <button (click)="createGroup()">Create Group</button>
  `
})
export class FaceGroupComponent {
  groupName = '';

  constructor(private http: HttpClient) {}

  createGroup() {
    this.http.post(`https://api.faceping.ai/groups/${this.groupName}`, {})
      .subscribe(
        result => console.log('Group created:', result),
        error => console.error('Error:', error)
      );
  }
}

C#

using System.Net.Http;
using System.Threading.Tasks;

public class FacePingClient
{
    private readonly HttpClient _client = new HttpClient();

    public async Task<string> CreateGroupAsync(string groupName)
    {
        var response = await _client.PostAsync(
            $"https://api.faceping.ai/groups/{groupName}",
            new StringContent("")
        );
        
        return await response.Content.ReadAsStringAsync();
    }
}

// Usage
var client = new FacePingClient();
var result = await client.CreateGroupAsync("my-group");
Console.WriteLine(result);

Step 2: Store Face Images

After creating a group, you can store face images as vectors:

Node.js

const fs = require('fs');
const FormData = require('form-data');

async function storeFace(groupName, imagePath) {
  const formData = new FormData();
  formData.append('image', fs.createReadStream(imagePath));

  const response = await fetch(`https://api.faceping.ai/groups/${groupName}/faces`, {
    method: 'POST',
    body: formData
  });
  return await response.json();
}

// Usage
storeFace('my-group', './face.jpg')
  .then(result => console.log(result))
  .catch(error => console.error(error));

React

function FaceUpload() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [groupName, setGroupName] = useState('');

  const uploadFace = async () => {
    const formData = new FormData();
    formData.append('image', selectedFile);

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

  return (
    <div>
      <input 
        type="file"
        onChange={(e) => setSelectedFile(e.target.files[0])}
      />
      <button onClick={uploadFace}>Upload Face</button>
    </div>
  );
}

Angular

@Component({
  selector: 'app-face-upload',
  template: `
    <input type="file" (change)="onFileSelect($event)">
    <button (click)="uploadFace()">Upload Face</button>
  `
})
export class FaceUploadComponent {
  selectedFile: File | null = null;
  groupName = 'my-group';

  constructor(private http: HttpClient) {}

  onFileSelect(event: any) {
    this.selectedFile = event.target.files[0];
  }

  uploadFace() {
    if (!this.selectedFile) return;

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

    this.http.post(`https://api.faceping.ai/groups/${this.groupName}/faces`, formData)
      .subscribe(
        result => console.log('Face stored:', result),
        error => console.error('Error:', error)
      );
  }
}

C#

public class FacePingClient
{
    public async Task<string> StoreFaceAsync(string groupName, string imagePath)
    {
        using var form = new MultipartFormDataContent();
        using var fileStream = File.OpenRead(imagePath);
        using var fileContent = new StreamContent(fileStream);
        
        form.Add(fileContent, "image", Path.GetFileName(imagePath));
        
        var response = await _client.PostAsync(
            $"https://api.faceping.ai/groups/{groupName}/faces",
            form
        );
        
        return await response.Content.ReadAsStringAsync();
    }
}

// Usage
var result = await client.StoreFaceAsync("my-group", "path/to/face.jpg");

Step 3: Search for Similar Faces

Once you have stored faces, you can search for similar ones:

Node.js

async function searchFaces(groupName, imagePath) {
  const formData = new FormData();
  formData.append('image', fs.createReadStream(imagePath));

  const response = await fetch(`https://api.faceping.ai/groups/${groupName}/search`, {
    method: 'POST',
    body: formData
  });
  return await response.json();
}

// Usage
searchFaces('my-group', './search-face.jpg')
  .then(results => console.log(results))
  .catch(error => console.error(error));

React

function FaceSearch() {
  const [searchFile, setSearchFile] = useState(null);
  const [searchResults, setSearchResults] = useState([]);
  const groupName = 'my-group';

  const searchFaces = async () => {
    const formData = new FormData();
    formData.append('image', searchFile);

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

  return (
    <div>
      <input 
        type="file"
        onChange={(e) => setSearchFile(e.target.files[0])}
      />
      <button onClick={searchFaces}>Search Faces</button>
      <div>
        {searchResults.map((match, index) => (
          <div key={index}>
            Match Score: {match.score}
          </div>
        ))}
      </div>
    </div>
  );
}

Angular

@Component({
  selector: 'app-face-search',
  template: `
    <input type="file" (change)="onFileSelect($event)">
    <button (click)="searchFaces()">Search Faces</button>
    <div *ngFor="let match of searchResults">
      Match Score: {{match.score}}
    </div>
  `
})
export class FaceSearchComponent {
  selectedFile: File | null = null;
  searchResults: any[] = [];
  groupName = 'my-group';

  constructor(private http: HttpClient) {}

  onFileSelect(event: any) {
    this.selectedFile = event.target.files[0];
  }

  searchFaces() {
    if (!this.selectedFile) return;

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

    this.http.post(`https://api.faceping.ai/groups/${this.groupName}/search`, formData)
      .subscribe(
        (result: any) => this.searchResults = result.matches || [],
        error => console.error('Error:', error)
      );
  }
}

C#

public class FacePingClient
{
    public async Task<string> SearchFacesAsync(string groupName, string imagePath)
    {
        using var form = new MultipartFormDataContent();
        using var fileStream = File.OpenRead(imagePath);
        using var fileContent = new StreamContent(fileStream);
        
        form.Add(fileContent, "image", Path.GetFileName(imagePath));
        
        var response = await _client.PostAsync(
            $"https://api.faceping.ai/groups/${groupName}/search",
            form
        );
        
        return await response.Content.ReadAsStringAsync();
    }
}

// Usage
var results = await client.SearchFacesAsync("my-group", "path/to/search-face.jpg");

Next Steps

• Explore the full API documentation
• Learn about metadata filtering
• Try bulk processing with Google Drive or FTP

Security Notes

• Images are immediately discarded after vector conversion
• Face vectors cannot be reverse-engineered into images
• Use HTTPS for all API calls