React Quick Start Guide

Get started with FacePing's face recognition API using React

Prerequisites

A FacePing API key
React development environment setup
Basic knowledge of React Hooks and async/await

Installation

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

npx create-react-app faceping-demo
cd faceping-demo
npm install

Step 1: Create a Face Group Component

Create a component to manage face groups:

import React, { useState } from 'react';

function FaceGroup() {
  const [groupName, setGroupName] = useState('');
  const [status, setStatus] = useState('');

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

  return (
    <div>
      <input
        type="text"
        value={groupName}
        onChange={(e) => setGroupName(e.target.value)}
        placeholder="Enter group name"
      />
      <button onClick={createGroup}>Create Group</button>
      {status && <p>{status}</p>}
    </div>
  );
}

Step 2: Create Face Upload Component

Create a component to handle face image uploads:

import React, { useState } from 'react';

function FaceUpload() {
  const [file, setFile] = useState(null);
  const [groupName, setGroupName] = useState('');
  const [status, setStatus] = useState('');

  const handleUpload = async () => {
    if (!file) return;

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

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

  return (
    <div>
      <input
        type="text"
        value={groupName}
        onChange={(e) => setGroupName(e.target.value)}
        placeholder="Enter group name"
      />
      <input
        type="file"
        onChange={(e) => setFile(e.target.files[0])}
        accept="image/*"
      />
      <button onClick={handleUpload}>Upload Face</button>
      {status && <p>{status}</p>}
    </div>
  );
}

Step 3: Create Face Search Component

Create a component to search for similar faces:

import React, { useState } from 'react';

function FaceSearch() {
  const [file, setFile] = useState(null);
  const [groupName, setGroupName] = useState('');
  const [results, setResults] = useState([]);
  const [status, setStatus] = useState('');

  const handleSearch = async () => {
    if (!file) return;

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

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

  return (
    <div>
      <input
        type="text"
        value={groupName}
        onChange={(e) => setGroupName(e.target.value)}
        placeholder="Enter group name"
      />
      <input
        type="file"
        onChange={(e) => setFile(e.target.files[0])}
        accept="image/*"
      />
      <button onClick={handleSearch}>Search Faces</button>
      {status && <p>{status}</p>}
      <div>
        {results.map((match, index) => (
          <div key={index}>
            <p>Match Score: {match.score}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Security Notes

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