Configuration

import { createFaceSmash } from '@facesmash/sdk';

const client = createFaceSmash({
  apiUrl: 'https://api.facesmash.app',
  modelUrl: 'https://cdn.jsdelivr.net/npm/@vladmandic/face-api/model',
  matchThreshold: 0.45,
  minQualityScore: 0.2,
  minDetectionConfidence: 0.3,
  maxTemplatesPerUser: 10,
  debug: false,
});

import { FaceSmashProvider } from '@facesmash/sdk/react';

<FaceSmashProvider config={{
  apiUrl: 'https://api.facesmash.app',
  matchThreshold: 0.45,
  debug: true,
}}>
  {/* children */}
</FaceSmashProvider>

const client = createFaceSmash({ debug: true });
console.log(client.config);
// {
//   apiUrl: 'https://api.facesmash.app',
//   modelUrl: 'https://cdn.jsdelivr.net/npm/@vladmandic/face-api/model',
//   minDetectionConfidence: 0.3,
//   matchThreshold: 0.45,
//   minQualityScore: 0.2,
//   maxTemplatesPerUser: 10,
//   debug: true,
// }

/** Configuration you pass to createFaceSmash() or FaceSmashProvider */
interface FaceSmashConfig {
  apiUrl?: string;
  modelUrl?: string;
  minDetectionConfidence?: number;
  matchThreshold?: number;
  minQualityScore?: number;
  maxTemplatesPerUser?: number;
  debug?: boolean;
}

/** Resolved config with all defaults applied (what client.config returns) */
interface ResolvedConfig {
  apiUrl: string;
  modelUrl: string;
  minDetectionConfidence: number;
  matchThreshold: number;
  minQualityScore: number;
  maxTemplatesPerUser: number;
  debug: boolean;
}

// Use the hosted FaceSmash API
createFaceSmash({ apiUrl: 'https://api.facesmash.app' });

// Self-hosted PocketBase
createFaceSmash({ apiUrl: 'https://my-pocketbase.example.com' });

// Local development
createFaceSmash({ apiUrl: 'http://localhost:8090' });

createFaceSmash({
  modelUrl: 'https://static.mysite.com/face-models',
});

// More permissive (catch faces in challenging conditions)
createFaceSmash({ minDetectionConfidence: 0.2 });

// Stricter (reduce false positives in face detection)
createFaceSmash({ minDetectionConfidence: 0.5 });

Base threshold:     0.45
Poor lighting:      0.45 - 0.05 = 0.40
Confidence boost 2: 0.40 - (2 × 0.05) = 0.30 → clamped to 0.35
Final threshold:    0.35

qualityScore = confidence × lightingFactor × sizeFactor × posePenalty
// Clamped to [0, 1]

// Lenient (indoor/mobile use)
createFaceSmash({ minQualityScore: 0.15 });

// Strict (kiosk/controlled environment)
createFaceSmash({ minQualityScore: 0.5 });

// Minimal storage footprint
createFaceSmash({ maxTemplatesPerUser: 3 });

// Maximum adaptive learning
createFaceSmash({ maxTemplatesPerUser: 25 });

// Enable for development
createFaceSmash({ debug: true });

// Disable for production (no console output from the SDK)
createFaceSmash({ debug: false });

createFaceSmash({
  matchThreshold: 0.40,
  minQualityScore: 0.15,
  minDetectionConfidence: 0.25,
  maxTemplatesPerUser: 15,
});

createFaceSmash({
  // All defaults — no config needed
});

createFaceSmash({
  matchThreshold: 0.55,
  minQualityScore: 0.4,
  minDetectionConfidence: 0.4,
  maxTemplatesPerUser: 5,
});

createFaceSmash({
  matchThreshold: 0.60,
  minQualityScore: 0.5,
  minDetectionConfidence: 0.5,
  maxTemplatesPerUser: 3,
});

// Vanilla JS
const unsubscribe = client.on((event) => {
  console.log(event.type, event);
});

// Later: stop listening
unsubscribe();

// React
<FaceSmashProvider onEvent={(event) => console.log(event)}>

type FaceSmashEvent =
  | { type: 'models-loading'; progress: number }
  | { type: 'models-loaded' }
  | { type: 'models-error'; error: string }
  | { type: 'face-detected'; analysis: FaceAnalysis }
  | { type: 'face-lost' }
  | { type: 'login-start' }
  | { type: 'login-success'; user: UserProfile; similarity: number }
  | { type: 'login-failed'; error: string; bestSimilarity?: number }
  | { type: 'register-start' }
  | { type: 'register-success'; user: UserProfile }
  | { type: 'register-failed'; error: string };

type FaceSmashEventListener = (event: FaceSmashEvent) => void;

client.on((event) => {
  switch (event.type) {
    case 'login-success':
      analytics.track('face_login_success', {
        userId: event.user.id,
        similarity: event.similarity,
      });
      break;
    case 'login-failed':
      analytics.track('face_login_failed', {
        error: event.error,
        bestSimilarity: event.bestSimilarity,
      });
      break;
    case 'register-success':
      analytics.track('face_register', {
        userId: event.user.id,
        email: event.user.email,
      });
      break;
  }
});

client.on((event) => {
  if (event.type === 'models-loading') {
    const bar = document.getElementById('progress');
    bar.style.width = `${event.progress}%`;
    bar.textContent = event.progress < 100
      ? `Loading face recognition (${event.progress}%)...`
      : 'Ready!';
  }
});

const client = createFaceSmash({ apiUrl: 'https://api.facesmash.app' });

// List all users
const users = await client.pb.collection('user_profiles').getFullList();

// Get a specific user's templates
const templates = await client.pb.collection('face_templates').getList(1, 50, {
  filter: 'user_email="jane@example.com"',
  sort: '-quality_score',
});

// Get recent login logs
const logs = await client.pb.collection('sign_in_logs').getList(1, 20, {
  filter: 'user_email="jane@example.com"',
  sort: '-created',
});

// Delete a user profile
await client.pb.collection('user_profiles').delete(userId);

./pocketbase serve --http=0.0.0.0:8090

api.yourdomain.com {
    header Access-Control-Allow-Origin "{header.Origin}"
    header Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE, OPTIONS"
    header Access-Control-Allow-Headers "Content-Type, Authorization"
    header Access-Control-Allow-Credentials "true"

    @options method OPTIONS
    handle @options {
        header Access-Control-Max-Age "86400"
        respond 204
    }

    reverse_proxy localhost:8090
}

createFaceSmash({
  apiUrl: 'https://api.yourdomain.com',
  modelUrl: 'https://static.yourdomain.com/face-models',
});

const client = createFaceSmash({
  apiUrl: 'https://api.yourdomain.com',
});

await client.init();
// Ready to use with your own backend