Svelte Quick Start Guide

Get started with FacePing's face recognition API using Svelte

Prerequisites

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

Installation

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

npm create vite@latest faceping-demo -- --template svelte-ts
cd faceping-demo
npm install

Step 1: Create a Face Group Component

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

// Script section
<script lang="ts">
  let groupName = '';
  let status = '';

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

<div class="face-group">
  <input
    bind:value={groupName}
    type="text"
    placeholder="Enter group name"
    class="input"
  />
  <button on:click={createGroup}>Create Group</button>
  {#if status}
    <p>{status}</p>
  {/if}
</div>

Step 2: Create Face Upload Component

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

<script lang="ts">
  let file: File | null = null;
  let groupName = '';
  let status = '';

  async function handleUpload() {
    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();
      status = 'Face uploaded successfully';
      console.log('Upload result:', data);
    } catch (error) {
      status = 'Error uploading face';
      console.error('Error:', error);
    }
  }

  function handleFileChange(event: Event) {
    const target = event.target as HTMLInputElement;
    if (target.files) {
      file = target.files[0];
    }
  }
</script>

<div class="face-upload">
  <input
    bind:value={groupName}
    type="text"
    placeholder="Enter group name"
  />
  <input
    type="file"
    on:change={handleFileChange}
    accept="image/*"
  />
  <button on:click={handleUpload}>Upload Face</button>
  {#if status}
    <p>{status}</p>
  {/if}
</div>

Step 3: Create Face Search Component

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

<script lang="ts">
  interface MatchResult {
    score: number;
  }

  let file: File | null = null;
  let groupName = '';
  let results: MatchResult[] = [];
  let status = '';

  async function handleSearch() {
    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();
      results = data.matches || [];
      status = 'Search completed';
    } catch (error) {
      status = 'Error searching faces';
      console.error('Error:', error);
    }
  }

  function handleFileChange(event: Event) {
    const target = event.target as HTMLInputElement;
    if (target.files) {
      file = target.files[0];
    }
  }
</script>

<div class="face-search">
  <input
    bind:value={groupName}
    type="text"
    placeholder="Enter group name"
  />
  <input
    type="file"
    on:change={handleFileChange}
    accept="image/*"
  />
  <button on:click={handleSearch}>Search Faces</button>
  {#if status}
    <p>{status}</p>
  {/if}
  {#if results.length}
    <div class="results">
      {#each results as match}
        <div>
          <p>Match Score: {match.score}</p>
        </div>
      {/each}
    </div>
  {/if}
</div>

Using Components

Update your main App.svelte file:

<script lang="ts">
  import FaceGroup from './lib/FaceGroup.svelte';
  import FaceUpload from './lib/FaceUpload.svelte';
  import FaceSearch from './lib/FaceSearch.svelte';
</script>

<main>
  <div class="container">
    <section>
      <h2>Create Face Group</h2>
      <FaceGroup />
    </section>

    <section>
      <h2>Upload Face</h2>
      <FaceUpload />
    </section>

    <section>
      <h2>Search Faces</h2>
      <FaceSearch />
    </section>
  </div>
</main>

<style>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  section {
    margin-bottom: 2rem;
  }

  h2 {
    margin-bottom: 1rem;
  }
</style>

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)