facecog-liveness-showcase 0.0.1

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

@@ -0,0 +1,524 @@
+import { Component, OnInit, OnDestroy, EventEmitter, Output, Input, ViewChild, ElementRef, Optional, Inject, NgZone, signal, computed, ChangeDetectionStrategy } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+
+import { VideoRecorderService } from '../../services/video-recorder.service';
+import { PoseMatchingService } from '../../services/pose-detection/pose-matching.service';
+import { LivenessConfigService } from '../../services/liveness-config.service';
+import { ICameraProvider, CAMERA_PROVIDER, BrightnessData } from '../../interfaces/camera-provider.interface';
+import { ReferencePose } from '../../services/pose-detection/reference-pose.service';
+import { SelectedPoseInfo } from '../../services/pose-selection.service';
+import { PoseDefinition } from '../../interfaces/pose-definition.interface';
+
+@Component({
+  selector: 'lib-live-preview',
+  standalone: true,
+  imports: [CommonModule, IonicModule],
+  templateUrl: './live-preview.component.html',
+  styleUrls: ['./live-preview.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LivePreviewComponent implements OnInit, OnDestroy {
+  @ViewChild('videoElement', { static: false }) videoElement!: ElementRef<HTMLVideoElement>;
+  @ViewChild('canvasOverlay', { static: false }) canvasOverlay!: ElementRef<HTMLCanvasElement>;
+  @Input() exampleImageUrl?: string;
+  @Input() exampleImageBase64?: string;
+  @Input() referencePose?: ReferencePose;
+  @Input() selectedPose?: SelectedPoseInfo;
+  @Input() hideCancel = false;
+  @Output() captureComplete = new EventEmitter<{ frames: string[], videoBlob?: Blob }>();
+  @Output() cancelled = new EventEmitter<void>();
+
+  readonly stream = signal<MediaStream | null>(null);
+  readonly matchProgress = signal(0);
+  readonly statusMessage = signal('Position yourself in the frame...');
+  readonly isMatching = signal(false);
+  private matchingInterval: any;
+  private capturedFrames: string[] = [];
+  private canvasAnimationFrame: number | null = null;
+
+  readonly brightnessLevel = signal(128);
+  readonly isLowLight = signal(false);
+  readonly isTooLight = signal(false);
+  readonly lightingWarning = signal('');
+  private brightnessMonitoringId: number | null = null;
+
+  private readonly circumference = 1515;
+
+  readonly progressOffset = computed(() => {
+    const progress = this.matchProgress() / 100;
+    return this.circumference * (1 - progress);
+  });
+
+  readonly showPoseOverlay = signal(false);
+  readonly currentPoseAction = signal<string>('smile');
+  readonly currentPoseDescription = signal<string>('Smile naturally');
+
+  readonly cameraError = signal<'none' | 'not-found' | 'not-readable' | 'denied' | 'generic'>('none');
+
+  readonly showFollowDot = signal(false);
+  readonly dotX = signal(0);
+  readonly dotY = signal(0);
+  private dotAnimationInterval: any = null;
+  private dotPositions = [
+    { x: 0.5, y: 0.2 },
+    { x: 0.8, y: 0.3 },
+    { x: 0.8, y: 0.7 },
+    { x: 0.5, y: 0.8 },
+    { x: 0.2, y: 0.7 },
+    { x: 0.2, y: 0.3 },
+  ];
+  private currentDotIndex = 0;
+
+  constructor(
+    private videoRecorder: VideoRecorderService,
+    private poseMatching: PoseMatchingService,
+    private configService: LivenessConfigService,
+    private ngZone: NgZone,
+    @Optional() @Inject(CAMERA_PROVIDER) private cameraProvider?: ICameraProvider
+  ) {}
+
+  async ngOnInit() {
+    try {
+      this.statusMessage.set('Loading face detection models...');
+      await this.poseMatching.loadModels();
+
+      const config = this.configService.getConfig();
+      if (config.exampleImageUrl) {
+        try {
+          this.statusMessage.set('Loading reference image...');
+          await this.poseMatching.loadReferenceImage(config.exampleImageUrl);
+          console.log('Reference image loaded successfully');
+        } catch (refError) {
+          console.warn('Failed to load reference image, continuing without pose matching:', refError);
+        }
+      }
+
+      await this.startCamera();
+    } catch (error) {
+      console.error('Initialization error:', error);
+      this.statusMessage.set('Failed to initialize. Please refresh the page.');
+    }
+  }
+
+  async startCamera() {
+    try {
+      this.statusMessage.set('Requesting camera access...');
+      const mediaStream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: 'user', width: { ideal: 1280 }, height: { ideal: 720 } },
+        audio: false
+      });
+      this.stream.set(mediaStream);
+
+      setTimeout(() => {
+        if (this.videoElement?.nativeElement) {
+          this.videoElement.nativeElement.srcObject = mediaStream;
+        }
+      }, 100);
+
+      const config = this.configService.getConfig();
+      if (config.enableVideoRecording) {
+        try {
+          await this.videoRecorder.startRecording(mediaStream);
+        } catch (recordError) {
+          console.warn('Video recording failed, continuing without recording:', recordError);
+        }
+      }
+
+      setTimeout(() => {
+        if (this.videoElement?.nativeElement) {
+          this.startBrightnessMonitoring();
+        }
+      }, 500);
+
+      this.statusMessage.set('Position yourself in the frame...');
+      this.startPoseMatching();
+    } catch (error: any) {
+      console.error('Failed to start camera:', error);
+
+      if (error.name === 'NotAllowedError') {
+        this.cameraError.set('denied');
+        this.statusMessage.set('Camera access denied. Please grant permission and try again.');
+      } else if (error.name === 'NotFoundError') {
+        this.cameraError.set('not-found');
+        this.statusMessage.set('No camera found. Please connect a camera and try again.');
+      } else if (error.name === 'NotReadableError') {
+        this.cameraError.set('not-readable');
+        this.statusMessage.set('Camera is already in use by another application.');
+      } else {
+        this.cameraError.set('generic');
+        this.statusMessage.set('Camera error. Please check permissions and try again.');
+      }
+    }
+  }
+
+  async retryCamera(): Promise<void> {
+    this.cameraError.set('none');
+    this.statusMessage.set('Retrying camera access...');
+    await this.startCamera();
+  }
+
+  startPoseMatching() {
+    this.poseMatching.resetActionState();
+    this.showPoseOverlay.set(true);
+
+    if (this.selectedPose) {
+      this.currentPoseAction.set(this.getPoseAction(this.selectedPose.pose));
+      this.currentPoseDescription.set(this.selectedPose.pose.description);
+
+      console.log('[Live Preview] Starting single pose detection');
+      console.log('[Live Preview] Pose:', this.selectedPose.pose.name);
+      console.log('[Live Preview] Category:', this.selectedPose.pose.category);
+      console.log('[Live Preview] Description:', this.currentPoseDescription());
+      console.log('[Live Preview] Action:', this.currentPoseAction());
+
+      if (this.currentPoseAction() === 'follow-dot') {
+        this.startDotAnimation();
+      }
+
+      if (this.selectedPose.pose.poseKeypoints && this.selectedPose.pose.poseKeypoints.length > 0) {
+        console.log('[Live Preview] Setting static pose keypoints for automatic detection');
+        this.poseMatching.setStaticPoseKeypoints(this.selectedPose.pose.poseKeypoints);
+        this.statusMessage.set(`Position yourself to match the pose: ${this.selectedPose.pose.name}`);
+      } else {
+        console.log('[Live Preview] No keypoints available - using fallback detection');
+        this.poseMatching.setStaticPoseKeypoints(null);
+        this.statusMessage.set(`Get ready: ${this.currentPoseDescription()}`);
+      }
+    } else if (this.referencePose) {
+      this.currentPoseAction.set('custom-pose');
+      this.currentPoseDescription.set(this.referencePose.poseDescription);
+      console.log('[Live Preview] Starting custom pose detection');
+      console.log('[Live Preview] Description:', this.currentPoseDescription());
+      this.statusMessage.set(`Get ready: ${this.currentPoseDescription()}`);
+    } else {
+      this.currentPoseAction.set('smile');
+      this.currentPoseDescription.set('Smile naturally');
+      console.log('[Live Preview] Starting default pose detection (smile)');
+      this.statusMessage.set('Get ready: Smile naturally');
+    }
+
+    this.matchingInterval = setInterval(async () => {
+      if (!this.videoElement?.nativeElement || !this.stream()) {
+        console.warn('[Live Preview] Video element or stream not available');
+        return;
+      }
+
+      try {
+        const result = await this.poseMatching.detectAction(
+          this.videoElement.nativeElement,
+          this.currentPoseAction() as any
+        );
+
+        this.statusMessage.set(result.message);
+        this.matchProgress.set(result.progress * 100);
+
+        console.log(`[Live Preview] ${this.currentPoseAction()} - Progress: ${(result.progress * 100).toFixed(1)}%, Completed: ${result.completed}`);
+
+        if (result.completed) {
+          console.log(`[Live Preview] ✓ Pose complete! ${this.currentPoseDescription()} detected - capturing...`);
+          this.statusMessage.set('Perfect! Capturing...');
+          await this.captureFrames();
+          return;
+        }
+      } catch (error) {
+        console.error(`[Live Preview] ${this.currentPoseAction()} detection error:`, error);
+        this.statusMessage.set('Unable to detect pose. Please ensure good lighting.');
+      }
+    }, 200);
+  }
+
+  private getPoseAction(pose: PoseDefinition): string {
+    if (pose.poseKeypoints && pose.poseKeypoints.length > 0) {
+      console.log(`[Live Preview] Pose "${pose.name}" has static keypoints - using automatic detection`);
+      return 'custom-pose';
+    }
+
+    const poseName = pose.name.toLowerCase();
+
+    if (poseName.includes('palm')) {
+      const handedness = poseName.includes('right') ? 'Right' : poseName.includes('left') ? 'Left' : 'Any';
+      this.poseMatching.setExpectedGesture('palm', handedness);
+      console.log(`[Live Preview] Palm gesture with handedness: ${handedness}`);
+      return 'hand-gesture';
+    }
+    if (poseName.includes('thumbs up') || poseName.includes('thumbs-up')) {
+      const handedness = poseName.includes('right') ? 'Right' : poseName.includes('left') ? 'Left' : 'Any';
+      this.poseMatching.setExpectedGesture('thumbs_up', handedness);
+      console.log(`[Live Preview] Thumbs up gesture with handedness: ${handedness}`);
+      return 'hand-gesture';
+    }
+    if (poseName.includes('peace')) {
+      const handedness = poseName.includes('right') ? 'Right' : poseName.includes('left') ? 'Left' : 'Any';
+      this.poseMatching.setExpectedGesture('peace', handedness);
+      console.log(`[Live Preview] Peace gesture with handedness: ${handedness}`);
+      return 'hand-gesture';
+    }
+    if (poseName.includes('ok sign') || poseName.includes('ok-sign')) {
+      const handedness = poseName.includes('right') ? 'Right' : poseName.includes('left') ? 'Left' : 'Any';
+      this.poseMatching.setExpectedGesture('ok', handedness);
+      console.log(`[Live Preview] OK gesture with handedness: ${handedness}`);
+      return 'hand-gesture';
+    }
+    if (poseName.includes('fist')) {
+      const handedness = poseName.includes('right') ? 'Right' : poseName.includes('left') ? 'Left' : 'Any';
+      this.poseMatching.setExpectedGesture('fist', handedness);
+      console.log(`[Live Preview] Fist gesture with handedness: ${handedness}`);
+      return 'hand-gesture';
+    }
+    if (poseName.includes('three fingers') || poseName.includes('three-fingers')) {
+      const handedness = poseName.includes('right') ? 'Right' : poseName.includes('left') ? 'Left' : 'Any';
+      this.poseMatching.setExpectedGesture('three', handedness);
+      console.log(`[Live Preview] Three fingers gesture with handedness: ${handedness}`);
+      return 'hand-gesture';
+    }
+    if (poseName.includes('five fingers') || poseName.includes('five-fingers')) {
+      const handedness = poseName.includes('right') ? 'Right' : poseName.includes('left') ? 'Left' : 'Any';
+      this.poseMatching.setExpectedGesture('palm', handedness);
+      console.log(`[Live Preview] Five fingers (palm) gesture with handedness: ${handedness}`);
+      return 'hand-gesture';
+    }
+
+    if (poseName.includes('smile')) return 'smile';
+    if (poseName.includes('open') && poseName.includes('mouth')) return 'open-mouth';
+    if (poseName.includes('raise') && poseName.includes('eyebrow')) return 'raise-eyebrows';
+    if (poseName.includes('blink') && poseName.includes('twice')) return 'blink-twice';
+    if (poseName.includes('blink')) return 'blink';
+    if (poseName.includes('wink')) return 'wink';
+    if (poseName.includes('follow') && poseName.includes('dot')) return 'follow-dot';
+    if (poseName.includes('speak') && poseName.includes('phrase')) return 'speak-phrase';
+    if (poseName.includes('look') && poseName.includes('up')) return 'look-up';
+    if (poseName.includes('look') && poseName.includes('down')) return 'look-down';
+    if (poseName.includes('turn') && poseName.includes('left')) return 'turn-left';
+    if (poseName.includes('turn') && poseName.includes('right')) return 'turn-right';
+    if (poseName.includes('tilt') && poseName.includes('left')) return 'tilt-left';
+    if (poseName.includes('tilt') && poseName.includes('right')) return 'tilt-right';
+    if (poseName.includes('nod')) return 'nod';
+    if (poseName.includes('shake') && poseName.includes('head')) return 'shake-head';
+    if (poseName.includes('rotate') && poseName.includes('face')) return 'rotate-face';
+    if (poseName.includes('straight') || poseName.includes('center')) return 'face-center';
+
+    if (poseName.includes('wave')) {
+      console.log(`[Live Preview] "${pose.name}" will use Wave detection`);
+      return 'wave';
+    }
+    if (poseName.includes('clap')) {
+      console.log(`[Live Preview] "${pose.name}" will use Clap detection`);
+      return 'clap';
+    }
+    if (poseName.includes('cross') && poseName.includes('arms')) {
+      console.log(`[Live Preview] "${pose.name}" will use Cross Arms detection`);
+      return 'cross-arms';
+    }
+    if (poseName.includes('point')) {
+      console.log(`[Live Preview] "${pose.name}" will use Point detection`);
+      return 'point';
+    }
+
+    if (poseName.includes('touch') || poseName.includes('cover') || poseName.includes('frame')) {
+      console.log(`[Live Preview] "${pose.name}" will use Combined Pose detection`);
+      const poseType = pose.name.toLowerCase().replace(/ /g, '-');
+      this.poseMatching.setCombinedPoseType(poseType);
+      return 'combined-pose';
+    }
+    if (poseName.includes('hand') && poseName.includes('ear')) {
+      console.log(`[Live Preview] "${pose.name}" will use Combined Pose detection`);
+      this.poseMatching.setCombinedPoseType('hand-ear-to-shoulder');
+      return 'combined-pose';
+    }
+
+    if (pose.category === 'face') return 'smile';
+    if (pose.category === 'head') return 'face-center';
+
+    console.warn(`[Live Preview] Pose "${pose.name}" has no detection strategy - falling back to custom pose`);
+    return 'custom-pose';
+  }
+
+
+  async captureFrames() {
+    clearInterval(this.matchingInterval);
+    this.stopDotAnimation();
+    this.statusMessage.set('Perfect! Capturing...');
+    this.isMatching.set(true);
+
+    const config = this.configService.getConfig();
+    const frameCount = config.captureFrameCount || 5;
+
+    for (let i = 0; i < frameCount; i++) {
+      await new Promise(resolve => setTimeout(resolve, 100));
+      const frame = this.poseMatching.frameToBase64(this.videoElement.nativeElement);
+      this.capturedFrames.push(frame);
+    }
+
+    let videoBlob: Blob | undefined;
+    if (config.enableVideoRecording && this.videoRecorder.isRecording()) {
+      const recording = await this.videoRecorder.stopRecording();
+      videoBlob = recording.blob;
+    }
+
+    this.ngZone.run(() => {
+      this.captureComplete.emit({
+        frames: this.capturedFrames,
+        videoBlob
+      });
+    });
+  }
+
+  manualCapture() {
+    this.captureFrames();
+  }
+
+  onCancel() {
+    this.cancelled.emit();
+  }
+
+  private startBrightnessMonitoring() {
+    if (!this.videoElement?.nativeElement) {
+      console.warn('[Brightness] Video element not available');
+      return;
+    }
+
+    console.log('[Brightness] Starting brightness monitoring');
+
+    if (this.cameraProvider?.startBrightnessMonitoring) {
+      this.brightnessMonitoringId = this.cameraProvider.startBrightnessMonitoring(
+        this.videoElement.nativeElement,
+        (data) => this.handleBrightnessData(data),
+        1000
+      );
+    } else {
+      this.brightnessMonitoringId = window.setInterval(() => {
+        const data = this.analyzeBrightness(this.videoElement.nativeElement);
+        this.handleBrightnessData(data);
+      }, 1000);
+    }
+  }
+
+  private handleBrightnessData(data: BrightnessData) {
+    this.brightnessLevel.set(data.brightness);
+    this.isLowLight.set(data.isLowLight);
+    this.isTooLight.set(data.isTooLight);
+
+    if (data.isLowLight) {
+      this.lightingWarning.set('Low light detected. Please move to a brighter area.');
+      console.log(`[Brightness] Low light: ${data.brightness.toFixed(1)}/255`);
+    } else if (data.isTooLight) {
+      this.lightingWarning.set('Too bright. Please avoid direct light sources.');
+      console.log(`[Brightness] Too bright: ${data.brightness.toFixed(1)}/255`);
+    } else {
+      this.lightingWarning.set('');
+    }
+  }
+
+  private analyzeBrightness(videoElement: HTMLVideoElement): BrightnessData {
+    const canvas = document.createElement('canvas');
+    const width = videoElement.videoWidth;
+    const height = videoElement.videoHeight;
+
+    const sampleWidth = Math.min(width, 320);
+    const sampleHeight = Math.min(height, 240);
+
+    canvas.width = sampleWidth;
+    canvas.height = sampleHeight;
+
+    const context = canvas.getContext('2d');
+    if (!context) {
+      console.warn('Could not get canvas context for brightness analysis');
+      return { brightness: 128, isLowLight: false, isTooLight: false };
+    }
+
+    context.drawImage(videoElement, 0, 0, sampleWidth, sampleHeight);
+
+    try {
+      const imageData = context.getImageData(0, 0, sampleWidth, sampleHeight);
+      const data = imageData.data;
+
+      let totalBrightness = 0;
+      const pixelCount = data.length / 4;
+
+      for (let i = 0; i < data.length; i += 4) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const brightness = (0.299 * r + 0.587 * g + 0.114 * b);
+        totalBrightness += brightness;
+      }
+
+      const averageBrightness = totalBrightness / pixelCount;
+
+      const LOW_LIGHT_THRESHOLD = 60;
+      const TOO_BRIGHT_THRESHOLD = 200;
+
+      return {
+        brightness: averageBrightness,
+        isLowLight: averageBrightness < LOW_LIGHT_THRESHOLD,
+        isTooLight: averageBrightness > TOO_BRIGHT_THRESHOLD
+      };
+    } catch (error) {
+      console.warn('Error analyzing brightness:', error);
+      return { brightness: 128, isLowLight: false, isTooLight: false };
+    }
+  }
+
+  private stopBrightnessMonitoring() {
+    if (this.brightnessMonitoringId !== null) {
+      if (this.cameraProvider?.stopBrightnessMonitoring) {
+        this.cameraProvider.stopBrightnessMonitoring(this.brightnessMonitoringId);
+      } else {
+        clearInterval(this.brightnessMonitoringId);
+      }
+      this.brightnessMonitoringId = null;
+      console.log('[Brightness] Stopped brightness monitoring');
+    }
+  }
+
+  private startDotAnimation() {
+    this.showFollowDot.set(true);
+    this.currentDotIndex = 0;
+
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    this.updateDotPosition(viewportWidth, viewportHeight);
+
+    this.dotAnimationInterval = setInterval(() => {
+      this.currentDotIndex = (this.currentDotIndex + 1) % this.dotPositions.length;
+      this.updateDotPosition(viewportWidth, viewportHeight);
+      console.log(`[Follow Dot] Moving to position ${this.currentDotIndex}`);
+    }, 1500);
+
+    console.log('[Follow Dot] Animation started');
+  }
+
+  private updateDotPosition(viewportWidth: number, viewportHeight: number) {
+    const pos = this.dotPositions[this.currentDotIndex];
+    this.dotX.set(pos.x * viewportWidth);
+    this.dotY.set(pos.y * viewportHeight);
+  }
+
+  private stopDotAnimation() {
+    if (this.dotAnimationInterval) {
+      clearInterval(this.dotAnimationInterval);
+      this.dotAnimationInterval = null;
+    }
+    this.showFollowDot.set(false);
+    console.log('[Follow Dot] Animation stopped');
+  }
+
+  ngOnDestroy() {
+    if (this.matchingInterval) {
+      clearInterval(this.matchingInterval);
+    }
+    if (this.canvasAnimationFrame) {
+      cancelAnimationFrame(this.canvasAnimationFrame);
+    }
+    this.stopBrightnessMonitoring();
+    this.stopDotAnimation();
+    const currentStream = this.stream();
+    if (currentStream) {
+      currentStream.getTracks().forEach(track => track.stop());
+    }
+    this.videoRecorder.cleanup();
+    this.poseMatching.cleanup();
+  }
+}

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

