facecog-liveness-showcase 0.0.1

package/projects/facecog-liveness-verification-test/src/app/home/home.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { HomePage } from './home.page';
+
+describe('HomePage', () => {
+  let component: HomePage;
+  let fixture: ComponentFixture<HomePage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [HomePage],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HomePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/facecog-liveness-verification-test/src/app/home/home.page.ts

@@ -0,0 +1,92 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule, ModalController } from '@ionic/angular';
+import {
+  LivenessConfigService,
+  LivenessResult,
+  PoseSelectionService,
+  PoseDefinition
+} from '@naniteninja/liveness-verification';
+import { VerificationModalComponent } from './verification-modal.component';
+
+const SAMPLE_POSE_IMAGE_DATA = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+  standalone: true,
+  imports: [CommonModule, FormsModule, IonicModule]
+})
+export class HomePage {
+  lastResult: LivenessResult | null = null;
+
+  constructor(
+    private modalCtrl: ModalController,
+    private configService: LivenessConfigService,
+    private poseSelectionService: PoseSelectionService
+  ) {}
+
+  async openVerificationModal(): Promise<void> {
+    this.configService.updateConfig({
+      backends: ['mock'],
+      enableVideoRecording: true,
+      autoCapture: true,
+      showIntroScreen: true,
+      captureFrameCount: 5
+    });
+
+    const modal = await this.modalCtrl.create({
+      component: VerificationModalComponent,
+      componentProps: { poseSpecific: false },
+      cssClass: 'verification-modal'
+    });
+
+    await modal.present();
+    const { data } = await modal.onDidDismiss();
+    if (data) {
+      this.lastResult = data;
+      console.log('[Showcase] Modal result:', data);
+    }
+  }
+
+  async openPoseSpecificModal(): Promise<void> {
+    const customPose: PoseDefinition = {
+      id: -1,
+      name: 'Smile',
+      description: 'Please smile at the camera to verify your identity',
+      category: 'face',
+      imagePath: SAMPLE_POSE_IMAGE_DATA,
+      detectionStrategy: 'combined',
+      difficulty: 'easy',
+      isCustom: true
+    };
+
+    this.configService.setCustomPose({
+      imageData: SAMPLE_POSE_IMAGE_DATA,
+      description: customPose.description
+    });
+    this.poseSelectionService.selectPoseByObject(customPose);
+    this.configService.updateConfig({
+      backends: ['mock'],
+      showIntroScreen: false,
+      enableVideoRecording: true,
+      autoCapture: true,
+      captureFrameCount: 5
+    });
+
+    const modal = await this.modalCtrl.create({
+      component: VerificationModalComponent,
+      componentProps: { poseSpecific: true },
+      cssClass: 'verification-modal'
+    });
+
+    await modal.present();
+    const { data } = await modal.onDidDismiss();
+    if (data) {
+      this.lastResult = data;
+      console.log('[Showcase] Pose-specific modal result:', data);
+    }
+  }
+}

package/projects/facecog-liveness-verification-test/src/app/home/verification-modal.component.ts

