facecog-liveness-showcase 0.0.1

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

@@ -0,0 +1,38 @@
+<div class="liveness-verification-container">
+  <!-- Intro Step -->
+  <div *ngIf="currentStep === 'intro'" class="step-intro">
+    <facecog-pose-selection
+      [selectedPose]="selectedPose"
+      (startVerification)="startVerification()">
+    </facecog-pose-selection>
+  </div>
+
+  <!-- Camera Verification Steps (permission + preview) -->
+  <div *ngIf="currentStep === 'permission' || currentStep === 'preview'" class="step-camera">
+    <facecog-camera-verification
+      #cameraVerification
+      [selectedPose]="selectedPose"
+      [config]="config"
+      (verificationComplete)="onCaptureComplete($event)"
+      (cancelled)="cancelVerification()"
+      (error)="handleError($event)">
+    </facecog-camera-verification>
+  </div>
+
+  <!-- Processing and Result Steps -->
+  <div *ngIf="currentStep === 'processing' || currentStep === 'result'" class="step-result">
+    <lib-verification-result
+      *ngIf="result"
+      [result]="result"
+      [isProcessing]="currentStep === 'processing'"
+      [processingProgress]="processingProgress"
+      (retry)="resetVerification()"
+      (complete)="completeVerification()">
+    </lib-verification-result>
+    <!-- Processing spinner when no result yet -->
+    <div *ngIf="!result && currentStep === 'processing'" class="processing-spinner">
+      <ion-spinner name="crescent"></ion-spinner>
+      <p>Processing...</p>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,10 @@
+.liveness-verification-container {
+  padding: 16px;
+  min-height: 400px;
+}
+
+.step-intro,
+.step-camera,
+.step-result {
+  width: 100%;
+}

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