@@ -0,0 +1,73 @@
+<div class="liveness-flow-container">
+  <lib-intro
+    *ngIf="currentStep() === 'intro'"
+    [exampleImageUrl]="config.exampleImageUrl"
+    [exampleImageBase64]="config.exampleImageBase64"
+    [poseSpecificMode]="poseSpecificMode"
+    (startClicked)="onStartClicked()"
+    (cancelClicked)="onCancel()"
+    (referencePoseUploaded)="onReferencePoseUploaded($event)"
+    (poseSelected)="onPoseSelected($event)"
+    (awsFaceLivenessToggled)="onAwsFaceLivenessToggled($event)">
+  </lib-intro>
+
+  <lib-camera-permission
+    *ngIf="currentStep() === 'permission'"
+    [hideCancel]="poseSpecificMode"
+    [poseSpecificMode]="poseSpecificMode"
+    (permissionGranted)="onPermissionGranted()"
+    (permissionDenied)="onPermissionDenied()">
+  </lib-camera-permission>
+
+  <lib-live-preview
+    *ngIf="currentStep() === 'preview'"
+    [exampleImageUrl]="config.exampleImageUrl"
+    [exampleImageBase64]="config.exampleImageBase64"
+    [referencePose]="referencePose"
+    [selectedPose]="selectedPose"
+    [hideCancel]="poseSpecificMode"
+    (captureComplete)="onCaptureComplete($event)"
+    (cancelled)="onCancel()">
+  </lib-live-preview>
+
+  <facecog-facetec-scan
+    *ngIf="currentStep() === 'facetec'"
+    [sessionId]="verificationSessionId"
+    [deviceKey]="deviceKey"
+    [autoStart]="true"
+    (scanComplete)="onFaceTecScanComplete($event)"
+    (scanCancelled)="onFaceTecScanCancelled()">
+  </facecog-facetec-scan>
+
+  <!-- AWS Face Liveness: Dynamic component via injection token OR direct import fallback -->
+  <ng-container *ngIf="currentStep() === 'aws-liveness'">
+    <!-- Container for dynamically injected component -->
+    <ng-template #awsLivenessContainer></ng-template>
+
+    <!-- Fallback to direct component if no injected component -->
+    <facecog-aws-face-liveness
+      *ngIf="!awsFaceLivenessComponent"
+      [region]="awsRegion"
+      [autoStart]="true"
+      [showCancelButton]="true"
+      (scanComplete)="onAwsFaceLivenessComplete($event)"
+      (scanCancelled)="onAwsFaceLivenessCancelled()">
+    </facecog-aws-face-liveness>
+  </ng-container>
+
+  <lib-processing
+    *ngIf="currentStep() === 'processing'"
+    [capturedImage]="capturedFrames[0]"
+    [progress]="processingProgress()">
+  </lib-processing>
+
+  <lib-verification-result
+    *ngIf="currentStep() === 'result' && result()"
+    [result]="result()!"
+    [poseSpecificMode]="poseSpecificMode"
+    (doneClicked)="onDone()"
+    (retryClicked)="onRetry()"
+    (autoRetry)="onAutoRetry()"
+    (autoComplete)="onAutoComplete($event)">
+  </lib-verification-result>
+</div>

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

@@ -0,0 +1,19 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background: var(--ion-background-color, #fff);
+}
+
+.liveness-flow-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  position: relative;
+  background: var(--ion-background-color, #fff);
+}