Vue.js Quick Start Guide

Get started with FacePing's face recognition API using Vue.js

Prerequisites

A FacePing API key
Vue.js development environment setup
Basic knowledge of Vue Composition API and async/await

Installation

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

npm create vue@latest faceping-demo
cd faceping-demo
npm install

Step 1: Create a Face Group Component

Create a new file FaceGroup.vue with the following content:

// Script section
import { ref } from 'vue'

const groupName = ref('')
const status = ref('')

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

<!-- Template section -->
<template>
  <div class="face-group">
    <input
      v-model="groupName"
      type="text"
      placeholder="Enter group name"
      class="input"
    />
    <button @click="createGroup">Create Group</button>
    <p v-if="status">{{ status }}</p>
  </div>
</template>

Step 2: Create Face Upload Component

Create a new file FaceUpload.vue with the following content:

// Script section
import { ref } from 'vue'

const file = ref(null)
const groupName = ref('')
const status = ref('')

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

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

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

const handleFileChange = (event) => {
  file.value = event.target.files[0]
}

<!-- Template section -->
<template>
  <div class="face-upload">
    <input
      v-model="groupName"
      type="text"
      placeholder="Enter group name"
    />
    <input
      type="file"
      @change="handleFileChange"
      accept="image/*"
    />
    <button @click="handleUpload">Upload Face</button>
    <p v-if="status">{{ status }}</p>
  </div>
</template>

Step 3: Create Face Search Component

Create a new file FaceSearch.vue with the following content:

// Script section
import { ref } from 'vue'

const file = ref(null)
const groupName = ref('')
const results = ref([])
const status = ref('')

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

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

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

const handleFileChange = (event) => {
  file.value = event.target.files[0]
}

<!-- Template section -->
<template>
  <div class="face-search">
    <input
      v-model="groupName"
      type="text"
      placeholder="Enter group name"
    />
    <input
      type="file"
      @change="handleFileChange"
      accept="image/*"
    />
    <button @click="handleSearch">Search Faces</button>
    <p v-if="status">{{ status }}</p>
    <div v-if="results.length" class="results">
      <div v-for="(match, index) in results" :key="index">
        <p>Match Score: {{ match.score }}</p>
      </div>
    </div>
  </div>
</template>

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 variables (.env file)