facecog-liveness-showcase 0.0.1

package/projects/facecog-liveness-verification/src/lib/components/verification-result/verification-result.component.spec.ts

@@ -0,0 +1,286 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+
+import { VerificationResultComponent } from './verification-result.component';
+import type { LivenessResult } from '../../interfaces/liveness-result.interface';
+import type { MultiBackendLivenessResult } from '../../interfaces/multi-backend-liveness-result.interface';
+import type { MultiBackendAnalyzeResponse } from '../../interfaces/multi-backend-analyze-response.interface';
+import type { AnalyzeResponse } from '../../interfaces/analyze-response.interface';
+
+describe('VerificationResultComponent', () => {
+  let component: VerificationResultComponent;
+  let fixture: ComponentFixture<VerificationResultComponent>;
+
+  const baseResult: LivenessResult = {
+    success: true,
+    confidence: 0.92,
+    verifiedImage: 'data:image/jpeg;base64,abc',
+    metadata: {
+      timestamp: '2025-01-01T00:00:00Z',
+      backend: 'amazon' as const,
+      confidence: 0.92,
+      attemptNumber: 1
+    }
+  };
+
+  const failedResult: LivenessResult = {
+    ...baseResult,
+    success: false,
+    error: 'Low confidence'
+  };
+
+  const createAnalyzeResponse = (backend: string, isLive: boolean, confidence: number): AnalyzeResponse => ({
+    isLive,
+    confidence,
+    metadata: {
+      backend: backend as any,
+      timestamp: new Date(),
+      sessionId: 'sess-1'
+    }
+  });
+
+  const createMultiBackendResult = (): MultiBackendAnalyzeResponse => ({
+    amazon: createAnalyzeResponse('amazon', true, 0.9),
+    openpose: createAnalyzeResponse('openpose', true, 0.85),
+    facetec: createAnalyzeResponse('facetec', true, 0.88),
+    primary: createAnalyzeResponse('amazon', true, 0.9),
+    consensus: {
+      isLive: true,
+      confidence: 0.88,
+      votingResults: {
+        liveVotes: 3,
+        notLiveVotes: 0,
+        agreement: 'unanimous'
+      }
+    }
+  });
+
+  beforeEach(async () => {
+    const sanitizerSpy = {
+      bypassSecurityTrustUrl: jest.fn((url: string) => url as any),
+      bypassSecurityTrustHtml: jest.fn(),
+      bypassSecurityTrustStyle: jest.fn(),
+      bypassSecurityTrustScript: jest.fn(),
+      bypassSecurityTrustResourceUrl: jest.fn(),
+      sanitize: jest.fn(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [CommonModule, IonicModule.forRoot(), VerificationResultComponent],
+      providers: [{ provide: DomSanitizer, useValue: sanitizerSpy }]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(VerificationResultComponent);
+    component = fixture.componentInstance;
+    component.result = baseResult;
+  });
+
+  afterEach(() => {
+    component.ngOnDestroy();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('onDone emits doneClicked and complete, clears countdown', () => {
+    component.ngOnInit();
+    expect(component.countdownActive()).toBe(true);
+
+    let doneEmitted = false;
+    let completeEmitted = false;
+    component.doneClicked.subscribe(() => (doneEmitted = true));
+    component.complete.subscribe((r) => {
+      completeEmitted = true;
+      expect(r).toEqual(baseResult);
+    });
+
+    component.onDone();
+
+    expect(doneEmitted).toBe(true);
+    expect(completeEmitted).toBe(true);
+    expect(component.countdownActive()).toBe(false);
+  });
+
+  it('onRetry emits retryClicked and retry, clears countdown', () => {
+    component.ngOnInit();
+
+    let retryClickedEmitted = false;
+    let retryEmitted = false;
+    component.retryClicked.subscribe(() => (retryClickedEmitted = true));
+    component.retry.subscribe(() => (retryEmitted = true));
+
+    component.onRetry();
+
+    expect(retryClickedEmitted).toBe(true);
+    expect(retryEmitted).toBe(true);
+    expect(component.countdownActive()).toBe(false);
+  });
+
+  it('confidencePercent returns rounded confidence * 100', () => {
+    component.result = { ...baseResult, confidence: 0.876 };
+    expect(component.confidencePercent).toBe(88);
+  });
+
+  it('isMultiBackend returns true for multi-backend result', () => {
+    const multiResult: MultiBackendLivenessResult = {
+      ...baseResult,
+      multiBackendResults: createMultiBackendResult(),
+      metadata: { timestamp: '', sessionId: '' }
+    };
+    component.result = multiResult;
+    expect(component.isMultiBackend).toBe(true);
+  });
+
+  it('isMultiBackend returns false for single backend result', () => {
+    component.result = baseResult;
+    expect(component.isMultiBackend).toBe(false);
+  });
+
+  it('multiBackendResult returns result when isMultiBackend', () => {
+    const multiResult: MultiBackendLivenessResult = {
+      ...baseResult,
+      multiBackendResults: createMultiBackendResult(),
+      metadata: { timestamp: '', sessionId: '' }
+    };
+    component.result = multiResult;
+    expect(component.multiBackendResult).toEqual(multiResult);
+  });
+
+  it('multiBackendResult returns null when not multi-backend', () => {
+    component.result = baseResult;
+    expect(component.multiBackendResult).toBeNull();
+  });
+
+  it('getBackendConfidencePercent returns rounded confidence', () => {
+    const backend = createAnalyzeResponse('amazon', true, 0.756);
+    expect(component.getBackendConfidencePercent(backend)).toBe(76);
+  });
+
+  it('getBackendName returns display names for known backends', () => {
+    expect(component.getBackendName('amazon')).toBe('Amazon Rekognition');
+    expect(component.getBackendName('openpose')).toBe('OpenPose/MoveNet');
+    expect(component.getBackendName('facetec')).toBe('FaceTec 3D Liveness');
+    expect(component.getBackendName('azure')).toBe('Azure Face API');
+    expect(component.getBackendName('unknown')).toBe('unknown');
+  });
+
+  it('getAgreementBadgeColor returns correct colors', () => {
+    expect(component.getAgreementBadgeColor('unanimous')).toBe('success');
+    expect(component.getAgreementBadgeColor('majority')).toBe('warning');
+    expect(component.getAgreementBadgeColor('split')).toBe('danger');
+    expect(component.getAgreementBadgeColor('other')).toBe('medium');
+  });
+
+  it('singleBackendMetadata returns metadata when not multi-backend', () => {
+    component.result = baseResult;
+    expect(component.singleBackendMetadata).toEqual(baseResult.metadata);
+  });
+
+  it('singleBackendMetadata returns null when multi-backend', () => {
+    const multiResult: MultiBackendLivenessResult = {
+      ...baseResult,
+      multiBackendResults: createMultiBackendResult(),
+      metadata: { timestamp: '', sessionId: '' }
+    };
+    component.result = multiResult;
+    expect(component.singleBackendMetadata).toBeNull();
+  });
+
+  it('ngOnInit creates video URL from videoBlob', () => {
+    const blob = new Blob(['video'], { type: 'video/mp4' });
+    component.result = { ...baseResult, videoBlob: blob };
+
+    const createObjectURLSpy = jest.spyOn(URL, 'createObjectURL').mockReturnValue('blob:mock-url');
+
+    component.ngOnInit();
+
+    expect(createObjectURLSpy).toHaveBeenCalledWith(blob);
+    expect(component.videoUrl).toBe('blob:mock-url');
+    expect(component.videoSizeMB).toBeCloseTo(blob.size / (1024 * 1024), 5);
+
+    createObjectURLSpy.mockRestore();
+  });
+
+  it('ngOnDestroy revokes blob URL', () => {
+    const blob = new Blob(['video'], { type: 'video/mp4' });
+    component.result = { ...baseResult, videoBlob: blob };
+    jest.spyOn(URL, 'createObjectURL').mockReturnValue('blob:mock-url');
+    const revokeSpy = jest.spyOn(URL, 'revokeObjectURL').mockImplementation();
+
+    component.ngOnInit();
+    component.ngOnDestroy();
+
+    expect(revokeSpy).toHaveBeenCalledWith('blob:mock-url');
+    revokeSpy.mockRestore();
+  });
+
+  it('ngOnInit starts countdown at 5', () => {
+    component.ngOnInit();
+    expect(component.countdown()).toBe(5);
+    expect(component.countdownActive()).toBe(true);
+  });
+
+  it('countdown decrements every second', () => {
+    jest.useFakeTimers();
+    component.ngOnInit();
+    expect(component.countdown()).toBe(5);
+
+    jest.advanceTimersByTime(1000);
+    expect(component.countdown()).toBe(4);
+
+    jest.advanceTimersByTime(1000);
+    expect(component.countdown()).toBe(3);
+
+    component.ngOnDestroy();
+    jest.useRealTimers();
+  });
+
+  it('countdown emits autoComplete on success when reaching 0', () => {
+    jest.useFakeTimers();
+    component.result = baseResult;
+    let emittedResult: LivenessResult | null = null;
+    component.autoComplete.subscribe((r) => (emittedResult = r));
+
+    component.ngOnInit();
+    jest.advanceTimersByTime(5000);
+
+    expect(emittedResult).toEqual(baseResult);
+    expect(component.countdownActive()).toBe(false);
+    jest.useRealTimers();
+  });
+
+  it('countdown emits autoRetry on failure when reaching 0', () => {
+    jest.useFakeTimers();
+    component.result = failedResult;
+    let retryEmitted = false;
+    component.autoRetry.subscribe(() => (retryEmitted = true));
+
+    component.ngOnInit();
+    jest.advanceTimersByTime(5000);
+
+    expect(retryEmitted).toBe(true);
+    expect(component.countdownActive()).toBe(false);
+    jest.useRealTimers();
+  });
+
+  it('countdownMessage shows success message', () => {
+    component.result = baseResult;
+    component.ngOnInit();
+    expect(component.countdownMessage).toContain('Verification successful!');
+    expect(component.countdownMessage).toContain('5');
+  });
+
+  it('countdownMessage shows failure message', () => {
+    component.result = failedResult;
+    component.ngOnInit();
+    expect(component.countdownMessage).toContain('Verification failed');
+    expect(component.countdownMessage).toContain('5');
+  });
+
+  it('poseSpecificMode defaults to false', () => {
+    expect(component.poseSpecificMode).toBe(false);
+  });
+});

package/projects/facecog-liveness-verification/src/lib/components/verification-result/verification-result.component.ts

@@ -0,0 +1,155 @@
+import { Component, EventEmitter, Input, Output, OnInit, OnDestroy, signal, ChangeDetectionStrategy } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { LivenessResult } from '../../interfaces/liveness-result.interface';
+import { MultiBackendLivenessResult } from '../../interfaces/multi-backend-liveness-result.interface';
+import { AnalyzeResponse } from '../../interfaces/analyze-response.interface';
+
+const COUNTDOWN_SECONDS = 5;
+
+@Component({
+  selector: 'lib-verification-result',
+  standalone: true,
+  imports: [CommonModule, IonicModule],
+  templateUrl: './verification-result.component.html',
+  styleUrls: ['./verification-result.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class VerificationResultComponent implements OnInit, OnDestroy {
+  @Input() result!: LivenessResult | MultiBackendLivenessResult;
+  @Input() isProcessing = false;
+  @Input() processingProgress = 0;
+  @Input() poseSpecificMode = false;
+  @Output() doneClicked = new EventEmitter<void>();
+  @Output() retryClicked = new EventEmitter<void>();
+  @Output() retry = new EventEmitter<void>();
+  @Output() complete = new EventEmitter<LivenessResult>();
+  @Output() autoRetry = new EventEmitter<void>();
+  @Output() autoComplete = new EventEmitter<LivenessResult>();
+
+  videoUrl: SafeUrl | null = null;
+  videoSizeMB: number | null = null;
+  readonly countdown = signal(COUNTDOWN_SECONDS);
+  readonly countdownActive = signal(false);
+  private videoBlobUrl: string | null = null;
+  private countdownTimer: ReturnType<typeof setInterval> | null = null;
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  ngOnInit() {
+    if (this.result?.videoBlob) {
+      this.videoBlobUrl = URL.createObjectURL(this.result.videoBlob);
+      this.videoUrl = this.sanitizer.bypassSecurityTrustUrl(this.videoBlobUrl);
+      this.videoSizeMB = this.result.videoBlob.size / (1024 * 1024);
+    } else if ((this.result as any)?.videoUrl) {
+      this.videoUrl = this.sanitizer.bypassSecurityTrustUrl((this.result as any).videoUrl);
+    }
+
+    this.startCountdown();
+  }
+
+  ngOnDestroy() {
+    this.clearCountdown();
+    if (this.videoBlobUrl) {
+      URL.revokeObjectURL(this.videoBlobUrl);
+    }
+  }
+
+  private startCountdown(): void {
+    if (!this.result) return;
+    this.countdown.set(COUNTDOWN_SECONDS);
+    this.countdownActive.set(true);
+
+    this.countdownTimer = setInterval(() => {
+      this.countdown.update(v => v - 1);
+      if (this.countdown() <= 0) {
+        this.clearCountdown();
+        this.onCountdownFinished();
+      }
+    }, 1000);
+  }
+
+  private clearCountdown(): void {
+    this.countdownActive.set(false);
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer);
+      this.countdownTimer = null;
+    }
+  }
+
+  private onCountdownFinished(): void {
+    if (this.result.success) {
+      this.autoComplete.emit(this.result as LivenessResult);
+    } else {
+      this.autoRetry.emit();
+    }
+  }
+
+  get countdownMessage(): string {
+    if (this.result?.success) {
+      return `Verification successful! Closing in ${this.countdown()}...`;
+    }
+    return `Verification failed. Trying again in ${this.countdown()}...`;
+  }
+
+  onDone() {
+    this.clearCountdown();
+    this.doneClicked.emit();
+    if (this.result) {
+      this.complete.emit(this.result as LivenessResult);
+    }
+  }
+
+  onRetry() {
+    this.clearCountdown();
+    this.retryClicked.emit();
+    this.retry.emit();
+  }
+
+  get confidencePercent(): number {
+    return Math.round((this.result?.confidence || 0) * 100);
+  }
+
+  get isMultiBackend(): boolean {
+    return this.result && 'multiBackendResults' in this.result;
+  }
+
+  get multiBackendResult(): MultiBackendLivenessResult | null {
+    return this.isMultiBackend ? (this.result as MultiBackendLivenessResult) : null;
+  }
+
+  getBackendConfidencePercent(backend: AnalyzeResponse): number {
+    return Math.round(backend.confidence * 100);
+  }
+
+  getBackendName(backendType: string): string {
+    const names: { [key: string]: string } = {
+      amazon: 'Amazon Rekognition',
+      openpose: 'OpenPose/MoveNet',
+      facetec: 'FaceTec 3D Liveness',
+      azure: 'Azure Face API'
+    };
+    return names[backendType] || backendType;
+  }
+
+  getAgreementBadgeColor(agreement: string): string {
+    switch (agreement) {
+      case 'unanimous':
+        return 'success';
+      case 'majority':
+        return 'warning';
+      case 'split':
+        return 'danger';
+      default:
+        return 'medium';
+    }
+  }
+
+  get singleBackendMetadata(): any {
+    if (!this.isMultiBackend) {
+      return (this.result as LivenessResult).metadata;
+    }
+    return null;
+  }
+}

package/projects/facecog-liveness-verification/src/lib/interfaces/analyze-response.interface.ts

@@ -0,0 +1,16 @@
+import { LivenessBackend } from '../types/liveness-backend.type';
+
+/**
+ * Response from a single backend analysis
+ */
+export interface AnalyzeResponse {
+  isLive: boolean;
+  confidence: number;
+  metadata: {
+    backend: LivenessBackend;
+    timestamp: Date;
+    sessionId: string;
+  };
+  error?: string;
+}
+

package/projects/facecog-liveness-verification/src/lib/interfaces/aws-face-liveness.interface.ts

@@ -0,0 +1,46 @@
+/**
+ * AWS Face Liveness Session Response
+ */
+export interface AwsFaceLivenessSessionResponse {
+  success: boolean;
+  sessionId: string;
+  expiresAt: string;
+  instructions?: string;
+  error?: string;
+}
+
+/**
+ * AWS Face Liveness Results Response
+ */
+export interface AwsFaceLivenessResultsResponse {
+  success: boolean;
+  isLive: boolean;
+  confidence: number;
+  confidencePercent: number;
+  metadata: {
+    backend: string;
+    timestamp: string;
+    sessionId: string;
+    status?: string;
+    referenceImage?: {
+      boundingBox?: unknown;
+    };
+    auditImagesCount?: number;
+  };
+  error?: string;
+}
+
+/**
+ * AWS Credentials Response
+ */
+export interface AwsCredentialsResponse {
+  success: boolean;
+  credentials: {
+    accessKeyId: string;
+    secretAccessKey: string;
+    region: string;
+    sessionToken?: string;
+  };
+  warning?: string;
+  error?: string;
+}

package/projects/facecog-liveness-verification/src/lib/interfaces/backend-adapter.interface.ts

@@ -0,0 +1,21 @@
+import { Observable } from 'rxjs';
+import { BackendResponse } from './backend-response.interface';
+
+export interface IBackendAdapter {
+  /**
+   * Verify liveness using the backend service
+   * @param imageData Base64 encoded image data
+   * @param videoBlob Optional video blob for analysis
+   */
+  verifyLiveness(imageData: string, videoBlob?: Blob): Observable<BackendResponse>;
+
+  /**
+   * Check if the backend is available and configured
+   */
+  isAvailable(): boolean;
+
+  /**
+   * Get the backend name
+   */
+  getName(): string;
+}

package/projects/facecog-liveness-verification/src/lib/interfaces/backend-http-client.interface.ts

@@ -0,0 +1,93 @@
+import { Observable } from 'rxjs';
+import { InjectionToken } from '@angular/core';
+import { LivenessBackend } from '../types/liveness-backend.type';
+import { AnalyzeResponse } from './analyze-response.interface';
+import { MultiBackendAnalyzeResponse } from './multi-backend-analyze-response.interface';
+
+/**
+ * Session response from backend
+ */
+export interface SessionResponse {
+  sessionId: string;
+  backend: LivenessBackend;
+  createdAt?: string;
+}
+
+/**
+ * Interface for backend HTTP client
+ * Implement this interface in your app to connect to your backend API
+ */
+export interface IBackendHttpClient {
+  /**
+   * Create a liveness verification session
+   * @param backend The backend to use for this session
+   */
+  createSession(backend: LivenessBackend): Observable<SessionResponse>;
+
+  /**
+   * Analyze liveness using a specific backend
+   * @param sessionId The session ID from createSession
+   * @param backend The backend to use
+   * @param imageData Base64 encoded image
+   * @param frames Optional array of base64 frames
+   */
+  analyzeLiveness(
+    sessionId: string,
+    backend: LivenessBackend,
+    imageData: string,
+    frames?: string[]
+  ): Observable<AnalyzeResponse>;
+
+  /**
+   * Analyze liveness using all configured backends
+   * @param sessionId The session ID
+   * @param imageData Base64 encoded image
+   */
+  analyzeWithAllBackends(
+    sessionId: string,
+    imageData: string
+  ): Observable<MultiBackendAnalyzeResponse>;
+
+  /**
+   * Analyze liveness using selected backends
+   * @param sessionId The session ID
+   * @param imageData Base64 encoded image
+   * @param backends Array of backends to use (e.g., ['amazon', 'openpose'])
+   */
+  analyzeWithSelectedBackends(
+    sessionId: string,
+    imageData: string,
+    backends: LivenessBackend[]
+  ): Observable<MultiBackendAnalyzeResponse>;
+
+  /**
+   * Upload video to storage (e.g., S3)
+   * @param videoBlob The video blob to upload
+   * @param sessionId The session ID
+   */
+  uploadVideo(
+    videoBlob: Blob,
+    sessionId: string
+  ): Observable<{ success: boolean; videoUrl: string; sessionId: string }>;
+
+  /**
+   * Upload a base64-encoded image to storage (fallback when video is unavailable)
+   * @param base64Image Base64 image data (with or without data URI prefix)
+   * @param sessionId The session ID
+   */
+  uploadBase64Image(
+    base64Image: string,
+    sessionId: string
+  ): Observable<{ success: boolean; videoUrl: string; sessionId: string }>;
+}
+
+/**
+ * Injection token for the backend HTTP client
+ * Provide this in your app module with your implementation
+ *
+ * @example
+ * providers: [
+ *   { provide: BACKEND_HTTP_CLIENT, useClass: MyBackendHttpService }
+ * ]
+ */
+export const BACKEND_HTTP_CLIENT = new InjectionToken<IBackendHttpClient>('BACKEND_HTTP_CLIENT');

package/projects/facecog-liveness-verification/src/lib/interfaces/backend-response.interface.ts

@@ -0,0 +1,9 @@
+/**
+ * Generic backend response for liveness check
+ */
+export interface BackendResponse {
+  isLive: boolean;
+  confidence: number;
+  details?: unknown;
+}
+