@@ -0,0 +1,233 @@
+import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { Subscription } from 'rxjs';
+import { LivenessConfigService } from '../../services/liveness-config.service';
+import { PoseSelectionService, SelectedPoseInfo } from '../../services/pose-selection.service';
+import { MockBackendService } from '../../services/backends/mock-backend.service';
+import { LivenessVerificationConfig } from '../../interfaces/liveness-verification-config.interface';
+import { VerificationStepChangeEvent } from '../../interfaces/verification-step-change-event.interface';
+import { VerificationProgressEvent } from '../../interfaces/verification-progress-event.interface';
+import { LivenessResult } from '../../interfaces/liveness-result.interface';
+import { PoseDefinition } from '../../interfaces/pose-definition.interface';
+import { VerificationFlowStep } from '../../types/verification-flow-step.type';
+import { LivenessBackend } from '../../types/liveness-backend.type';
+import { getPoseById } from '../../models/utils/pose.utils';
+import { PoseSelectionComponent } from '../pose-selection/pose-selection.component';
+import { CameraVerificationComponent, CapturedVerificationData } from '../camera-verification/camera-verification.component';
+import { VerificationResultComponent } from '../verification-result/verification-result.component';
+
+@Component({
+  selector: 'facecog-liveness-verification',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonicModule,
+    PoseSelectionComponent,
+    CameraVerificationComponent,
+    VerificationResultComponent
+  ],
+  templateUrl: './liveness-verification.component.html',
+  styleUrls: ['./liveness-verification.component.scss']
+})
+export class LivenessVerificationComponent implements OnInit, OnDestroy {
+  @ViewChild('cameraVerification') cameraVerification?: CameraVerificationComponent;
+
+  /** Configuration for the verification */
+  @Input() config?: Partial<LivenessVerificationConfig>;
+
+  /** Pose ID to verify (1-40) */
+  @Input() set pose(value: number | PoseDefinition | undefined) {
+    if (typeof value === 'number') {
+      this.selectedPose = getPoseById(value);
+    } else if (value) {
+      this.selectedPose = value;
+    }
+  }
+
+  /** Emitted when verification completes (success or failure) */
+  @Output() verificationComplete = new EventEmitter<LivenessResult>();
+
+  /** Emitted when an error occurs */
+  @Output() verificationError = new EventEmitter<Error>();
+
+  /** Emitted when the verification step changes */
+  @Output() stepChange = new EventEmitter<VerificationStepChangeEvent>();
+
+  /** Emitted during progress updates */
+  @Output() progress = new EventEmitter<VerificationProgressEvent>();
+
+  currentStep: VerificationFlowStep = 'intro';
+  selectedPose?: PoseDefinition;
+  result: LivenessResult | null = null;
+  processingProgress = 0;
+
+  private capturedFrames: string[] = [];
+  private videoBlob?: Blob;
+  private attemptCount = 0;
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    private configService: LivenessConfigService,
+    private poseSelection: PoseSelectionService,
+    private mockBackend: MockBackendService
+  ) {}
+
+  ngOnInit(): void {
+    if (this.config) {
+      this.configService.updateConfig(this.config);
+    }
+
+    const sub = this.poseSelection.selectedPose$.subscribe((info: SelectedPoseInfo | null) => {
+      if (info) {
+        this.selectedPose = info.pose;
+      }
+    });
+    this.subscriptions.push(sub);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  startVerification(): void {
+    this.setStep('permission');
+  }
+
+  onCaptureComplete(data: CapturedVerificationData): void {
+    this.capturedFrames = data.frames;
+    this.videoBlob = data.videoBlob;
+    this.attemptCount = data.attemptNumber;
+
+    this.setStep('processing');
+    this.processVerification();
+  }
+
+  cancelVerification(): void {
+    const cancelResult: LivenessResult = {
+      success: false,
+      confidence: 0,
+      verifiedImage: '',
+      error: 'User cancelled',
+      metadata: {
+        timestamp: new Date().toISOString(),
+        backend: 'mock' as LivenessBackend,
+        confidence: 0,
+        attemptNumber: this.attemptCount
+      }
+    };
+
+    this.verificationComplete.emit(cancelResult);
+    this.resetToIntro();
+  }
+
+  resetVerification(): void {
+    this.result = null;
+    this.capturedFrames = [];
+    this.videoBlob = undefined;
+    this.processingProgress = 0;
+
+    if (this.cameraVerification) {
+      this.cameraVerification.reset();
+    }
+
+    this.setStep('intro');
+  }
+
+  completeVerification(): void {
+    if (this.result) {
+      this.verificationComplete.emit(this.result);
+    }
+    this.resetVerification();
+  }
+
+  handleError(error: Error): void {
+    console.error('[LivenessVerification] Error:', error);
+    this.verificationError.emit(error);
+
+    this.result = {
+      success: false,
+      confidence: 0,
+      verifiedImage: '',
+      error: error.message,
+      metadata: {
+        timestamp: new Date().toISOString(),
+        backend: 'mock' as LivenessBackend,
+        confidence: 0,
+        attemptNumber: this.attemptCount
+      }
+    };
+
+    this.setStep('result');
+  }
+
+  private async processVerification(): Promise<void> {
+    this.processingProgress = 0;
+
+    const progressInterval = setInterval(() => {
+      this.processingProgress = Math.min(this.processingProgress + 10, 90);
+    }, 200);
+
+    try {
+      const primaryFrame = this.capturedFrames[0];
+
+      const response = await new Promise<{ isLive: boolean; confidence: number }>((resolve, reject) => {
+        this.mockBackend.verifyLiveness(primaryFrame, this.videoBlob).subscribe({
+          next: resolve,
+          error: reject
+        });
+      });
+
+      clearInterval(progressInterval);
+      this.processingProgress = 100;
+
+      this.result = {
+        success: response.isLive,
+        confidence: response.confidence,
+        verifiedImage: primaryFrame,
+        videoBlob: this.videoBlob,
+        metadata: {
+          timestamp: new Date().toISOString(),
+          backend: 'mock' as LivenessBackend,
+          confidence: response.confidence,
+          attemptNumber: this.attemptCount
+        }
+      };
+
+      this.setStep('result');
+    } catch (error) {
+      clearInterval(progressInterval);
+      this.result = {
+        success: false,
+        confidence: 0,
+        verifiedImage: this.capturedFrames[0] || '',
+        error: (error as Error).message || 'Verification failed',
+        metadata: {
+          timestamp: new Date().toISOString(),
+          backend: 'mock' as LivenessBackend,
+          confidence: 0,
+          attemptNumber: this.attemptCount
+        }
+      };
+      this.setStep('result');
+    }
+  }
+
+  private setStep(step: VerificationFlowStep): void {
+    const previousStep = this.currentStep;
+    this.currentStep = step;
+    this.stepChange.emit({
+      step,
+      previousStep,
+      timestamp: new Date()
+    });
+  }
+
+  private resetToIntro(): void {
+    this.result = null;
+    this.capturedFrames = [];
+    this.videoBlob = undefined;
+    this.processingProgress = 0;
+    this.setStep('intro');
+  }
+}

