facecog-liveness-showcase 0.0.1

package/projects/facecog-liveness-verification/src/lib/services/pose-detection/pose-matching.service.ts

@@ -0,0 +1,2370 @@
+import { Injectable } from '@angular/core';
+import { PoseMatchResult } from '../../interfaces/pose-match-result.interface';
+import { LivenessAction } from '../../types/liveness-action.type';
+import { LivenessActionResult } from '../../interfaces/liveness-action-result.interface';
+import { FaceLandmarker, FilesetResolver, FaceLandmarkerResult } from '@mediapipe/tasks-vision';
+import { OpenposeService } from './openpose.service';
+import { PoseComparisonService } from './pose-comparison.service';
+import { ReferencePoseService, ReferencePose } from './reference-pose.service';
+import { HandGestureDetectionService } from './hand-gesture-detection.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PoseMatchingService {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private faceLandmarker: FaceLandmarker | null = null;
+  private modelsLoaded = false;
+
+  // Blink detection state
+  private maxEAR: number = 0;
+  private minEARDuringBlink: number = Infinity;
+  private blinkDetected: boolean = false;
+  private frameCount: number = 0;
+  private blinkCount: number = 0;
+  private lastBlinkTime: number = 0;
+
+  // Nod detection state
+  private initialPitch: number | null = null;
+  private nodDirection: 'up' | 'down' | null = null;
+
+  // Shake head detection state
+  private initialYaw: number | null = null;
+  private shakeDirection: 'left' | 'right' | null = null;
+  private shakeCount: number = 0;
+
+  // Smile detection state
+  private smileDetected: boolean = false;
+
+  // Open mouth detection state
+  private openMouthDetected: boolean = false;
+
+  // Raise eyebrows detection state
+  private eyebrowsRaisedDetected: boolean = false;
+
+  // Wink detection state
+  private winkDetected: boolean = false;
+
+  // Follow dot detection state
+  private followDotMovements: number = 0;
+  private lastGazeDirection: string | null = null;
+
+  // Speak phrase detection state
+  private mouthMovementCount: number = 0;
+  private lastMouthOpenness: number = 0;
+
+  // Smile + Thumbs Up detection state
+  private smileThumbsUpDetected: boolean = false;
+  private thumbsUpDetected: boolean = false;
+
+  // Custom pose matching state
+  private customPoseDetected: boolean = false;
+
+  // Hand gesture detection state
+  private handGestureDetected: boolean = false;
+  private expectedGesture: string | null = null;
+  private expectedHandedness: 'Left' | 'Right' | 'Any' = 'Any';
+
+  // Movement gesture detection state
+  private waveDetected: boolean = false;
+  private waveDirection: 'left' | 'right' | null = null;
+  private previousWristX: number | null = null;
+  private waveCount: number = 0;
+
+  private clapDetected: boolean = false;
+  private handsApart: boolean = false;
+
+  private crossArmsDetected: boolean = false;
+
+  private pointDetected: boolean = false;
+  private pointedLeft: boolean = false;
+  private pointedRight: boolean = false;
+
+  // Combined pose detection state
+  private combinedPoseDetected: boolean = false;
+  private combinedPoseType: string | null = null;
+
+  // Rotate face detection state
+  private rotationSequence: string[] = []; // Track sequence: center -> left -> center -> right -> center
+  private lastRotationYaw: number = 0;
+  private rotationStage: 'center' | 'left' | 'right' | 'complete' = 'center';
+  private rotateFaceDetected: boolean = false;
+
+  constructor(
+    private openposeService: OpenposeService,
+    private poseComparisonService: PoseComparisonService,
+    private referencePoseService: ReferencePoseService,
+    private handGestureService: HandGestureDetectionService
+  ) {
+    this.canvas = document.createElement('canvas');
+    this.ctx = this.canvas.getContext('2d')!;
+  }
+
+  /**
+   * Load MediaPipe Face Landmarker models
+   */
+  async loadModels(): Promise<void> {
+    if (this.modelsLoaded) return;
+
+    try {
+      console.log('[MediaPipe] Initializing Face Landmarker...');
+
+      const vision = await FilesetResolver.forVisionTasks(
+        'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm'
+      );
+
+      // Try GPU first, fallback to CPU for Safari compatibility
+      try {
+        this.faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
+          baseOptions: {
+            modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task',
+            delegate: 'GPU'
+          },
+          runningMode: 'VIDEO',
+          numFaces: 1,
+          outputFaceBlendshapes: true,
+          outputFacialTransformationMatrixes: true
+        });
+        console.log('[MediaPipe] Face Landmarker loaded with GPU delegate');
+      } catch (gpuError) {
+        console.warn('[MediaPipe] GPU delegate failed, trying CPU for Safari compatibility:', gpuError);
+        this.faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
+          baseOptions: {
+            modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task',
+            delegate: 'CPU'
+          },
+          runningMode: 'VIDEO',
+          numFaces: 1,
+          outputFaceBlendshapes: true,
+          outputFacialTransformationMatrixes: true
+        });
+        console.log('[MediaPipe] Face Landmarker loaded with CPU delegate (Safari fallback)');
+      }
+
+      this.modelsLoaded = true;
+      console.log('[MediaPipe] Face Landmarker loaded successfully');
+    } catch (error) {
+      console.error('[MediaPipe] Failed to load models:', error);
+      throw new Error('Failed to load face detection models');
+    }
+  }
+
+  /**
+   * Load and process the reference image (not needed for MediaPipe blendshapes approach)
+   * Kept for API compatibility but not used
+   */
+  async loadReferenceImage(imageUrl: string): Promise<void> {
+    console.log('[MediaPipe] Reference image not needed for blendshape-based detection');
+    // No-op for MediaPipe - we use blendshapes for smile detection
+  }
+
+  /**
+   * Detect face in video frame using MediaPipe
+   */
+  async detectFace(videoElement: HTMLVideoElement): Promise<FaceLandmarkerResult | null> {
+    try {
+      if (!this.modelsLoaded) {
+        console.warn('[MediaPipe] Models not loaded, attempting to load...');
+        await this.loadModels();
+      }
+
+      if (!this.faceLandmarker) {
+        console.error('[MediaPipe] Face Landmarker not initialized');
+        return null;
+      }
+
+      // Safari debugging: check video element state
+      console.log(`[MediaPipe] Video ready: ${videoElement.readyState}, dimensions: ${videoElement.videoWidth}x${videoElement.videoHeight}`);
+
+      if (videoElement.readyState < 2) {
+        console.warn('[MediaPipe] Video not ready yet (readyState < 2)');
+        return null;
+      }
+
+      if (videoElement.videoWidth === 0 || videoElement.videoHeight === 0) {
+        console.warn('[MediaPipe] Video has zero dimensions');
+        return null;
+      }
+
+      const timestamp = performance.now();
+      const result = this.faceLandmarker.detectForVideo(videoElement, timestamp);
+
+      console.log(`[MediaPipe] Detection result: ${result ? 'success' : 'null'}, faces: ${result?.faceLandmarks?.length || 0}`);
+
+      return result && result.faceLandmarks && result.faceLandmarks.length > 0 ? result : null;
+    } catch (error) {
+      console.error('[MediaPipe] Face detection error:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Compare live video frame with reference image (basic compatibility)
+   * For smile detection, this is replaced by detectAction('smile')
+   */
+  async matchPose(
+    videoElement: HTMLVideoElement,
+    exampleImage?: HTMLImageElement,
+    threshold: number = 0.8
+  ): Promise<PoseMatchResult> {
+    try {
+      const result = await this.detectFace(videoElement);
+
+      if (!result) {
+        return {
+          matched: false,
+          similarity: 0,
+          message: 'No face detected. Please position your face in the oval.'
+        };
+      }
+
+      // Use face centering and size for basic matching
+      const faceLandmarks = result.faceLandmarks[0];
+      const centerScore = this.calculateCenterScoreFromLandmarks(videoElement, faceLandmarks);
+      const sizeScore = this.calculateSizeScoreFromLandmarks(videoElement, faceLandmarks);
+
+      const similarity = (centerScore + sizeScore) / 2;
+      const matched = similarity >= 0.65;
+
+      console.log(`[MediaPipe Pose Match] Center: ${(centerScore * 100).toFixed(1)}%, Size: ${(sizeScore * 100).toFixed(1)}%, Overall: ${(similarity * 100).toFixed(1)}%`);
+
+      let message: string;
+      if (matched) {
+        message = 'Perfect! Hold steady...';
+      } else if (centerScore < 0.6) {
+        message = 'Center your face in the oval';
+      } else {
+        message = `${Math.round(similarity * 100)}% - Almost there!`;
+      }
+
+      return {
+        matched,
+        similarity,
+        message
+      };
+    } catch (error) {
+      console.error('[MediaPipe] Pose matching error:', error);
+      return {
+        matched: false,
+        similarity: 0,
+        message: 'Unable to detect face. Please ensure good lighting.'
+      };
+    }
+  }
+
+  /**
+   * Calculate how centered the face is using MediaPipe landmarks
+   */
+  private calculateCenterScoreFromLandmarks(
+    videoElement: HTMLVideoElement,
+    landmarks: any[]
+  ): number {
+    // Use nose tip (landmark 1) as face center
+    const noseTip = landmarks[1];
+
+    const videoCenterX = 0.5;
+    const videoCenterY = 0.5;
+
+    const dx = Math.abs(videoCenterX - noseTip.x);
+    const dy = Math.abs(videoCenterY - noseTip.y);
+
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    const maxDistance = Math.sqrt(0.5 * 0.5 + 0.5 * 0.5);
+
+    return Math.max(0, 1 - (distance / maxDistance));
+  }
+
+  /**
+   * Calculate face size score using MediaPipe landmarks
+   */
+  private calculateSizeScoreFromLandmarks(
+    videoElement: HTMLVideoElement,
+    landmarks: any[]
+  ): number {
+    // Calculate face width using jaw landmarks
+    const leftJaw = landmarks[234];  // Left jaw
+    const rightJaw = landmarks[454]; // Right jaw
+
+    const faceWidth = Math.abs(rightJaw.x - leftJaw.x);
+    const idealWidth = 0.35; // 35% of frame width
+
+    const ratio = faceWidth / idealWidth;
+
+    if (ratio < 0.5 || ratio > 1.5) {
+      return Math.max(0, 1 - Math.abs(1 - ratio) * 0.5);
+    }
+
+    return 1;
+  }
+
+  /**
+   * Capture a frame from the video element
+   */
+  captureFrame(videoElement: HTMLVideoElement): ImageData {
+    this.canvas.width = videoElement.videoWidth;
+    this.canvas.height = videoElement.videoHeight;
+    this.ctx.drawImage(videoElement, 0, 0);
+    return this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  /**
+   * Convert frame to base64 JPEG
+   * Flips the image horizontally to show normal (non-mirrored) view
+   */
+  frameToBase64(videoElement: HTMLVideoElement, quality: number = 0.8): string {
+    this.canvas.width = videoElement.videoWidth;
+    this.canvas.height = videoElement.videoHeight;
+
+    // Save context state
+    this.ctx.save();
+
+    // Flip horizontally to convert from mirror view to normal view
+    this.ctx.translate(this.canvas.width, 0);
+    this.ctx.scale(-1, 1);
+
+    // Draw the flipped image
+    this.ctx.drawImage(videoElement, 0, 0);
+
+    // Restore context state
+    this.ctx.restore();
+
+    return this.canvas.toDataURL('image/jpeg', quality);
+  }
+
+  /**
+   * Detect liveness action in video frame using MediaPipe
+   */
+  async detectAction(
+    videoElement: HTMLVideoElement,
+    action: LivenessAction
+  ): Promise<LivenessActionResult> {
+    try {
+      const result = await this.detectFace(videoElement);
+
+      if (!result || !result.faceLandmarks || result.faceLandmarks.length === 0) {
+        return {
+          action,
+          completed: false,
+          progress: 0,
+          message: 'No face detected. Please position your face in the frame.'
+        };
+      }
+
+      const faceLandmarks = result.faceLandmarks[0];
+      const faceBlendshapes = result.faceBlendshapes?.[0]?.categories || [];
+      const transformationMatrix = result.facialTransformationMatrixes?.[0];
+
+      switch (action) {
+        case 'face-center':
+          return this.detectFaceCentered(videoElement, faceLandmarks);
+
+        case 'turn-left':
+          return this.detectFaceTurn(transformationMatrix, 'left');
+
+        case 'turn-right':
+          return this.detectFaceTurn(transformationMatrix, 'right');
+
+        case 'tilt-left':
+          return this.detectHeadTilt(transformationMatrix, 'left');
+
+        case 'tilt-right':
+          return this.detectHeadTilt(transformationMatrix, 'right');
+
+        case 'look-up':
+          return this.detectEyeGaze(faceBlendshapes, 'up');
+
+        case 'look-down':
+          return this.detectEyeGaze(faceBlendshapes, 'down');
+
+        case 'blink':
+          return this.detectBlink(faceBlendshapes);
+
+        case 'blink-twice':
+          return this.detectBlinkTwice(faceBlendshapes);
+
+        case 'wink':
+          return this.detectWink(faceBlendshapes);
+
+        case 'follow-dot':
+          return this.detectFollowDot(faceBlendshapes, transformationMatrix);
+
+        case 'nod':
+          return this.detectNod(transformationMatrix);
+
+        case 'shake-head':
+          return this.detectShakeHead(transformationMatrix);
+
+        case 'smile':
+          return this.detectSmile(faceBlendshapes);
+
+        case 'open-mouth':
+          return this.detectOpenMouth(faceBlendshapes);
+
+        case 'raise-eyebrows':
+          return this.detectRaiseEyebrows(faceBlendshapes);
+
+        case 'rotate-face':
+          return this.detectRotateFace(transformationMatrix);
+
+        case 'speak-phrase':
+          return this.detectSpeakPhrase(faceBlendshapes);
+
+        case 'smile-thumbs-up':
+          return this.detectSmileThumbsUp(videoElement, faceBlendshapes);
+
+        case 'hand-gesture':
+          return this.detectHandGesture(videoElement);
+
+        case 'wave':
+          return this.detectWave(videoElement);
+
+        case 'clap':
+          return this.detectClap(videoElement);
+
+        case 'cross-arms':
+          return this.detectCrossArms(videoElement);
+
+        case 'point':
+          return this.detectPoint(videoElement);
+
+        case 'combined-pose':
+          return this.detectCombinedPose(videoElement);
+
+        case 'custom-pose':
+          return this.detectCustomPose(videoElement);
+
+        default:
+          return {
+            action,
+            completed: false,
+            progress: 0,
+            message: 'Unknown action'
+          };
+      }
+    } catch (error) {
+      console.error('[MediaPipe] Action detection error:', error);
+      return {
+        action,
+        completed: false,
+        progress: 0,
+        message: 'Detection error. Please ensure good lighting.'
+      };
+    }
+  }
+
+  /**
+   * Detect if face is centered using MediaPipe landmarks
+   */
+  private detectFaceCentered(
+    videoElement: HTMLVideoElement,
+    faceLandmarks: any[]
+  ): LivenessActionResult {
+    const centerScore = this.calculateCenterScoreFromLandmarks(videoElement, faceLandmarks);
+    const sizeScore = this.calculateSizeScoreFromLandmarks(videoElement, faceLandmarks);
+
+    const progress = (centerScore + sizeScore) / 2;
+    const completed = progress >= 0.8;
+
+    return {
+      action: 'face-center',
+      completed,
+      progress,
+      message: completed ? 'Face centered!' :
+               centerScore < 0.7 ? 'Center your face in the oval' :
+               'Move a bit closer'
+    };
+  }
+
+  /**
+   * Detect face turn using head rotation matrix (yaw angle)
+   */
+  private detectFaceTurn(
+    transformationMatrix: any,
+    direction: 'left' | 'right'
+  ): LivenessActionResult {
+    if (!transformationMatrix) {
+      return {
+        action: direction === 'left' ? 'turn-left' : 'turn-right',
+        completed: false,
+        progress: 0,
+        message: 'Unable to detect head rotation'
+      };
+    }
+
+    // Extract yaw angle from transformation matrix
+    // The matrix is column-major format
+    const yaw = this.calculateYawAngle(transformationMatrix.data);
+
+    // Yaw angle in radians (positive = turn right in camera view, negative = turn left)
+    // Convert to degrees for easier thresholds
+    const yawDegrees = (yaw * 180) / Math.PI;
+
+    // Because camera is mirrored, we need to swap the yaw interpretation:
+    // When user turns physically LEFT → yaw is NEGATIVE in MediaPipe's coordinate system
+    // When user turns physically RIGHT → yaw is POSITIVE in MediaPipe's coordinate system
+    let progress = 0;
+    let completed = false;
+
+    const turnThreshold = 25; // degrees
+
+    if (direction === 'left') {
+      // User turns physically left → negative yaw
+      progress = Math.max(0, Math.min(1, -yawDegrees / turnThreshold));
+      completed = yawDegrees < -turnThreshold;
+      console.log(`[Turn Left] Yaw: ${yawDegrees.toFixed(1)}°, Progress: ${(progress * 100).toFixed(1)}%, Completed: ${completed}`);
+    } else {
+      // User turns physically right → positive yaw
+      progress = Math.max(0, Math.min(1, yawDegrees / turnThreshold));
+      completed = yawDegrees > turnThreshold;
+      console.log(`[Turn Right] Yaw: ${yawDegrees.toFixed(1)}°, Progress: ${(progress * 100).toFixed(1)}%, Completed: ${completed}`);
+    }
+
+    return {
+      action: direction === 'left' ? 'turn-left' : 'turn-right',
+      completed,
+      progress,
+      message: completed ? `Face turned ${direction}!` : `Turn your face ${direction}`
+    };
+  }
+
+  /**
+   * Calculate yaw angle from transformation matrix
+   */
+  private calculateYawAngle(matrix: Float32Array): number {
+    // MediaPipe transformation matrix is 4x4 in column-major order
+    // Extract rotation components
+    const r11 = matrix[0];
+    const r21 = matrix[1];
+    const r31 = matrix[2];
+
+    // Calculate yaw (rotation around Y-axis)
+    const yaw = Math.atan2(r31, r11);
+    return yaw;
+  }
+
+  /**
+   * Calculate pitch angle from transformation matrix
+   */
+  private calculatePitchAngle(matrix: Float32Array): number {
+    // Extract pitch (rotation around X-axis)
+    const r32 = matrix[6];
+    const r33 = matrix[10];
+
+    const pitch = Math.atan2(-matrix[9], Math.sqrt(r32 * r32 + r33 * r33));
+    return pitch;
+  }
+
+  /**
+   * Calculate roll angle from transformation matrix (head tilt left/right)
+   */
+  private calculateRollAngle(matrix: Float32Array): number {
+    // Extract roll (rotation around Z-axis) - head tilt
+    // For roll, we use R21 and R22
+    const r21 = matrix[4]; // matrix[1*4 + 0]
+    const r22 = matrix[5]; // matrix[1*4 + 1]
+
+    const roll = Math.atan2(r21, r22);
+    return roll;
+  }
+
+  /**
+   * Detect head tilt (roll) left or right
+   */
+  private detectHeadTilt(transformationMatrix: any, direction: 'left' | 'right'): LivenessActionResult {
+    if (!transformationMatrix || !transformationMatrix.data) {
+      return {
+        action: direction === 'left' ? 'tilt-left' : 'tilt-right',
+        completed: false,
+        progress: 0,
+        message: 'Face not detected'
+      };
+    }
+
+    // Extract roll angle from transformation matrix
+    const roll = this.calculateRollAngle(transformationMatrix.data);
+    const rollDegrees = (roll * 180) / Math.PI;
+
+    // MediaPipe roll angle:
+    // Positive roll = head tilts RIGHT in MediaPipe's coordinate system
+    // Negative roll = head tilts LEFT in MediaPipe's coordinate system
+    //
+    // BUT: Because camera is MIRRORED, we need to SWAP the logic:
+    // When user tilts physically LEFT → positive roll (appears right in mirrored view)
+    // When user tilts physically RIGHT → negative roll (appears left in mirrored view)
+
+    let progress = 0;
+    let completed = false;
+    const tiltThreshold = 20; // degrees
+
+    if (direction === 'left') {
+      // User tilts head physically left → POSITIVE roll (due to mirrored camera)
+      progress = Math.max(0, Math.min(1, rollDegrees / tiltThreshold));
+      completed = rollDegrees > tiltThreshold;
+      console.log(`[Tilt Left] Roll: ${rollDegrees.toFixed(1)}°, Progress: ${(progress * 100).toFixed(1)}%, Completed: ${completed}`);
+    } else {
+      // User tilts head physically right → NEGATIVE roll (due to mirrored camera)
+      progress = Math.max(0, Math.min(1, -rollDegrees / tiltThreshold));
+      completed = rollDegrees < -tiltThreshold;
+      console.log(`[Tilt Right] Roll: ${rollDegrees.toFixed(1)}°, Progress: ${(progress * 100).toFixed(1)}%, Completed: ${completed}`);
+    }
+
+    return {
+      action: direction === 'left' ? 'tilt-left' : 'tilt-right',
+      completed,
+      progress,
+      message: completed ? `Head tilted ${direction}!` : `Tilt your head ${direction} (ear to shoulder)`
+    };
+  }
+
+  /**
+   * Detect eye gaze direction (look up/down)
+   */
+  private detectEyeGaze(blendshapes: any[], direction: 'up' | 'down'): LivenessActionResult {
+    if (direction === 'up') {
+      // Get eye look up blendshapes
+      const eyeLookUpLeft = blendshapes.find((b: any) => b.categoryName === 'eyeLookUpLeft')?.score || 0;
+      const eyeLookUpRight = blendshapes.find((b: any) => b.categoryName === 'eyeLookUpRight')?.score || 0;
+      const avgLookUp = (eyeLookUpLeft + eyeLookUpRight) / 2;
+
+      const isLookingUp = avgLookUp > 0.5;
+
+      console.log(`[Look Up] LeftEye: ${eyeLookUpLeft.toFixed(3)}, RightEye: ${eyeLookUpRight.toFixed(3)}, Avg: ${avgLookUp.toFixed(3)}, Looking Up: ${isLookingUp}`);
+
+      const progress = Math.min(1, avgLookUp / 0.5);
+      const completed = isLookingUp;
+
+      return {
+        action: 'look-up',
+        completed,
+        progress,
+        message: completed ? 'Looking up!' : 'Look up with your eyes (keep head straight)'
+      };
+    } else {
+      // Get eye look down blendshapes
+      const eyeLookDownLeft = blendshapes.find((b: any) => b.categoryName === 'eyeLookDownLeft')?.score || 0;
+      const eyeLookDownRight = blendshapes.find((b: any) => b.categoryName === 'eyeLookDownRight')?.score || 0;
+      const avgLookDown = (eyeLookDownLeft + eyeLookDownRight) / 2;
+
+      const isLookingDown = avgLookDown > 0.5;
+
+      console.log(`[Look Down] LeftEye: ${eyeLookDownLeft.toFixed(3)}, RightEye: ${eyeLookDownRight.toFixed(3)}, Avg: ${avgLookDown.toFixed(3)}, Looking Down: ${isLookingDown}`);
+
+      const progress = Math.min(1, avgLookDown / 0.5);
+      const completed = isLookingDown;
+
+      return {
+        action: 'look-down',
+        completed,
+        progress,
+        message: completed ? 'Looking down!' : 'Look down with your eyes (keep head straight)'
+      };
+    }
+  }
+
+  /**
+   * Detect eye blink using MediaPipe blendshapes
+   */
+  private detectBlink(blendshapes: any[]): LivenessActionResult {
+    // Get blink blendshape scores
+    const eyeBlinkLeft = blendshapes.find((b: any) => b.categoryName === 'eyeBlinkLeft')?.score || 0;
+    const eyeBlinkRight = blendshapes.find((b: any) => b.categoryName === 'eyeBlinkRight')?.score || 0;
+    const avgBlink = (eyeBlinkLeft + eyeBlinkRight) / 2;
+
+    this.frameCount++;
+
+    // Calibration phase - wait for eyes to be open
+    if (this.frameCount <= 10) {
+      this.maxEAR = Math.max(this.maxEAR, 1 - avgBlink); // Store max "openness"
+      console.log(`[Blink] Calibrating... Blink score: ${avgBlink.toFixed(3)}, Frame: ${this.frameCount}`);
+
+      return {
+        action: 'blink',
+        completed: false,
+        progress: 0,
+        message: 'Keep your eyes open'
+      };
+    }
+
+    // Blink detection: score > 0.5 means eyes are closed
+    const eyesClosed = avgBlink > 0.5;
+
+    console.log(`[Blink] Left: ${eyeBlinkLeft.toFixed(3)}, Right: ${eyeBlinkRight.toFixed(3)}, Avg: ${avgBlink.toFixed(3)}, Closed: ${eyesClosed}, BlinkStarted: ${this.blinkDetected}`);
+
+    // Track blink sequence
+    if (eyesClosed && !this.blinkDetected) {
+      this.blinkDetected = true;
+      console.log('[Blink] ✓ Eyes CLOSED - blink started!');
+    }
+
+    // Blink complete when eyes reopen
+    const completed = this.blinkDetected && !eyesClosed;
+
+    if (completed) {
+      console.log('[Blink] ✓✓ BLINK COMPLETED! Eyes reopened.');
+    }
+
+    // Calculate progress
+    let progress = 0;
+    if (!this.blinkDetected) {
+      progress = 0.3;
+    } else if (!completed) {
+      progress = 0.6;
+    } else {
+      progress = 1.0;
+    }
+
+    return {
+      action: 'blink',
+      completed,
+      progress,
+      message: completed ? 'Blink detected!' :
+               this.blinkDetected ? 'Open your eyes again' :
+               'Blink your eyes'
+    };
+  }
+
+  /**
+   * Detect blink twice - count two separate blinks
+   */
+  private detectBlinkTwice(blendshapes: any[]): LivenessActionResult {
+    // Get blink blendshape scores
+    const eyeBlinkLeft = blendshapes.find((b: any) => b.categoryName === 'eyeBlinkLeft')?.score || 0;
+    const eyeBlinkRight = blendshapes.find((b: any) => b.categoryName === 'eyeBlinkRight')?.score || 0;
+    const avgBlink = (eyeBlinkLeft + eyeBlinkRight) / 2;
+
+    this.frameCount++;
+    const currentTime = Date.now();
+
+    // Calibration phase - wait for eyes to be open
+    if (this.frameCount <= 10) {
+      this.maxEAR = Math.max(this.maxEAR, 1 - avgBlink);
+      console.log(`[Blink Twice] Calibrating... Blink score: ${avgBlink.toFixed(3)}, Frame: ${this.frameCount}`);
+
+      return {
+        action: 'blink-twice',
+        completed: false,
+        progress: 0,
+        message: 'Keep your eyes open'
+      };
+    }
+
+    // Blink detection: score > 0.5 means eyes are closed
+    const eyesClosed = avgBlink > 0.5;
+
+    console.log(`[Blink Twice] Left: ${eyeBlinkLeft.toFixed(3)}, Right: ${eyeBlinkRight.toFixed(3)}, Avg: ${avgBlink.toFixed(3)}, Closed: ${eyesClosed}, Count: ${this.blinkCount}, BlinkStarted: ${this.blinkDetected}`);
+
+    // Track blink sequence
+    if (eyesClosed && !this.blinkDetected) {
+      this.blinkDetected = true;
+      console.log('[Blink Twice] ✓ Eyes CLOSED - blink started!');
+    }
+
+    // Blink complete when eyes reopen
+    if (this.blinkDetected && !eyesClosed) {
+      // Only count if enough time has passed since last blink (prevent double-counting)
+      if (this.blinkCount === 0 || (currentTime - this.lastBlinkTime) > 300) {
+        this.blinkCount++;
+        this.lastBlinkTime = currentTime;
+        console.log(`[Blink Twice] ✓✓ BLINK ${this.blinkCount} COMPLETED! Eyes reopened.`);
+      }
+      this.blinkDetected = false;
+    }
+
+    const completed = this.blinkCount >= 2;
+
+    if (completed) {
+      console.log('[Blink Twice] ✓✓✓ TWO BLINKS DETECTED! Challenge complete.');
+    }
+
+    // Calculate progress
+    let progress = 0;
+    if (this.blinkCount === 0) {
+      progress = this.blinkDetected ? 0.25 : 0.1;
+    } else if (this.blinkCount === 1) {
+      progress = this.blinkDetected ? 0.65 : 0.5;
+    } else {
+      progress = 1.0;
+    }
+
+    return {
+      action: 'blink-twice',
+      completed,
+      progress,
+      message: completed ? 'Two blinks detected!' :
+               this.blinkCount === 1 ? (this.blinkDetected ? 'Open your eyes' : 'Blink one more time') :
+               this.blinkDetected ? 'Open your eyes again' :
+               'Blink twice'
+    };
+  }
+
+  /**
+   * Detect wink - one eye closed while other stays open
+   */
+  private detectWink(blendshapes: any[]): LivenessActionResult {
+    const eyeBlinkLeft = blendshapes.find((b: any) => b.categoryName === 'eyeBlinkLeft')?.score || 0;
+    const eyeBlinkRight = blendshapes.find((b: any) => b.categoryName === 'eyeBlinkRight')?.score || 0;
+
+    // Improved thresholds for wink detection
+    // Closed eye: score > 0.4 (more lenient - easier to trigger)
+    // Open eye: score < 0.5 (more lenient - easier to maintain)
+    const leftEyeClosed = eyeBlinkLeft > 0.4;
+    const rightEyeClosed = eyeBlinkRight > 0.4;
+    const leftEyeOpen = eyeBlinkLeft < 0.5;
+    const rightEyeOpen = eyeBlinkRight < 0.5;
+
+    // Calculate difference to detect asymmetry
+    const eyeDifference = Math.abs(eyeBlinkLeft - eyeBlinkRight);
+    // Reduced asymmetry threshold from 0.3 to 0.25 for easier detection
+    const hasAsymmetry = eyeDifference > 0.25;
+
+    // Detect wink: one eye closed AND other eye open (not both closed, not both open)
+    const isWinking = hasAsymmetry && ((leftEyeClosed && rightEyeOpen) || (rightEyeClosed && leftEyeOpen));
+
+    console.log(`[Wink] Left: ${eyeBlinkLeft.toFixed(3)}, Right: ${eyeBlinkRight.toFixed(3)}, Diff: ${eyeDifference.toFixed(3)}, Asymmetry: ${hasAsymmetry}, Winking: ${isWinking}, Detected: ${this.winkDetected}`);
+
+    // Once we detect a wink, mark it as detected
+    if (isWinking && !this.winkDetected) {
+      this.winkDetected = true;
+      console.log('[Wink] ✓ WINK DETECTED! Left closed & right open OR right closed & left open');
+    }
+
+    const completed = this.winkDetected;
+
+    // Show progress based on eye difference to help user
+    let progress = 0;
+    if (completed) {
+      progress = 1.0;
+    } else if (isWinking) {
+      progress = 0.8; // Almost there
+    } else if (hasAsymmetry) {
+      progress = 0.5; // Getting closer
+    } else if (eyeDifference > 0.15) {
+      progress = 0.3; // Some asymmetry detected
+    }
+
+    return {
+      action: 'wink',
+      completed,
+      progress,
+      message: completed ? 'Wink detected!' :
+               isWinking ? 'Hold it...' :
+               hasAsymmetry ? 'Close one eye more' :
+               'Wink with one eye (close one, keep other open)'
+    };
+  }
+
+  /**
+   * Detect eye movement following a dot - requires multiple gaze direction changes
+   */
+  private detectFollowDot(blendshapes: any[], transformationMatrix: any): LivenessActionResult {
+    // Track eye gaze changes using eye look blendshapes
+    const eyeLookUpLeft = blendshapes.find((b: any) => b.categoryName === 'eyeLookUpLeft')?.score || 0;
+    const eyeLookUpRight = blendshapes.find((b: any) => b.categoryName === 'eyeLookUpRight')?.score || 0;
+    const eyeLookDownLeft = blendshapes.find((b: any) => b.categoryName === 'eyeLookDownLeft')?.score || 0;
+    const eyeLookDownRight = blendshapes.find((b: any) => b.categoryName === 'eyeLookDownRight')?.score || 0;
+    const eyeLookInLeft = blendshapes.find((b: any) => b.categoryName === 'eyeLookInLeft')?.score || 0;
+    const eyeLookOutLeft = blendshapes.find((b: any) => b.categoryName === 'eyeLookOutLeft')?.score || 0;
+
+    const avgLookUp = (eyeLookUpLeft + eyeLookUpRight) / 2;
+    const avgLookDown = (eyeLookDownLeft + eyeLookDownRight) / 2;
+    const lookLeft = eyeLookInLeft;
+    const lookRight = eyeLookOutLeft;
+
+    // Determine current gaze direction
+    let currentGaze = 'center';
+    const threshold = 0.4;
+
+    if (avgLookUp > threshold) currentGaze = 'up';
+    else if (avgLookDown > threshold) currentGaze = 'down';
+    else if (lookLeft > threshold) currentGaze = 'left';
+    else if (lookRight > threshold) currentGaze = 'right';
+
+    // Count direction changes
+    if (currentGaze !== 'center' && currentGaze !== this.lastGazeDirection) {
+      this.followDotMovements++;
+      this.lastGazeDirection = currentGaze;
+      console.log(`[Follow Dot] Gaze direction changed to: ${currentGaze}, movements: ${this.followDotMovements}`);
+    }
+
+    // Need at least 3 direction changes to complete
+    const completed = this.followDotMovements >= 3;
+    const progress = Math.min(1.0, this.followDotMovements / 3);
+
+    return {
+      action: 'follow-dot',
+      completed,
+      progress,
+      message: completed ? 'Eye tracking complete!' : `Follow the dot with your eyes (${this.followDotMovements}/3)`
+    };
+  }
+
+  /**
+   * Detect speaking by tracking mouth movement over time
+   */
+  private detectSpeakPhrase(blendshapes: any[]): LivenessActionResult {
+    const jawOpen = blendshapes.find((b: any) => b.categoryName === 'jawOpen')?.score || 0;
+    const mouthClose = blendshapes.find((b: any) => b.categoryName === 'mouthClose')?.score || 0;
+
+    // Calculate mouth openness (higher = more open)
+    const mouthOpenness = jawOpen - mouthClose;
+
+    // Detect mouth movements (opening and closing)
+    const threshold = 0.2;
+    const movementDelta = Math.abs(mouthOpenness - this.lastMouthOpenness);
+
+    if (movementDelta > threshold) {
+      this.mouthMovementCount++;
+      console.log(`[Speak] Mouth movement detected: ${mouthOpenness.toFixed(3)}, count: ${this.mouthMovementCount}`);
+    }
+
+    this.lastMouthOpenness = mouthOpenness;
+
+    // Need at least 5 mouth movements to simulate speaking
+    const completed = this.mouthMovementCount >= 5;
+    const progress = Math.min(1.0, this.mouthMovementCount / 5);
+
+    return {
+      action: 'speak-phrase',
+      completed,
+      progress,
+      message: completed ? 'Speaking detected!' : 'Speak a short phrase'
+    };
+  }
+
+  /**
+   * Detect head nod using pitch angle from transformation matrix
+   */
+  private detectNod(transformationMatrix: any): LivenessActionResult {
+    if (!transformationMatrix) {
+      return {
+        action: 'nod',
+        completed: false,
+        progress: 0,
+        message: 'Unable to detect head movement'
+      };
+    }
+
+    const pitch = this.calculatePitchAngle(transformationMatrix.data);
+    const pitchDegrees = (pitch * 180) / Math.PI;
+
+    // Initialize baseline
+    if (this.initialPitch === null) {
+      this.initialPitch = pitchDegrees;
+    }
+
+    const pitchChange = pitchDegrees - this.initialPitch;
+    const threshold = 10; // degrees
+
+    // Detect nod: pitch down then up
+    if (pitchChange > threshold && this.nodDirection !== 'down') {
+      this.nodDirection = 'down';
+      console.log(`[Nod] Head moved DOWN, pitch change: ${pitchChange.toFixed(1)}°`);
+    }
+
+    const completed = this.nodDirection === 'down' && pitchChange < -threshold;
+
+    if (completed) {
+      console.log(`[Nod] ✓ NOD COMPLETED! Head moved back up, pitch change: ${pitchChange.toFixed(1)}°`);
+    }
+
+    const progress = this.nodDirection === 'down' ?
+                     Math.min(1, Math.abs(pitchChange) / threshold) * 0.8 :
+                     Math.min(0.5, Math.abs(pitchChange) / threshold);
+
+    return {
+      action: 'nod',
+      completed,
+      progress,
+      message: completed ? 'Nod detected!' :
+               this.nodDirection === 'down' ? 'Now move your head up' :
+               'Nod your head down'
+    };
+  }
+
+  /**
+   * Detect shake head (side to side like saying "no")
+   */
+  private detectShakeHead(transformationMatrix: any): LivenessActionResult {
+    if (!transformationMatrix || !transformationMatrix.data) {
+      return {
+        action: 'shake-head',
+        completed: false,
+        progress: 0,
+        message: 'Face not detected'
+      };
+    }
+
+    // Extract yaw angle from transformation matrix
+    const yaw = this.calculateYawAngle(transformationMatrix.data);
+    const yawDegrees = (yaw * 180) / Math.PI;
+
+    // Initialize baseline
+    if (this.initialYaw === null) {
+      this.initialYaw = yawDegrees;
+    }
+
+    const yawChange = yawDegrees - this.initialYaw;
+    const threshold = 15; // degrees (less than turn threshold)
+
+    // Detect shake: yaw left then right (or vice versa)
+    // Note: Because camera is mirrored, the signs are swapped
+    if (Math.abs(yawChange) > threshold) {
+      if (yawChange < -threshold && this.shakeDirection !== 'left') {
+        this.shakeDirection = 'left';
+        this.shakeCount++;
+        console.log(`[Shake Head] Head moved LEFT, yaw change: ${yawChange.toFixed(1)}°, count: ${this.shakeCount}`);
+      } else if (yawChange > threshold && this.shakeDirection !== 'right') {
+        this.shakeDirection = 'right';
+        this.shakeCount++;
+        console.log(`[Shake Head] Head moved RIGHT, yaw change: ${yawChange.toFixed(1)}°, count: ${this.shakeCount}`);
+      }
+    }
+
+    // Complete after 2 direction changes (one full shake)
+    const completed = this.shakeCount >= 2;
+
+    if (completed) {
+      console.log(`[Shake Head] ✓ SHAKE HEAD COMPLETED! Total direction changes: ${this.shakeCount}`);
+    }
+
+    const progress = Math.min(1, this.shakeCount / 2);
+
+    return {
+      action: 'shake-head',
+      completed,
+      progress,
+      message: completed ? 'Head shake detected!' :
+               this.shakeCount > 0 ? `Continue shaking (${this.shakeCount}/2)` :
+               'Shake your head left to right (like saying "no")'
+    };
+  }
+
+  /**
+   * Detect open mouth using MediaPipe blendshapes
+   */
+  private detectOpenMouth(blendshapes: any[]): LivenessActionResult {
+    // Get jaw open blendshape score
+    const jawOpen = blendshapes.find((b: any) => b.categoryName === 'jawOpen')?.score || 0;
+    const mouthClose = blendshapes.find((b: any) => b.categoryName === 'mouthClose')?.score || 0;
+
+    // Mouth is open when jawOpen > 0.6 and mouthClose is low
+    const isMouthOpen = jawOpen > 0.6 && mouthClose < 0.3;
+
+    console.log(`[Open Mouth] JawOpen: ${jawOpen.toFixed(3)}, MouthClose: ${mouthClose.toFixed(3)}, Open: ${isMouthOpen}`);
+
+    // Track mouth opening
+    if (isMouthOpen && !this.openMouthDetected) {
+      this.openMouthDetected = true;
+      console.log('[Open Mouth] ✓ MOUTH OPENED!');
+    }
+
+    const completed = this.openMouthDetected && isMouthOpen;
+    const progress = isMouthOpen ? 1.0 : (jawOpen / 0.6); // Progress based on jaw opening
+
+    return {
+      action: 'open-mouth' as LivenessAction,
+      completed,
+      progress,
+      message: completed ? 'Mouth opened!' :
+               isMouthOpen ? 'Hold your mouth open' :
+               'Open your mouth wide'
+    };
+  }
+
+  /**
+   * Detect raised eyebrows using MediaPipe blendshapes
+   */
+  private detectRaiseEyebrows(blendshapes: any[]): LivenessActionResult {
+    // Get eyebrow blendshape scores
+    const browInnerUp = blendshapes.find((b: any) => b.categoryName === 'browInnerUp')?.score || 0;
+    const browOuterUpLeft = blendshapes.find((b: any) => b.categoryName === 'browOuterUpLeft')?.score || 0;
+    const browOuterUpRight = blendshapes.find((b: any) => b.categoryName === 'browOuterUpRight')?.score || 0;
+
+    const avgBrowUp = (browInnerUp + browOuterUpLeft + browOuterUpRight) / 3;
+
+    // Eyebrows are raised when average > 0.5
+    const areEyebrowsRaised = avgBrowUp > 0.5;
+
+    console.log(`[Raise Eyebrows] InnerUp: ${browInnerUp.toFixed(3)}, OuterLeft: ${browOuterUpLeft.toFixed(3)}, OuterRight: ${browOuterUpRight.toFixed(3)}, Avg: ${avgBrowUp.toFixed(3)}, Raised: ${areEyebrowsRaised}`);
+
+    // Track eyebrow raising
+    if (areEyebrowsRaised && !this.eyebrowsRaisedDetected) {
+      this.eyebrowsRaisedDetected = true;
+      console.log('[Raise Eyebrows] ✓ EYEBROWS RAISED!');
+    }
+
+    const completed = this.eyebrowsRaisedDetected && areEyebrowsRaised;
+    const progress = areEyebrowsRaised ? 1.0 : (avgBrowUp / 0.5); // Progress based on eyebrow movement
+
+    return {
+      action: 'raise-eyebrows' as LivenessAction,
+      completed,
+      progress,
+      message: completed ? 'Eyebrows raised!' :
+               areEyebrowsRaised ? 'Hold your eyebrows up' :
+               'Raise your eyebrows (surprised look)'
+    };
+  }
+
+  /**
+   * Detect face rotation - user rotates their face slowly from center to left, back to center, then to right
+   * This is a passive liveness check that ensures the face can be viewed from multiple angles
+   */
+  private detectRotateFace(transformationMatrix: any): LivenessActionResult {
+    if (!transformationMatrix || !transformationMatrix.data) {
+      return {
+        action: 'rotate-face' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'Face not detected'
+      };
+    }
+
+    // Extract yaw angle from transformation matrix
+    const yaw = this.calculateYawAngle(transformationMatrix.data);
+    const yawDegrees = (yaw * 180) / Math.PI;
+
+    // Define thresholds for rotation detection
+    const centerThreshold = 10; // Within 10 degrees is considered center
+    const turnThreshold = 20;   // Need at least 20 degrees rotation
+
+    // Detect current head position
+    let currentPosition = 'center';
+    if (yawDegrees < -turnThreshold) {
+      currentPosition = 'left';  // User turns physically left (negative yaw)
+    } else if (yawDegrees > turnThreshold) {
+      currentPosition = 'right'; // User turns physically right (positive yaw)
+    } else if (Math.abs(yawDegrees) <= centerThreshold) {
+      currentPosition = 'center';
+    }
+
+    console.log(`[Rotate Face] Yaw: ${yawDegrees.toFixed(1)}°, Position: ${currentPosition}, Stage: ${this.rotationStage}, Sequence: [${this.rotationSequence.join(', ')}]`);
+
+    // State machine for rotation sequence
+    if (this.rotationStage === 'center' && currentPosition === 'center') {
+      // Starting position confirmed - waiting for left turn
+      // Do nothing, just wait
+    } else if (this.rotationStage === 'center' && currentPosition === 'left') {
+      // User turned left from center
+      this.rotationStage = 'left';
+      this.rotationSequence.push('left');
+      console.log('[Rotate Face] ✓ Turned LEFT');
+    } else if (this.rotationStage === 'left' && currentPosition === 'center') {
+      // User returned to center from left
+      this.rotationStage = 'right'; // Now waiting for right turn
+      this.rotationSequence.push('center');
+      console.log('[Rotate Face] ✓ Back to CENTER from left');
+    } else if (this.rotationStage === 'right' && currentPosition === 'right') {
+      // User turned right from center
+      this.rotationStage = 'complete';
+      this.rotationSequence.push('right');
+      this.rotateFaceDetected = true;
+      console.log('[Rotate Face] ✓✓ ROTATION COMPLETE! Turned RIGHT');
+    }
+
+    const completed = this.rotateFaceDetected;
+
+    // Calculate progress based on rotation stage
+    let progress = 0;
+    if (this.rotationStage === 'center') {
+      progress = 0.1; // Just started
+    } else if (this.rotationStage === 'left') {
+      progress = 0.4; // Turned left
+    } else if (this.rotationStage === 'right') {
+      progress = 0.7; // Back to center, waiting for right
+    } else if (this.rotationStage === 'complete') {
+      progress = 1.0; // Complete!
+    }
+
+    // Generate helpful message
+    let message: string;
+    if (completed) {
+      message = 'Face rotation complete!';
+    } else if (this.rotationStage === 'center') {
+      message = 'Slowly turn your face to the left';
+    } else if (this.rotationStage === 'left') {
+      message = 'Good! Now return to center';
+    } else if (this.rotationStage === 'right') {
+      message = 'Perfect! Now turn your face to the right';
+    } else {
+      message = 'Slowly rotate your face';
+    }
+
+    return {
+      action: 'rotate-face' as LivenessAction,
+      completed,
+      progress,
+      message
+    };
+  }
+
+  /**
+   * Detect smile using MediaPipe blendshapes
+   */
+  private detectSmile(blendshapes: any[]): LivenessActionResult {
+    // Get smile blendshape scores
+    const mouthSmileLeft = blendshapes.find((b: any) => b.categoryName === 'mouthSmileLeft')?.score || 0;
+    const mouthSmileRight = blendshapes.find((b: any) => b.categoryName === 'mouthSmileRight')?.score || 0;
+    const avgSmile = (mouthSmileLeft + mouthSmileRight) / 2;
+
+    // Smile threshold - score > 0.5 means smiling
+    const isSmiling = avgSmile > 0.5;
+
+    console.log(`[Smile] Left: ${mouthSmileLeft.toFixed(3)}, Right: ${mouthSmileRight.toFixed(3)}, Avg: ${avgSmile.toFixed(3)}, Smiling: ${isSmiling}`);
+
+    // Track smile
+    if (isSmiling && !this.smileDetected) {
+      this.smileDetected = true;
+      console.log('[Smile] ✓ SMILE DETECTED!');
+    }
+
+    const completed = this.smileDetected && isSmiling;
+
+    // Calculate progress based on smile intensity
+    const progress = isSmiling ? Math.min(1, avgSmile / 0.5) : avgSmile / 0.5;
+
+    return {
+      action: 'smile',
+      completed,
+      progress,
+      message: completed ? 'Great smile!' : 'Smile for the camera'
+    };
+  }
+
+  /**
+   * Detect smile + thumbs up gesture (default Phase 2 action)
+   */
+  private async detectSmileThumbsUp(
+    videoElement: HTMLVideoElement,
+    faceBlendshapes: any[]
+  ): Promise<LivenessActionResult> {
+    // First, check for smile using MediaPipe blendshapes
+    const mouthSmileLeft = faceBlendshapes.find((b: any) => b.categoryName === 'mouthSmileLeft')?.score || 0;
+    const mouthSmileRight = faceBlendshapes.find((b: any) => b.categoryName === 'mouthSmileRight')?.score || 0;
+    const avgSmile = (mouthSmileLeft + mouthSmileRight) / 2;
+    const isSmiling = avgSmile > 0.5;
+
+    // Second, check for thumbs up using OpenPose/MoveNet
+    const pose = await this.openposeService.detectPose(videoElement);
+    let isThumbsUp = false;
+    let thumbsUpConfidence = 0;
+
+    if (pose) {
+      const thumbsUpResult = this.openposeService.detectThumbsUp(pose);
+      isThumbsUp = thumbsUpResult.anyThumbsUp;
+      thumbsUpConfidence = thumbsUpResult.confidence;
+    }
+
+    console.log(`[Smile+ThumbsUp] Smile: ${avgSmile.toFixed(3)} (${isSmiling}), ThumbsUp: ${isThumbsUp} (confidence: ${thumbsUpConfidence.toFixed(2)})`);
+
+    // Track state for completion
+    if (isSmiling && !this.smileDetected) {
+      this.smileDetected = true;
+      console.log('[Smile+ThumbsUp] ✓ SMILE DETECTED!');
+    }
+
+    if (isThumbsUp && !this.thumbsUpDetected) {
+      this.thumbsUpDetected = true;
+      console.log('[Smile+ThumbsUp] ✓ THUMBS UP DETECTED!');
+    }
+
+    // Both conditions must be met
+    const bothDetected = this.smileDetected && this.thumbsUpDetected;
+    const currentlyBoth = isSmiling && isThumbsUp;
+
+    // Complete when both are currently active
+    const completed = bothDetected && currentlyBoth;
+
+    if (completed && !this.smileThumbsUpDetected) {
+      this.smileThumbsUpDetected = true;
+      console.log('[Smile+ThumbsUp] ✓✓ BOTH DETECTED TOGETHER!');
+    }
+
+    // Calculate progress
+    let progress = 0;
+    if (completed) {
+      progress = 1.0;
+    } else if (bothDetected) {
+      progress = 0.8;
+    } else if (this.smileDetected || this.thumbsUpDetected) {
+      progress = 0.5;
+    } else if (isSmiling || isThumbsUp) {
+      progress = 0.3;
+    }
+
+    // Generate message
+    let message: string;
+    if (completed) {
+      message = 'Perfect! Smile with thumbs up!';
+    } else if (bothDetected && !currentlyBoth) {
+      if (!isSmiling) message = 'Keep the thumbs up and smile!';
+      else message = 'Keep smiling and show thumbs up!';
+    } else if (this.smileDetected && !this.thumbsUpDetected) {
+      message = 'Great smile! Now show thumbs up!';
+    } else if (this.thumbsUpDetected && !this.smileDetected) {
+      message = 'Nice thumbs up! Now smile!';
+    } else if (isSmiling && !isThumbsUp) {
+      message = 'Good! Now add thumbs up!';
+    } else if (isThumbsUp && !isSmiling) {
+      message = 'Nice! Now smile!';
+    } else {
+      message = 'Smile and show thumbs up!';
+    }
+
+    return {
+      action: 'smile-thumbs-up' as LivenessAction,
+      completed,
+      progress,
+      message
+    };
+  }
+
+  // Store static pose keypoints for comparison
+  private staticPoseKeypoints: any[] | null = null;
+
+  /**
+   * Set static pose keypoints for detection (from PoseDefinition)
+   */
+  setStaticPoseKeypoints(keypoints: any[] | null): void {
+    this.staticPoseKeypoints = keypoints;
+    console.log('[Pose Matching] Static pose keypoints set:', keypoints ? keypoints.length : 0);
+  }
+
+  /**
+   * Set expected hand gesture for detection
+   * @param gesture - The gesture type (palm, thumbs_up, peace, etc.)
+   * @param handedness - Which hand is expected: 'Left', 'Right', or 'Any'
+   */
+  setExpectedGesture(gesture: string | null, handedness: 'Left' | 'Right' | 'Any' = 'Any'): void {
+    this.expectedGesture = gesture;
+    this.expectedHandedness = handedness;
+    this.handGestureDetected = false;
+    console.log('[Hand Gesture] Expected gesture set:', gesture, 'with handedness:', handedness);
+  }
+
+  /**
+   * Detect hand gesture using MediaPipe Hands
+   */
+  private async detectHandGesture(
+    videoElement: HTMLVideoElement
+  ): Promise<LivenessActionResult> {
+    console.log('[Hand Gesture] detectHandGesture called - starting detection');
+
+    if (!this.expectedGesture) {
+      return {
+        action: 'hand-gesture' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'No expected gesture set'
+      };
+    }
+
+    // Detect hands using MediaPipe Hands
+    const handsResult = await this.handGestureService.detectHands(videoElement);
+
+    if (!handsResult || !handsResult.landmarks || handsResult.landmarks.length === 0) {
+      return {
+        action: 'hand-gesture' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'No hand detected. Please show your hand to the camera.'
+      };
+    }
+
+    // Detect gestures from hand landmarks
+    const detectedGestures = this.handGestureService.detectGesture(handsResult);
+
+    console.log(`[Hand Gesture] Detected ${detectedGestures.length} hand(s)`);
+
+    if (detectedGestures.length === 0) {
+      return {
+        action: 'hand-gesture' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'Unable to recognize hand gesture'
+      };
+    }
+
+    // Check if any detected gesture matches expected gesture AND handedness
+    const matched = detectedGestures.some(g => {
+      const gestureMatches = this.handGestureService.matchGesture(g.gesture, this.expectedGesture!);
+
+      // Check handedness
+      // MediaPipe Hand Landmarker reports handedness correctly based on the person's actual hand
+      // when using a mirrored front-facing camera (selfie mode).
+      //
+      // The handedness is detected from the person's perspective, not the camera's perspective.
+      // So if the user shows their RIGHT hand, MediaPipe reports "Right"
+      // If the user shows their LEFT hand, MediaPipe reports "Left"
+      //
+      // NO FLIPPING NEEDED - Direct comparison
+      let handednessMatches = true;
+      if (this.expectedHandedness !== 'Any') {
+        handednessMatches = g.handedness === this.expectedHandedness;
+        console.log(`[Hand Gesture Match Check] MediaPipe reports: ${g.handedness}, Expected: ${this.expectedHandedness}, Match: ${handednessMatches}`);
+      }
+
+      console.log(`[Hand Gesture Match Check] Gesture: ${g.gesture} vs ${this.expectedGesture} = ${gestureMatches}, Overall: ${gestureMatches && handednessMatches}`);
+
+      return gestureMatches && handednessMatches;
+    });
+
+    const detectedInfo = detectedGestures.map(g => `${g.gesture}(${g.handedness})`).join(', ');
+    console.log(`[Hand Gesture] Expected: ${this.expectedGesture} (${this.expectedHandedness}), Detected: ${detectedInfo}, Matched: ${matched}`);
+
+    if (matched && !this.handGestureDetected) {
+      this.handGestureDetected = true;
+      console.log('[Hand Gesture] ✓ GESTURE MATCHED!');
+    }
+
+    const completed = this.handGestureDetected && matched;
+    const progress = matched ? 1.0 : 0.5;
+
+    // Build gesture name with handedness info
+    const gestureName = this.expectedGesture.replace('_', ' ');
+    const handPrefix = this.expectedHandedness !== 'Any' ? `${this.expectedHandedness.toLowerCase()} ` : '';
+    const fullGestureName = `${handPrefix}${gestureName}`;
+
+    let message: string;
+    if (completed) {
+      message = `Perfect! ${fullGestureName} detected!`;
+    } else if (matched) {
+      message = `Good! Hold the ${fullGestureName}...`;
+    } else {
+      const detected = detectedGestures[0]?.gesture.replace('_', ' ') || 'unknown';
+      const detectedHand = detectedGestures[0]?.handedness || 'unknown';
+      message = `Show ${fullGestureName} (detected: ${detected} ${detectedHand})`;
+    }
+
+    return {
+      action: 'hand-gesture' as LivenessAction,
+      completed,
+      progress,
+      message
+    };
+  }
+
+  /**
+   * Detect wave gesture using MoveNet body tracking
+   */
+  private async detectWave(
+    videoElement: HTMLVideoElement
+  ): Promise<LivenessActionResult> {
+    // Detect body pose using MoveNet
+    const pose = await this.openposeService.detectPose(videoElement);
+
+    if (!pose) {
+      return {
+        action: 'wave' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'No pose detected. Please raise your hand and wave.'
+      };
+    }
+
+    // Get right wrist keypoint (index 10 in MoveNet)
+    const rightWrist = pose.keypoints[10];
+    const rightShoulder = pose.keypoints[6];
+
+    if (!rightWrist || rightWrist.score! < 0.3 || !rightShoulder) {
+      return {
+        action: 'wave' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'Raise your right hand above shoulder level'
+      };
+    }
+
+    // Check if hand is raised (wrist above shoulder)
+    const handRaised = rightWrist.y < rightShoulder.y;
+
+    if (!handRaised) {
+      return {
+        action: 'wave' as LivenessAction,
+        completed: false,
+        progress: 0.2,
+        message: 'Raise your right hand higher'
+      };
+    }
+
+    // Track horizontal movement for waving
+    if (this.previousWristX === null) {
+      this.previousWristX = rightWrist.x;
+    } else {
+      const deltaX = rightWrist.x - this.previousWristX;
+      const videoWidth = videoElement.videoWidth || 640;
+      const normalizedDelta = Math.abs(deltaX) / videoWidth;
+
+      // Detect significant horizontal movement (wave motion)
+      if (normalizedDelta > 0.05) { // 5% of screen width
+        const newDirection = deltaX > 0 ? 'right' : 'left';
+
+        // Count direction changes (waving back and forth)
+        if (this.waveDirection && this.waveDirection !== newDirection) {
+          this.waveCount++;
+          console.log(`[Wave] Direction change detected! Count: ${this.waveCount}`);
+        }
+
+        this.waveDirection = newDirection;
+        this.previousWristX = rightWrist.x;
+      }
+    }
+
+    // Complete after 2-3 wave motions
+    const completed = this.waveCount >= 2;
+
+    if (completed && !this.waveDetected) {
+      this.waveDetected = true;
+      console.log('[Wave] ✓ WAVE GESTURE COMPLETED!');
+    }
+
+    const progress = Math.min(1, (this.waveCount / 2) * 0.5 + 0.5);
+
+    return {
+      action: 'wave' as LivenessAction,
+      completed,
+      progress,
+      message: completed ? 'Wave detected!' : `Wave your hand left and right (${this.waveCount}/2)`
+    };
+  }
+
+  /**
+   * Detect clap gesture using MoveNet body tracking
+   */
+  private async detectClap(
+    videoElement: HTMLVideoElement
+  ): Promise<LivenessActionResult> {
+    // Detect body pose using MoveNet
+    const pose = await this.openposeService.detectPose(videoElement);
+
+    if (!pose) {
+      return {
+        action: 'clap' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'No pose detected. Please position yourself in view.'
+      };
+    }
+
+    // Get both wrist keypoints (indices 9 and 10 in MoveNet)
+    const leftWrist = pose.keypoints[9];
+    const rightWrist = pose.keypoints[10];
+
+    if (!leftWrist || leftWrist.score! < 0.3 || !rightWrist || rightWrist.score! < 0.3) {
+      return {
+        action: 'clap' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'Show both hands in view'
+      };
+    }
+
+    // Calculate distance between wrists
+    const dx = leftWrist.x - rightWrist.x;
+    const dy = leftWrist.y - rightWrist.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    const videoWidth = videoElement.videoWidth || 640;
+    const normalizedDistance = distance / videoWidth;
+
+    console.log(`[Clap] Distance between wrists: ${normalizedDistance.toFixed(3)}`);
+
+    // Detect hands apart (starting position)
+    if (normalizedDistance > 0.3 && !this.handsApart) {
+      this.handsApart = true;
+      console.log('[Clap] Hands apart detected');
+    }
+
+    // Detect hands together (clapping)
+    const handsTogether = normalizedDistance < 0.1;
+
+    if (handsTogether && this.handsApart && !this.clapDetected) {
+      this.clapDetected = true;
+      console.log('[Clap] ✓ CLAP DETECTED!');
+    }
+
+    const completed = this.clapDetected;
+    const progress = this.handsApart ? (handsTogether ? 1.0 : 0.5) : 0.2;
+
+    return {
+      action: 'clap' as LivenessAction,
+      completed,
+      progress,
+      message: completed ? 'Clap detected!' :
+               this.handsApart ? 'Now bring your hands together' :
+               'Spread your hands apart first'
+    };
+  }
+
+  /**
+   * Detect cross arms gesture using MoveNet body tracking
+   */
+  private async detectCrossArms(
+    videoElement: HTMLVideoElement
+  ): Promise<LivenessActionResult> {
+    // Detect body pose using MoveNet
+    const pose = await this.openposeService.detectPose(videoElement);
+
+    if (!pose) {
+      return {
+        action: 'cross-arms' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'No pose detected. Please position yourself in view.'
+      };
+    }
+
+    // Get wrist and shoulder keypoints
+    const leftWrist = pose.keypoints[9];
+    const rightWrist = pose.keypoints[10];
+    const leftShoulder = pose.keypoints[5];
+    const rightShoulder = pose.keypoints[6];
+
+    if (!leftWrist || leftWrist.score! < 0.3 || !rightWrist || rightWrist.score! < 0.3 ||
+        !leftShoulder || !rightShoulder) {
+      return {
+        action: 'cross-arms' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'Show both hands and shoulders in view'
+      };
+    }
+
+    // Check if arms are crossed (left wrist near right shoulder, right wrist near left shoulder)
+    const leftWristToRightShoulder = Math.abs(leftWrist.x - rightShoulder.x);
+    const rightWristToLeftShoulder = Math.abs(rightWrist.x - leftShoulder.x);
+    const videoWidth = videoElement.videoWidth || 640;
+
+    const leftCrossed = (leftWristToRightShoulder / videoWidth) < 0.2;
+    const rightCrossed = (rightWristToLeftShoulder / videoWidth) < 0.2;
+
+    // Both wrists should be at chest level (between shoulders and hips)
+    const leftElbow = pose.keypoints[7];
+    const rightElbow = pose.keypoints[8];
+    const atChestLevel = leftWrist.y > leftShoulder.y && rightWrist.y > rightShoulder.y &&
+                         leftElbow && rightElbow &&
+                         leftElbow.y > leftShoulder.y && rightElbow.y > rightShoulder.y;
+
+    const armsCrossed = leftCrossed && rightCrossed && atChestLevel;
+
+    console.log(`[CrossArms] Left crossed: ${leftCrossed}, Right crossed: ${rightCrossed}, At chest: ${atChestLevel}`);
+
+    if (armsCrossed && !this.crossArmsDetected) {
+      this.crossArmsDetected = true;
+      console.log('[CrossArms] ✓ CROSS ARMS DETECTED!');
+    }
+
+    const completed = this.crossArmsDetected;
+    const progress = armsCrossed ? 1.0 : (leftCrossed || rightCrossed ? 0.5 : 0.2);
+
+    return {
+      action: 'cross-arms' as LivenessAction,
+      completed,
+      progress,
+      message: completed ? 'Arms crossed detected!' : 'Cross your arms in front of your chest'
+    };
+  }
+
+  /**
+   * Detect point left-right gesture using MoveNet body tracking
+   */
+  private async detectPoint(
+    videoElement: HTMLVideoElement
+  ): Promise<LivenessActionResult> {
+    // Detect body pose using MoveNet
+    const pose = await this.openposeService.detectPose(videoElement);
+
+    if (!pose) {
+      return {
+        action: 'point' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'No pose detected. Please position yourself in view.'
+      };
+    }
+
+    // Get right wrist keypoint for pointing
+    const rightWrist = pose.keypoints[10];
+    const nose = pose.keypoints[0];
+
+    if (!rightWrist || rightWrist.score! < 0.3 || !nose) {
+      return {
+        action: 'point' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'Raise your right hand to point'
+      };
+    }
+
+    const videoWidth = videoElement.videoWidth || 640;
+    const normalizedWristX = rightWrist.x / videoWidth;
+    const normalizedNoseX = nose.x / videoWidth;
+
+    console.log(`[Point] Wrist X: ${normalizedWristX.toFixed(3)}, Nose X: ${normalizedNoseX.toFixed(3)}`);
+
+    // Detect pointing left (wrist significantly left of nose)
+    if (normalizedWristX < normalizedNoseX - 0.2 && !this.pointedLeft) {
+      this.pointedLeft = true;
+      console.log('[Point] Pointed LEFT!');
+    }
+
+    // Detect pointing right (wrist significantly right of nose)
+    if (normalizedWristX > normalizedNoseX + 0.2 && !this.pointedRight) {
+      this.pointedRight = true;
+      console.log('[Point] Pointed RIGHT!');
+    }
+
+    const completed = this.pointedLeft && this.pointedRight;
+
+    if (completed && !this.pointDetected) {
+      this.pointDetected = true;
+      console.log('[Point] ✓ POINT LEFT-RIGHT COMPLETED!');
+    }
+
+    let progress = 0;
+    if (this.pointedLeft && this.pointedRight) progress = 1.0;
+    else if (this.pointedLeft || this.pointedRight) progress = 0.5;
+
+    let message: string;
+    if (completed) {
+      message = 'Point gesture completed!';
+    } else if (this.pointedLeft) {
+      message = 'Now point to the right';
+    } else if (this.pointedRight) {
+      message = 'Now point to the left';
+    } else {
+      message = 'Point to the left edge of screen';
+    }
+
+    return {
+      action: 'point' as LivenessAction,
+      completed,
+      progress,
+      message
+    };
+  }
+
+  /**
+   * Set expected combined pose type (e.g., "touch-nose", "touch-chin")
+   */
+  setCombinedPoseType(poseType: string | null): void {
+    this.combinedPoseType = poseType;
+    this.combinedPoseDetected = false;
+    console.log('[Combined Pose] Expected pose type set:', poseType);
+  }
+
+  /**
+   * Detect combined face + hand gestures (touch nose, chin, cheek, etc.)
+   */
+  private async detectCombinedPose(
+    videoElement: HTMLVideoElement
+  ): Promise<LivenessActionResult> {
+    if (!this.combinedPoseType) {
+      return {
+        action: 'combined-pose' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'No combined pose type set'
+      };
+    }
+
+    console.log(`[Combined Pose] Type: "${this.combinedPoseType}"`);
+
+    // Detect face using MediaPipe
+    const faceResult = await this.detectFace(videoElement);
+
+    // Detect body pose using MoveNet
+    const bodyPose = await this.openposeService.detectPose(videoElement);
+
+    console.log(`[Combined Pose] Face detected: ${!!faceResult}, Face landmarks: ${faceResult?.faceLandmarks?.length || 0}`);
+    console.log(`[Combined Pose] Body pose detected: ${!!bodyPose}, Keypoints: ${bodyPose?.keypoints?.length || 0}`);
+
+    if (!faceResult || !faceResult.faceLandmarks || faceResult.faceLandmarks.length === 0) {
+      return {
+        action: 'combined-pose' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'No face detected. Please show your face.'
+      };
+    }
+
+    if (!bodyPose || !bodyPose.keypoints || bodyPose.keypoints.length < 11) {
+      console.log(`[Combined Pose] Body pose not detected or insufficient keypoints`);
+      return {
+        action: 'combined-pose' as LivenessAction,
+        completed: false,
+        progress: 0.2,
+        message: 'Face detected. Now show your hand.'
+      };
+    }
+
+    const faceLandmarks = faceResult.faceLandmarks[0];
+    const nose = faceLandmarks[1]; // Nose tip
+    const videoWidth = videoElement.videoWidth || 640;
+    const videoHeight = videoElement.videoHeight || 480;
+
+    // Get hand keypoints from MoveNet
+    const rightWrist = bodyPose.keypoints[10];
+    const leftWrist = bodyPose.keypoints[9];
+
+    console.log(`[Combined Pose] Pose Type: "${this.combinedPoseType}"`);
+    console.log(`[Combined Pose] Left wrist (9): score=${leftWrist?.score?.toFixed(3)}, pos=(${leftWrist?.x?.toFixed(0)}, ${leftWrist?.y?.toFixed(0)})`);
+    console.log(`[Combined Pose] Right wrist (10): score=${rightWrist?.score?.toFixed(3)}, pos=(${rightWrist?.x?.toFixed(0)}, ${rightWrist?.y?.toFixed(0)})`);
+    console.log(`[Combined Pose] Nose: pos=(${(nose.x * videoWidth).toFixed(0)}, ${(nose.y * videoHeight).toFixed(0)})`);
+    console.log(`[Combined Pose] Video dimensions: ${videoWidth}x${videoHeight}`);
+
+    let matched = false;
+    let message = '';
+
+    // Match based on combined pose type
+    if (this.combinedPoseType.includes('touch-nose')) {
+      // Determine which hand to check based on pose name
+      const isRightHand = this.combinedPoseType.includes('right');
+      const isLeftHand = this.combinedPoseType.includes('left');
+
+      // MoveNet keypoints: 9 = left wrist, 10 = right wrist
+      // MoveNet reports from the PERSON'S perspective (not camera mirrored)
+      // User's right hand → MoveNet right wrist (10)
+      // User's left hand → MoveNet left wrist (9)
+      let wrist;
+      let handLabel;
+
+      if (isRightHand) {
+        // User shows RIGHT hand → use rightWrist (10)
+        wrist = rightWrist;
+        handLabel = 'right';
+        console.log(`[Touch Nose] Checking user's RIGHT hand (MoveNet rightWrist index 10)`);
+      } else if (isLeftHand) {
+        // User shows LEFT hand → use leftWrist (9)
+        wrist = leftWrist;
+        handLabel = 'left';
+        console.log(`[Touch Nose] Checking user's LEFT hand (MoveNet leftWrist index 9)`);
+      } else {
+        // Default: check right wrist (user's right hand)
+        wrist = rightWrist;
+        handLabel = 'right';
+        console.log(`[Touch Nose] Default: checking user's RIGHT hand (MoveNet rightWrist index 10)`);
+      }
+
+      console.log(`[Touch Nose] Expected ${handLabel} wrist detected: ${!!wrist}, Score: ${wrist?.score?.toFixed(3) || 'N/A'}, Position: (${wrist?.x?.toFixed(0)}, ${wrist?.y?.toFixed(0)})`);
+      console.log(`[Touch Nose] Nose position: (${(nose.x * videoWidth).toFixed(0)}, ${(nose.y * videoHeight).toFixed(0)})`);
+
+      // STRICT MODE: Only use the hand specified in the pose name
+      // Do NOT fall back to the other hand, even if it has better confidence
+      // This ensures users use the correct hand as instructed
+
+      // Lowered threshold (0.10) - accommodates weaker MoveNet detection on one side
+      if (wrist && wrist.score! > 0.10) {
+        const dx = (wrist.x / videoWidth) - nose.x;
+        const dy = (wrist.y / videoHeight) - nose.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        // Additional check: wrist should be BELOW nose (not above/behind)
+        // When touching nose from front, wrist is below nose tip
+        // If wrist is above nose (dy < -0.1), hand might be behind head
+        const wristY = wrist.y / videoHeight;
+        const isBelowOrNearNose = dy > -0.08; // Allow slight margin for natural hand position
+
+        console.log(`[Touch Nose] Using ${handLabel} wrist - Distance: ${distance.toFixed(4)} (threshold: 0.18), dy: ${dy.toFixed(4)}, belowNose: ${isBelowOrNearNose}`);
+
+        // Two conditions must be met:
+        // 1. Distance close enough (< 0.18)
+        // 2. Wrist not significantly above nose (prevents behind-head detection)
+        const distanceCheck = distance < 0.18;
+        matched = distanceCheck && isBelowOrNearNose;
+
+        if (!isBelowOrNearNose) {
+          message = `Bring your ${handLabel} hand in FRONT of your face (not behind head)`;
+          console.log(`[Touch Nose] Hand appears to be above/behind nose (dy=${dy.toFixed(3)})`);
+        } else if (matched) {
+          message = `Touching nose with ${handLabel} hand!`;
+        } else if (distance < 0.25) {
+          message = `Almost there! Move ${handLabel} hand closer (${(distance * 100).toFixed(0)}% away)`;
+        } else if (distance < 0.40) {
+          message = `Getting closer with ${handLabel} hand... (${(distance * 100).toFixed(0)}% away)`;
+        } else {
+          message = `Raise your ${handLabel} hand toward your nose`;
+        }
+      } else {
+        message = `Use your ${handLabel} hand to touch your nose (hand not detected clearly)`;
+        console.log(`[Touch Nose] ${handLabel} wrist not detected or confidence too low (need > 0.10, got ${wrist?.score?.toFixed(3) || 'N/A'})`);
+      }
+    } else if (this.combinedPoseType.includes('touch-chin')) {
+      const chin = faceLandmarks[152]; // Chin landmark
+      if (leftWrist && leftWrist.score! > 0.3) {
+        const dx = (leftWrist.x / videoWidth) - chin.x;
+        const dy = (leftWrist.y / videoHeight) - chin.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        matched = distance < 0.1;
+        message = matched ? 'Touching chin!' : 'Move your finger closer to your chin';
+      } else {
+        message = 'Raise your left hand to your chin';
+      }
+    } else if (this.combinedPoseType.includes('touch') && this.combinedPoseType.includes('cheek')) {
+      // Determine which hand and which cheek based on pose name
+      const isRightCheek = this.combinedPoseType.includes('right');
+      const isLeftCheek = this.combinedPoseType.includes('left');
+
+      // MediaPipe face landmarks: left cheek ≈ 234, right cheek ≈ 454
+      const leftCheek = faceLandmarks[234];
+      const rightCheek = faceLandmarks[454];
+
+      let wrist;
+      let cheek;
+      let handLabel;
+
+      if (isRightCheek) {
+        // Touch RIGHT cheek → use RIGHT hand (rightWrist index 10)
+        wrist = rightWrist;
+        cheek = rightCheek;
+        handLabel = 'right';
+        console.log(`[Touch Cheek] Checking user's RIGHT hand for RIGHT cheek`);
+      } else if (isLeftCheek) {
+        // Touch LEFT cheek → use LEFT hand (leftWrist index 9)
+        wrist = leftWrist;
+        cheek = leftCheek;
+        handLabel = 'left';
+        console.log(`[Touch Cheek] Checking user's LEFT hand for LEFT cheek`);
+      } else {
+        // Default: right cheek with right hand
+        wrist = rightWrist;
+        cheek = rightCheek;
+        handLabel = 'right';
+      }
+
+      console.log(`[Touch Cheek] ${handLabel} wrist detected: ${!!wrist}, Score: ${wrist?.score?.toFixed(3) || 'N/A'}`);
+      console.log(`[Touch Cheek] Cheek position: (${(cheek.x * videoWidth).toFixed(0)}, ${(cheek.y * videoHeight).toFixed(0)})`);
+
+      // Lower threshold (0.10) - same as touch nose for consistency
+      if (wrist && wrist.score! > 0.10) {
+        const dx = (wrist.x / videoWidth) - cheek.x;
+        const dy = (wrist.y / videoHeight) - cheek.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        console.log(`[Touch Cheek] Using ${handLabel} wrist - Distance: ${distance.toFixed(4)} (threshold: 0.15)`);
+
+        // Cheek is wider area than nose, so slightly more lenient distance
+        const distanceCheck = distance < 0.15;
+        matched = distanceCheck;
+
+        if (matched) {
+          message = `Touching ${handLabel} cheek!`;
+        } else if (distance < 0.25) {
+          message = `Almost there! Move ${handLabel} hand closer to ${handLabel} cheek (${(distance * 100).toFixed(0)}% away)`;
+        } else {
+          message = `Raise your ${handLabel} hand toward your ${handLabel} cheek`;
+        }
+      } else {
+        message = `Use your ${handLabel} hand to touch your ${handLabel} cheek (hand not detected clearly)`;
+        console.log(`[Touch Cheek] ${handLabel} wrist not detected or confidence too low (need > 0.10, got ${wrist?.score?.toFixed(3) || 'N/A'})`);
+      }
+    } else if (this.combinedPoseType.includes('cover') && this.combinedPoseType.includes('eye')) {
+      // For covering eye, we need MediaPipe hand landmarks (palm position)
+      // MoveNet wrist is too far from the actual covering position
+      const handResult = await this.handGestureService.detectHands(videoElement);
+
+      // Determine which eye and hand based on pose name
+      const isRightEye = this.combinedPoseType.includes('right');
+      const isLeftEye = this.combinedPoseType.includes('left');
+
+      // MediaPipe face landmarks: left eye ≈ 33, right eye ≈ 263
+      const leftEye = faceLandmarks[33];
+      const rightEye = faceLandmarks[263];
+
+      let eye;
+      let handLabel;
+      let expectedHandedness;
+
+      if (isRightEye) {
+        eye = rightEye;
+        handLabel = 'right';
+        expectedHandedness = 'Right';
+        console.log(`[Cover Eye] Checking user's RIGHT hand for RIGHT eye`);
+      } else if (isLeftEye) {
+        eye = leftEye;
+        handLabel = 'left';
+        expectedHandedness = 'Left';
+        console.log(`[Cover Eye] Checking user's LEFT hand for LEFT eye`);
+      } else {
+        // Default: right eye with right hand
+        eye = rightEye;
+        handLabel = 'right';
+        expectedHandedness = 'Right';
+      }
+
+      console.log(`[Cover Eye] Eye position: (${(eye.x * videoWidth).toFixed(0)}, ${(eye.y * videoHeight).toFixed(0)})`);
+
+      // Check if correct hand is detected by MediaPipe
+      let handDetected = false;
+      let palmX = 0;
+      let palmY = 0;
+
+      if (handResult && handResult.landmarks && handResult.landmarks.length > 0) {
+        // Find the correct hand based on handedness
+        for (let i = 0; i < handResult.landmarks.length; i++) {
+          const handedness = handResult.handedness[i][0];
+          console.log(`[Cover Eye] Hand ${i}: ${handedness.categoryName} (confidence: ${handedness.score.toFixed(3)})`);
+
+          if (handedness.categoryName === expectedHandedness && handedness.score > 0.5) {
+            // Use palm center (landmark 0) for better accuracy
+            const palmLandmark = handResult.landmarks[i][0];
+            palmX = palmLandmark.x;
+            palmY = palmLandmark.y;
+            handDetected = true;
+            console.log(`[Cover Eye] ${handLabel} hand palm detected at: (${(palmX * videoWidth).toFixed(0)}, ${(palmY * videoHeight).toFixed(0)})`);
+            break;
+          }
+        }
+      }
+
+      if (handDetected) {
+        const dx = palmX - eye.x;
+        const dy = palmY - eye.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        console.log(`[Cover Eye] Using ${handLabel} hand palm - Distance: ${distance.toFixed(4)} (threshold: 0.15)`);
+
+        // More lenient distance since palm is being used instead of fingertips
+        const distanceCheck = distance < 0.15;
+        matched = distanceCheck;
+
+        if (matched) {
+          message = `Covering ${handLabel} eye!`;
+        } else if (distance < 0.25) {
+          message = `Almost there! Move ${handLabel} hand closer to ${handLabel} eye (${(distance * 100).toFixed(0)}% away)`;
+        } else {
+          message = `Raise your ${handLabel} hand to cover your ${handLabel} eye`;
+        }
+      } else {
+        message = `Use your ${handLabel} hand to cover your ${handLabel} eye (hand not detected clearly)`;
+        console.log(`[Cover Eye] ${handLabel} hand not detected by MediaPipe`);
+      }
+    } else if (this.combinedPoseType.includes('cover') && this.combinedPoseType.includes('mouth')) {
+      // Check if hand is near mouth level
+      // Use mouth landmarks: 13 (upper lip), 14 (lower lip center)
+      const upperLip = faceLandmarks[13];
+      const lowerLip = faceLandmarks[14];
+      const mouthCenterY = (upperLip.y + lowerLip.y) / 2;
+      const mouthCenterX = (upperLip.x + lowerLip.x) / 2;
+      const wrist = rightWrist || leftWrist;
+
+      if (wrist && wrist.score! > 0.3) {
+        const dx = (wrist.x / videoWidth) - mouthCenterX;
+        const dy = (wrist.y / videoHeight) - mouthCenterY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        console.log(`[Combined Pose] Cover Mouth - Distance: ${distance.toFixed(3)}, Wrist: (${(wrist.x / videoWidth).toFixed(3)}, ${(wrist.y / videoHeight).toFixed(3)}), Mouth: (${mouthCenterX.toFixed(3)}, ${mouthCenterY.toFixed(3)})`);
+
+        matched = distance < 0.15; // Increased threshold for easier detection
+        message = matched ? 'Covering mouth!' : `Move your hand closer to your mouth (${Math.round(distance * 100)}% away)`;
+      } else {
+        message = 'Raise your hand to cover your mouth';
+      }
+    } else if (this.combinedPoseType.includes('frame-face')) {
+      // Check if both hands are near sides of face
+      if (leftWrist && leftWrist.score! > 0.3 && rightWrist && rightWrist.score! > 0.3) {
+        const faceX = nose.x;
+        const leftX = leftWrist.x / videoWidth;
+        const rightX = rightWrist.x / videoWidth;
+
+        // Hands should be on opposite sides of face
+        const leftSide = leftX < faceX - 0.1;
+        const rightSide = rightX > faceX + 0.1;
+        const atFaceLevel = Math.abs((leftWrist.y + rightWrist.y) / 2 / videoHeight - nose.y) < 0.15;
+
+        matched = leftSide && rightSide && atFaceLevel;
+        message = matched ? 'Framing face!' : 'Position both hands on sides of your face';
+      } else {
+        message = 'Raise both hands to frame your face';
+      }
+    } else {
+      // Generic combined pose
+      matched = rightWrist && rightWrist.score! > 0.3 && leftWrist && leftWrist.score! > 0.3;
+      message = matched ? 'Pose detected!' : 'Show the required pose';
+    }
+
+    console.log(`[Combined Pose] Matched: ${matched}, Previously detected: ${this.combinedPoseDetected}`);
+
+    if (matched && !this.combinedPoseDetected) {
+      this.combinedPoseDetected = true;
+      console.log('[Combined Pose] ✓ COMBINED POSE MATCHED!');
+    }
+
+    const completed = this.combinedPoseDetected && matched;
+    const progress = matched ? 1.0 : (bodyPose ? 0.5 : 0.2);
+
+    console.log(`[Combined Pose] Completed: ${completed}, Progress: ${progress}, Message: "${message}"`);
+
+    return {
+      action: 'combined-pose' as LivenessAction,
+      completed,
+      progress,
+      message: completed ? `Perfect! ${this.combinedPoseType} detected!` : message
+    };
+  }
+
+  /**
+   * Detect pose using static reference keypoints
+   */
+  private async detectStaticPose(
+    videoElement: HTMLVideoElement
+  ): Promise<LivenessActionResult> {
+    console.log('[StaticPose] detectStaticPose called - starting detection');
+
+    // Detect current pose using OpenPose
+    const currentPose = await this.openposeService.detectPose(videoElement);
+
+    if (!currentPose) {
+      console.log('[StaticPose] No pose detected by OpenPose/MoveNet - currentPose is null');
+      return {
+        action: 'custom-pose' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'No pose detected. Please position yourself in frame.'
+      };
+    }
+
+    // Get video dimensions for normalization
+    const videoWidth = videoElement.videoWidth || 640;
+    const videoHeight = videoElement.videoHeight || 480;
+
+    console.log(`[StaticPose] Pose detected! Keypoints: ${currentPose.keypoints?.length || 0}, Score: ${currentPose.score?.toFixed(3) || 'N/A'}`);
+    console.log(`[StaticPose] Video dimensions: ${videoWidth}x${videoHeight}`);
+
+    // Compare with static keypoints (pass video dimensions for normalization)
+    const similarity = this.compareWithStaticKeypoints(currentPose, videoWidth, videoHeight);
+
+    console.log(`[StaticPose] Similarity: ${(similarity * 100).toFixed(1)}%`);
+
+    // Track completion (require 45% similarity - adjusted for real-world use)
+    const isMatched = similarity >= 0.45;
+
+    if (isMatched && !this.customPoseDetected) {
+      this.customPoseDetected = true;
+      console.log('[StaticPose] ✓ POSE MATCHED!');
+    } else if (!isMatched) {
+      this.customPoseDetected = false;
+    }
+
+    const completed = this.customPoseDetected && isMatched;
+    const progress = similarity;
+
+    let message: string;
+    if (completed) {
+      message = 'Perfect! Pose matched!';
+    } else if (similarity >= 0.40) {
+      message = `Almost there! ${Math.round(similarity * 100)}% - Hold steady`;
+    } else if (similarity >= 0.30) {
+      message = `Getting closer... ${Math.round(similarity * 100)}% - Adjust slightly`;
+    } else if (similarity >= 0.15) {
+      message = `Raise your hand to shoulder level - ${Math.round(similarity * 100)}%`;
+    } else {
+      message = 'Position your hand as shown in the reference image';
+    }
+
+    return {
+      action: 'custom-pose' as LivenessAction,
+      completed,
+      progress,
+      message
+    };
+  }
+
+  /**
+   * Compare current pose keypoints with static reference keypoints
+   * @param currentPose - Pose detected by MoveNet (pixel coordinates)
+   * @param videoWidth - Video width for normalization
+   * @param videoHeight - Video height for normalization
+   */
+  private compareWithStaticKeypoints(currentPose: any, videoWidth: number, videoHeight: number): number {
+    if (!this.staticPoseKeypoints || this.staticPoseKeypoints.length === 0) {
+      console.log('[StaticPose] No static keypoints available for comparison');
+      return 0;
+    }
+
+    console.log(`[StaticPose] Comparing ${currentPose.keypoints.length} detected keypoints with ${this.staticPoseKeypoints.length} reference keypoints`);
+
+    let totalScore = 0;
+    let totalWeight = 0;
+    let detectedCount = 0;
+    let skippedCount = 0;
+
+    // Compare each keypoint
+    for (let i = 0; i < Math.min(currentPose.keypoints.length, this.staticPoseKeypoints.length); i++) {
+      const currentKp = currentPose.keypoints[i];
+      const referenceKp = this.staticPoseKeypoints[i];
+
+      // Skip keypoints with low confidence in reference
+      if (referenceKp.confidence < 0.1) {
+        skippedCount++;
+        continue;
+      }
+
+      // Check if current keypoint is detected (MoveNet uses 'score')
+      if (!currentKp || currentKp.score < 0.1) {
+        // Keypoint not detected - penalize based on reference confidence
+        totalWeight += referenceKp.confidence;
+        continue;
+      }
+
+      detectedCount++;
+
+      // Normalize pixel coordinates to 0-1 range
+      // MoveNet returns pixel coordinates, but our reference uses normalized 0-1
+      const normalizedX = currentKp.x / videoWidth;
+      const normalizedY = currentKp.y / videoHeight;
+
+      // Calculate distance between normalized keypoints
+      const dx = normalizedX - referenceKp.x;
+      const dy = normalizedY - referenceKp.y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      // Convert distance to similarity score (0-1)
+      // Distance threshold: 0.25 (25% of normalized space) - more forgiving for real-world use
+      const maxDist = 0.25;
+      const kpSimilarity = Math.max(0, 1 - (distance / maxDist));
+
+      // Weight by reference confidence
+      const weight = referenceKp.confidence;
+      totalScore += kpSimilarity * weight;
+      totalWeight += weight;
+
+      // Log important keypoints (right wrist for Right Palm pose)
+      if (i === 10 && referenceKp.confidence >= 1.0) {
+        console.log(`[StaticPose] Key keypoint #${i} (right_wrist):`);
+        console.log(`  Detected (pixel): (${currentKp.x.toFixed(1)}, ${currentKp.y.toFixed(1)})`);
+        console.log(`  Detected (normalized): (${normalizedX.toFixed(3)}, ${normalizedY.toFixed(3)})`);
+        console.log(`  Reference (normalized): (${referenceKp.x.toFixed(3)}, ${referenceKp.y.toFixed(3)})`);
+        console.log(`  Distance: ${distance.toFixed(3)}, Similarity: ${kpSimilarity.toFixed(3)}`);
+      }
+    }
+
+    const finalScore = totalWeight > 0 ? totalScore / totalWeight : 0;
+    console.log(`[StaticPose] Comparison: ${detectedCount} keypoints detected, ${skippedCount} skipped, total weight: ${totalWeight.toFixed(2)}, final score: ${finalScore.toFixed(3)}`);
+
+    return finalScore;
+  }
+
+  /**
+   * Detect custom reference pose (using static keypoints or uploaded reference)
+   */
+  private async detectCustomPose(
+    videoElement: HTMLVideoElement
+  ): Promise<LivenessActionResult> {
+    // Check for static keypoints first (from predefined poses)
+    if (this.staticPoseKeypoints && this.staticPoseKeypoints.length > 0) {
+      return await this.detectStaticPose(videoElement);
+    }
+
+    // Fallback to uploaded reference pose
+    const referencePose = this.referencePoseService.getReferencePose();
+
+    if (!referencePose) {
+      return {
+        action: 'custom-pose' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'No reference pose loaded'
+      };
+    }
+
+    // Detect current pose using OpenPose
+    const currentPose = await this.openposeService.detectPose(videoElement);
+
+    if (!currentPose) {
+      return {
+        action: 'custom-pose' as LivenessAction,
+        completed: false,
+        progress: 0,
+        message: 'No pose detected. Please position yourself in frame.'
+      };
+    }
+
+    // Compare poses
+    const comparisonResult = this.poseComparisonService.comparePoses(
+      currentPose,
+      referencePose
+    );
+
+    console.log(`[CustomPose] Similarity: ${(comparisonResult.overallScore * 100).toFixed(1)}%, Matched: ${comparisonResult.matched}`);
+
+    // Track completion
+    if (comparisonResult.matched && !this.customPoseDetected) {
+      this.customPoseDetected = true;
+      console.log('[CustomPose] ✓ CUSTOM POSE MATCHED!');
+    }
+
+    const completed = this.customPoseDetected && comparisonResult.matched;
+
+    return {
+      action: 'custom-pose' as LivenessAction,
+      completed,
+      progress: comparisonResult.overallScore,
+      message: comparisonResult.feedback
+    };
+  }
+
+  /**
+   * Reset action detection state
+   */
+  resetActionState(): void {
+    this.blinkDetected = false;
+    this.blinkCount = 0;
+    this.lastBlinkTime = 0;
+    this.maxEAR = 0;
+    this.minEARDuringBlink = Infinity;
+    this.frameCount = 0;
+    this.initialPitch = null;
+    this.nodDirection = null;
+    this.initialYaw = null;
+    this.shakeDirection = null;
+    this.shakeCount = 0;
+    this.smileDetected = false;
+    this.openMouthDetected = false;
+    this.eyebrowsRaisedDetected = false;
+    this.winkDetected = false;
+    this.followDotMovements = 0;
+    this.lastGazeDirection = null;
+    this.mouthMovementCount = 0;
+    this.lastMouthOpenness = 0;
+    this.smileThumbsUpDetected = false;
+    this.thumbsUpDetected = false;
+    this.customPoseDetected = false;
+    this.handGestureDetected = false;
+    this.expectedGesture = null;
+    this.expectedHandedness = 'Any';
+    // Reset rotate face state
+    this.rotationSequence = [];
+    this.lastRotationYaw = 0;
+    this.rotationStage = 'center';
+    this.rotateFaceDetected = false;
+    // Reset movement gesture state
+    this.waveDetected = false;
+    this.waveDirection = null;
+    this.previousWristX = null;
+    this.waveCount = 0;
+    this.clapDetected = false;
+    this.handsApart = false;
+    this.crossArmsDetected = false;
+    this.pointDetected = false;
+    this.pointedLeft = false;
+    this.pointedRight = false;
+    // Reset combined pose state
+    this.combinedPoseDetected = false;
+    this.combinedPoseType = null;
+  }
+
+  /**
+   * Cleanup resources
+   */
+  cleanup(): void {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.resetActionState();
+
+    if (this.faceLandmarker) {
+      this.faceLandmarker.close();
+      this.faceLandmarker = null;
+      this.modelsLoaded = false;
+    }
+  }
+}