@@ -0,0 +1,106 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule, ModalController } from '@ionic/angular';
+import {
+  LivenessFlowComponent,
+  LivenessConfigService,
+  LivenessResult,
+  PoseSelectionService
+} from '@naniteninja/liveness-verification';
+
+@Component({
+  selector: 'app-verification-modal',
+  standalone: true,
+  imports: [CommonModule, IonicModule, LivenessFlowComponent],
+  template: `
+    <div class="modal-wrapper">
+      <div class="modal-header">
+        <h2>Liveness Check</h2>
+        <button (click)="dismiss()">
+          <ion-icon name="close"></ion-icon>
+        </button>
+      </div>
+      <div class="modal-body">
+        <facecog-liveness-flow
+          (verificationComplete)="onVerificationComplete($event)">
+        </facecog-liveness-flow>
+      </div>
+    </div>
+  `,
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      width: 100%;
+    }
+
+    .modal-wrapper {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      width: 100%;
+      background: var(--ion-background-color, #fff);
+    }
+
+    .modal-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      background: var(--ion-color-primary);
+      color: #fff;
+      flex-shrink: 0;
+      min-height: 48px;
+    }
+
+    .modal-header h2 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .modal-header button {
+      background: none;
+      border: none;
+      color: #fff;
+      font-size: 24px;
+      cursor: pointer;
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .modal-body {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+  `]
+})
+export class VerificationModalComponent implements OnInit {
+  @Input() poseSpecific = false;
+  @ViewChild(LivenessFlowComponent) livenessFlow!: LivenessFlowComponent;
+
+  constructor(
+    private modalCtrl: ModalController,
+    private configService: LivenessConfigService,
+    private poseSelectionService: PoseSelectionService
+  ) {}
+
+  ngOnInit(): void {
+    console.log('[VerificationModal] Opened, poseSpecific:', this.poseSpecific);
+  }
+
+  onVerificationComplete(result: any): void {
+    console.log('[VerificationModal] Verification complete:', result);
+    this.modalCtrl.dismiss(result as LivenessResult);
+  }
+
+  dismiss(): void {
+    this.modalCtrl.dismiss(null);
+  }
+}

package/projects/facecog-liveness-verification-test/src/assets/images/poses/README.md

@@ -0,0 +1,77 @@
+# Pose Reference Images
+
+This directory contains reference images for all 40 pose options.
+
+## Image Specifications
+- **Format:** PNG with transparency
+- **Size:** 200x200px (optimized for grid display)
+- **Style:** Simple, clear illustration showing the pose
+- **Background:** Transparent or white
+
+## Pose Categories
+
+### Face Expressions & Movements (1-6)
+- 01-face-straight.png - Face straight, hold still
+- 02-blink-once.png - Blink once, naturally
+- 03-blink-twice.png - Blink twice, quickly
+- 04-open-mouth.png - Open mouth, then close
+- 05-smile.png - Smile, then return to neutral
+- 06-raise-eyebrows.png - Raise eyebrows ("surprised" look)
+
+### Head Movements (7-14)
+- 07-turn-left.png - Turn head slowly left (profile)
+- 08-turn-right.png - Turn head slowly right (profile)
+- 09-look-up.png - Look up with just your eyes
+- 10-look-down.png - Look down with just your eyes
+- 11-tilt-left.png - Tilt head slightly left (ear to shoulder)
+- 12-tilt-right.png - Tilt head slightly right (ear to shoulder)
+- 13-nod.png - Nod up and down once or twice
+- 14-shake-head.png - Shake head left to right once or twice
+
+### Eye & Face Tracking (15-20)
+- 15-follow-dot.png - Follow a moving dot/marker with your eyes
+- 16-wink.png - Hold a wink (close one eye)
+- 17-move-closer.png - Move your face closer, then back to center
+- 18-speak-phrase.png - Speak a short random phrase (audio+video)
+- 19-rotate-face.png - Slowly rotate face under normal light (passive liveness)
+- 20-center-face.png - Keep face centered while the phone moves slightly (parallax)
+
+### Basic Hand Gestures (21-29)
+- 21-right-palm.png - Show right hand, palm to camera
+- 22-left-palm.png - Show left hand, palm to camera
+- 23-wave-right.png - Wave your right hand slowly
+- 24-thumbs-up-right.png - Thumbs-up with right hand
+- 25-thumbs-up-left.png - Thumbs-up with left hand
+- 26-ok-sign-right.png - "OK" sign with right hand
+- 27-peace-sign-left.png - "V/peace" sign with left hand
+- 28-three-fingers-right.png - Hold up three fingers (right hand)
+- 29-five-fingers-left.png - Hold up five fingers (left hand)
+
+### Face + Hand Combined Poses (30-40)
+- 30-touch-nose-right.png - Touch your nose with right index finger
+- 31-touch-chin-left.png - Touch your chin with left index finger
+- 32-touch-right-cheek.png - Touch your right cheek with right palm
+- 33-touch-left-cheek.png - Touch your left cheek with left palm
+- 34-cover-right-eye.png - Cover right eye with right hand, then uncover
+- 35-cover-mouth.png - Cover your mouth with one hand, then uncover
+- 36-frame-face.png - Frame your face with both hands (sides of face)
+- 37-hand-ear-shoulder.png - Move right hand from ear level to shoulder level
+- 38-cross-arms.png - Cross arms briefly, then return hands down
+- 39-clap-once.png - Clap once softly in view
+- 40-point-left-right.png - Point to left edge, then right edge of screen with index finger
+
+## Creating Images
+
+You can create these images using:
+1. **Design Tools:** Figma, Adobe Illustrator, or Sketch
+2. **Stock Icons:** Flaticon, Noun Project, or custom illustration
+3. **AI Generation:** Use DALL-E, Midjourney, or Stable Diffusion
+4. **Photography:** Take actual photos demonstrating each pose
+
+### Recommended Approach
+For production, use simple line-art illustrations or icon-style graphics that clearly show:
+- The pose position
+- Direction of movement (if applicable)
+- Key body parts involved
+
+For now, the application will gracefully handle missing images with a fallback icon display.

package/projects/facecog-liveness-verification-test/src/assets/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

package/projects/facecog-liveness-verification-test/src/environments/environment.prod.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  apiUrl: 'https://api.test.thecyrano.app/api/server-3'
+};

package/projects/facecog-liveness-verification-test/src/environments/environment.ts

@@ -0,0 +1,17 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+  apiUrl: 'https://api.test.thecyrano.app/api/server-3'
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.