package/projects/facecog-liveness-verification/src/lib/components/pose-selection/pose-selection.component.html

@@ -0,0 +1,17 @@
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>Liveness Verification</ion-card-title>
+    <ion-card-subtitle>Verify your identity</ion-card-subtitle>
+  </ion-card-header>
+  <ion-card-content>
+    <div *ngIf="selectedPose" class="selected-pose">
+      <p>Selected pose: <strong>{{ selectedPose.name }}</strong></p>
+      <p class="pose-description">{{ selectedPose.description }}</p>
+    </div>
+    <p *ngIf="!selectedPose">No pose selected. Click start to begin.</p>
+    <ion-button expand="block" (click)="onStartVerification()">
+      <ion-icon name="camera" slot="start"></ion-icon>
+      Start Verification
+    </ion-button>
+  </ion-card-content>
+</ion-card>

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

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { PoseSelectionComponent } from './pose-selection.component';
+
+describe('PoseSelectionComponent', () => {
+  let component: PoseSelectionComponent;
+  let fixture: ComponentFixture<PoseSelectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommonModule, IonicModule.forRoot(), PoseSelectionComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PoseSelectionComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('selectedPose defaults to undefined', () => {
+    expect(component.selectedPose).toBeUndefined();
+  });
+
+  it('onStartVerification emits startVerification', () => {
+    const spy = jest.fn();
+    component.startVerification.subscribe(spy);
+    component.onStartVerification();
+    expect(spy).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,33 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { PoseDefinition } from '../../interfaces/pose-definition.interface';
+
+@Component({
+  selector: 'facecog-pose-selection',
+  standalone: true,
+  imports: [CommonModule, IonicModule],
+  templateUrl: './pose-selection.component.html',
+  styles: [`
+    .selected-pose {
+      margin-bottom: 16px;
+      padding: 12px;
+      background: var(--ion-color-light);
+      border-radius: 8px;
+    }
+    .pose-description {
+      font-size: 14px;
+      color: var(--ion-color-medium);
+      margin-top: 4px;
+    }
+  `]
+})
+export class PoseSelectionComponent {
+  @Input() selectedPose?: PoseDefinition;
+
+  @Output() startVerification = new EventEmitter<void>();
+
+  onStartVerification(): void {
+    this.startVerification.emit();
+  }
+}

package/projects/facecog-liveness-verification/src/lib/components/processing/processing.component.html

@@ -0,0 +1,17 @@
+<div class="processing-wrapper">
+  <div class="processing-container">
+    <div class="image-preview" *ngIf="capturedImage">
+      <img [src]="capturedImage" alt="Captured frame" />
+    </div>
+
+    <ion-spinner name="crescent" class="large-spinner"></ion-spinner>
+
+    <ion-text class="processing-text">
+      <h2>{{ message }}</h2>
+      <p>{{ subMessage }}</p>
+    </ion-text>
+
+    <ion-progress-bar [value]="progress / 100" color="primary"></ion-progress-bar>
+    <p class="progress-label">{{ Math.round(progress) }}% Complete</p>
+  </div>
+</div>

package/projects/facecog-liveness-verification/src/lib/components/processing/processing.component.scss

@@ -0,0 +1,156 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.processing-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: var(--ion-background-color, #fff);
+}
+
+.processing-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  padding: 24px;
+}
+
+.image-preview {
+  width: 240px;
+  height: 240px;
+  border-radius: 24px;
+  overflow: hidden;
+  margin-bottom: 32px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
+  position: relative;
+  animation: fadeIn 0.3s ease-out;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(254, 60, 114, 0.1) 0%, transparent 100%);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.large-spinner {
+  width: 72px;
+  height: 72px;
+  margin: 32px 0;
+  color: var(--ion-color-primary);
+  animation: spinnerPulse 1.5s ease-in-out infinite;
+}
+
+.processing-text {
+  text-align: center;
+  margin: 24px 0 32px;
+  max-width: 400px;
+
+  h2 {
+    color: var(--ion-color-primary);
+    margin-bottom: 16px;
+    font-size: 26px;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+  }
+
+  p {
+    color: var(--ion-color-medium);
+    font-size: 16px;
+    line-height: 1.6;
+    font-weight: 400;
+  }
+}
+
+ion-progress-bar {
+  width: 100%;
+  max-width: 400px;
+  margin: 32px 0 16px;
+  height: 6px;
+  border-radius: 3px;
+}
+
+.progress-label {
+  color: var(--ion-color-medium);
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes spinnerPulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+}
+
+@media (max-width: 768px) {
+  .image-preview {
+    width: 240px;
+    height: 240px;
+  }
+
+  .processing-text {
+    h2 {
+      font-size: 24px;
+    }
+
+    p {
+      font-size: 15px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .processing-container {
+    padding: 32px 20px;
+  }
+
+  .image-preview {
+    width: 200px;
+    height: 200px;
+    margin-bottom: 24px;
+  }
+
+  .large-spinner {
+    width: 64px;
+    height: 64px;
+    margin: 24px 0;
+  }
+
+  .processing-text {
+    margin: 16px 0 24px;
+
+    h2 {
+      font-size: 22px;
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+
+import { ProcessingComponent } from './processing.component';
+
+describe('ProcessingComponent', () => {
+  let component: ProcessingComponent;
+  let fixture: ComponentFixture<ProcessingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommonModule, IonicModule.forRoot(), ProcessingComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProcessingComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('has correct default inputs', () => {
+    expect(component.progress).toBe(0);
+    expect(component.message).toBe('Analyzing for liveness...');
+    expect(component.subMessage).toBe('This may take a moment.');
+    expect(component.capturedImage).toBeUndefined();
+  });
+
+  it('renders progress value', () => {
+    component.progress = 75;
+    component.message = 'Custom message';
+    fixture.detectChanges();
+
+    expect(component.Math.round(component.progress)).toBe(75);
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.textContent).toContain('75');
+    expect(compiled.textContent).toContain('Custom message');
+  });
+
+  it('exposes Math for template', () => {
+    expect(component.Math).toBe(Math);
+    expect(component.Math.round(42.7)).toBe(43);
+  });
+});

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

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'lib-processing',
+  standalone: true,
+  imports: [CommonModule, IonicModule],
+  templateUrl: './processing.component.html',
+  styleUrls: ['./processing.component.scss']
+})
+export class ProcessingComponent {
+  @Input() capturedImage?: string;
+  @Input() progress: number = 0;
+  @Input() message: string = 'Analyzing for liveness...';
+  @Input() subMessage: string = 'This may take a moment.';
+  Math = Math;
+}