facecog-liveness-showcase 0.0.1

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

@@ -0,0 +1,721 @@
+import { Component, EventEmitter, Input, Output, OnInit, Optional, Inject } from '@angular/core';
+import { IonicModule, ModalController, AlertController, ToastController, LoadingController } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ReferencePoseService, ReferencePose } from '../../services/pose-detection/reference-pose.service';
+import { OpenposeService } from '../../services/pose-detection/openpose.service';
+import { PoseSelectionService, SelectedPoseInfo } from '../../services/pose-selection.service';
+import { LivenessConfigService } from '../../services/liveness-config.service';
+import { ICustomPoseRepository, CUSTOM_POSE_REPOSITORY } from '../../interfaces/custom-pose-repository.interface';
+import { PoseDefinition } from '../../interfaces/pose-definition.interface';
+import { LivenessBackend } from '../../types/liveness-backend.type';
+import { POSE_DEFINITIONS } from '../../models/constants/pose-definitions.constant';
+import { CATEGORY_INFO } from '../../models/constants/category-info.constant';
+import { mergeCustomPoses, customPoseToPoseDefinition } from '../../models/utils/pose.utils';
+import { SaveCustomPoseDialogComponent } from '../dialogs/save-custom-pose-dialog.component';
+
+@Component({
+  selector: 'lib-intro',
+  standalone: true,
+  imports: [CommonModule, IonicModule, FormsModule],
+  templateUrl: './intro.component.html',
+  styleUrls: ['./intro.component.scss']
+})
+export class IntroComponent implements OnInit {
+  @Input() exampleImageUrl?: string;
+  @Input() exampleImageBase64?: string;
+  /** When true (pose-specific flow from host), hide backend selection, cancel, and pose-choice text. */
+  @Input() poseSpecificMode = false;
+  @Output() startClicked = new EventEmitter<void>();
+  @Output() cancelClicked = new EventEmitter<void>();
+  @Output() referencePoseUploaded = new EventEmitter<ReferencePose>();
+  @Output() poseSelected = new EventEmitter<SelectedPoseInfo>();
+  @Output() awsFaceLivenessToggled = new EventEmitter<boolean>();
+
+  // Pose selection state
+  allPoses: PoseDefinition[] = POSE_DEFINITIONS;
+  selectedPose: SelectedPoseInfo | null = null;
+  categoryInfo = CATEGORY_INFO;
+
+  // Filter state
+  selectedCategory: PoseDefinition['category'] | 'all' = 'all';
+  selectedDifficulty: PoseDefinition['difficulty'] | 'all' = 'all';
+  searchQuery: string = '';
+
+  // UI state
+  viewMode: 'grid' | 'list' = 'grid';
+  showFilters: boolean = false;
+
+  // Pose selection mode: 'browse' (grid) or 'upload' (custom image)
+  poseSelectionMode: 'browse' | 'upload' = 'browse';
+
+  // Reference pose upload state
+  referencePoseImage: string | null = null;
+  referencePoseDescription: string | null = null;
+  isProcessingImage = false;
+  poseDetectionStatus: { success: boolean; message: string } | null = null;
+  isDragging = false;
+  isSavingCustomPose = false; // Prevent double-submission
+
+  // Backend selection state
+  selectedBackends: { [key: string]: boolean } = {
+    amazon: true,
+    openpose: true,
+    facetec: false
+  };
+
+  // Available backend options with descriptions
+  backendOptions = [
+    { id: 'amazon', name: 'Amazon Rekognition', description: 'Face detection & image quality analysis' },
+    { id: 'openpose', name: 'OpenPose/MoveNet', description: 'Pose detection with TensorFlow' },
+    { id: 'facetec', name: 'FaceTec 3D', description: '3D face liveness detection' }
+  ];
+
+  showBackendSettings: boolean = false;
+
+  // AWS Face Liveness (Anti-Spoofing) toggle
+  useAwsFaceLiveness: boolean = false;
+
+  // Browser detection for AWS Face Liveness compatibility
+  isSafariBrowser: boolean = false;
+
+  // Custom pose feature availability
+  get customPosesEnabled(): boolean {
+    return !!this.customPoseRepo;
+  }
+
+  get displayImage(): string | undefined {
+    return this.exampleImageBase64 || this.exampleImageUrl;
+  }
+
+  get filteredPoses(): PoseDefinition[] {
+    let filtered = this.allPoses;
+
+    // Filter by category
+    if (this.selectedCategory !== 'all') {
+      filtered = filtered.filter(pose => pose.category === this.selectedCategory);
+    }
+
+    // Filter by difficulty
+    if (this.selectedDifficulty !== 'all') {
+      filtered = filtered.filter(pose => pose.difficulty === this.selectedDifficulty);
+    }
+
+    // Filter by search query
+    if (this.searchQuery.trim()) {
+      const query = this.searchQuery.toLowerCase();
+      filtered = filtered.filter(pose =>
+        pose.name.toLowerCase().includes(query) ||
+        pose.description.toLowerCase().includes(query)
+      );
+    }
+
+    return filtered;
+  }
+
+  get categories(): Array<{ key: PoseDefinition['category'] | 'all'; label: string }> {
+    return [
+      { key: 'all', label: 'All Poses' },
+      { key: 'face', label: 'Face Expressions' },
+      { key: 'head', label: 'Head Movements' },
+      { key: 'hand', label: 'Hand Gestures' },
+      { key: 'gesture', label: 'Gestures' },
+      { key: 'combined', label: 'Combined' }
+    ];
+  }
+
+  get difficulties(): Array<{ key: PoseDefinition['difficulty'] | 'all'; label: string }> {
+    return [
+      { key: 'all', label: 'All Levels' },
+      { key: 'easy', label: 'Easy' },
+      { key: 'medium', label: 'Medium' },
+      { key: 'hard', label: 'Hard' }
+    ];
+  }
+
+  // Store reference pose for saving
+  private referencePose: ReferencePose | null = null;
+
+  constructor(
+    private referencePoseService: ReferencePoseService,
+    private openposeService: OpenposeService,
+    private poseSelectionService: PoseSelectionService,
+    private configService: LivenessConfigService,
+    private modalCtrl: ModalController,
+    private alertCtrl: AlertController,
+    private toastCtrl: ToastController,
+    private loadingCtrl: LoadingController,
+    @Optional() @Inject(CUSTOM_POSE_REPOSITORY) private customPoseRepo?: ICustomPoseRepository
+  ) {
+    // Apply initial backend configuration
+    this.applyBackendConfig();
+
+    // Detect Safari browser for AWS Face Liveness compatibility warning
+    this.detectSafariBrowser();
+  }
+
+  /**
+   * Detect if the browser is Safari (not compatible with AWS Face Liveness)
+   */
+  private detectSafariBrowser(): void {
+    const userAgent = navigator.userAgent.toLowerCase();
+    this.isSafariBrowser = /safari/.test(userAgent) && !/chrome/.test(userAgent) && !/chromium/.test(userAgent);
+    if (this.isSafariBrowser) {
+      console.log('[IntroComponent] Safari browser detected - AWS Face Liveness may not work');
+    }
+  }
+
+  /**
+   * Apply the selected backends to the config service
+   */
+  applyBackendConfig(): void {
+    const backends = Object.entries(this.selectedBackends)
+      .filter(([_, enabled]) => enabled)
+      .map(([id]) => id as LivenessBackend);
+
+    if (backends.length === 0) {
+      // Default to amazon if nothing selected
+      backends.push('amazon');
+      this.selectedBackends['amazon'] = true;
+    }
+
+    console.log('[IntroComponent] Configuring backends:', backends);
+    this.configService.enableBackends(backends);
+  }
+
+  /**
+   * Handle backend checkbox change
+   */
+  onBackendChange(): void {
+    this.applyBackendConfig();
+  }
+
+  /**
+   * Get count of selected backends
+   */
+  getSelectedBackendCount(): number {
+    return Object.values(this.selectedBackends).filter(v => v).length;
+  }
+
+  /**
+   * Get name of the single selected backend
+   */
+  getSelectedBackendName(): string {
+    const selectedId = Object.entries(this.selectedBackends)
+      .find(([_, enabled]) => enabled)?.[0];
+    return this.backendOptions.find(b => b.id === selectedId)?.name || 'Unknown';
+  }
+
+  /**
+   * Toggle backend settings visibility
+   */
+  toggleBackendSettings(): void {
+    this.showBackendSettings = !this.showBackendSettings;
+  }
+
+  /**
+   * Handle AWS Face Liveness toggle change
+   */
+  onAwsFaceLivenessChange(): void {
+    console.log('[IntroComponent] AWS Face Liveness toggled:', this.useAwsFaceLiveness);
+    this.awsFaceLivenessToggled.emit(this.useAwsFaceLiveness);
+  }
+
+  async ngOnInit() {
+    try {
+      // Load OpenPose model on component init
+      console.log('[Intro] Loading OpenPose model...');
+      await this.openposeService.loadModel();
+      console.log('[Intro] OpenPose model loaded successfully');
+
+      // Load custom poses from backend if available
+      if (this.customPoseRepo) {
+        this.customPoseRepo.loadCustomPoses().subscribe({
+          next: (response) => {
+            if (response.success && response.poses) {
+              // Merge custom poses with static poses
+              this.allPoses = mergeCustomPoses(response.poses);
+              console.log('[Intro] Loaded custom poses:', response.poses.length);
+            }
+          },
+          error: (error) => {
+            console.error('[Intro] Failed to load custom poses:', error);
+            // Continue with static poses only
+            this.allPoses = POSE_DEFINITIONS;
+          }
+        });
+      }
+
+      // Subscribe to pose selection changes
+      this.poseSelectionService.selectedPose$.subscribe(selectedPose => {
+        this.selectedPose = selectedPose;
+      });
+    } catch (error) {
+      console.error('[Intro] Failed to load OpenPose model:', error);
+    }
+  }
+
+  /**
+   * Handle mode change between browse and upload
+   */
+  onModeChange(event: any): void {
+    this.poseSelectionMode = event.detail.value;
+    console.log('[Intro] Pose selection mode changed to:', this.poseSelectionMode);
+  }
+
+  /**
+   * Handle drag over event
+   */
+  onDragOver(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragging = true;
+  }
+
+  /**
+   * Handle drag leave event
+   */
+  onDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragging = false;
+  }
+
+  /**
+   * Handle file drop event
+   */
+  async onDrop(event: DragEvent): Promise<void> {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragging = false;
+
+    const files = event.dataTransfer?.files;
+    if (!files || files.length === 0) {
+      return;
+    }
+
+    const file = files[0];
+
+    // Validate file type
+    if (!file.type.startsWith('image/')) {
+      this.poseDetectionStatus = {
+        success: false,
+        message: 'Please drop a valid image file'
+      };
+      return;
+    }
+
+    // Validate file size (max 10MB)
+    const maxSize = 10 * 1024 * 1024; // 10MB
+    if (file.size > maxSize) {
+      this.poseDetectionStatus = {
+        success: false,
+        message: 'Image file is too large. Maximum size is 10MB.'
+      };
+      return;
+    }
+
+    await this.processReferenceImage(file);
+  }
+
+  /**
+   * Handle file selection from file input element
+   */
+  async onFileSelected(event: Event): Promise<void> {
+    const input = event.target as HTMLInputElement;
+
+    if (!input.files || input.files.length === 0) {
+      return;
+    }
+
+    const file = input.files[0];
+
+    // Validate file type
+    if (!file.type.startsWith('image/')) {
+      this.poseDetectionStatus = {
+        success: false,
+        message: 'Please select a valid image file'
+      };
+      return;
+    }
+
+    // Validate file size (max 10MB)
+    const maxSize = 10 * 1024 * 1024; // 10MB
+    if (file.size > maxSize) {
+      this.poseDetectionStatus = {
+        success: false,
+        message: 'Image file is too large. Maximum size is 10MB.'
+      };
+      return;
+    }
+
+    await this.processReferenceImage(file);
+  }
+
+  /**
+   * Process uploaded reference image
+   */
+  private async processReferenceImage(file: File): Promise<void> {
+    try {
+      // Clear any selected pose from grid (mutual exclusivity)
+      if (this.selectedPose) {
+        this.clearPoseSelection();
+      }
+
+      this.isProcessingImage = true;
+      this.poseDetectionStatus = null;
+
+      console.log('[Intro] Processing reference image:', file.name);
+
+      // Extract pose from image
+      const referencePose = await this.referencePoseService.extractPoseFromImage(file);
+
+      // Store reference pose for later saving
+      this.referencePose = referencePose;
+
+      // Update UI
+      this.referencePoseImage = referencePose.imageData;
+      this.referencePoseDescription = referencePose.poseDescription;
+      this.poseDetectionStatus = {
+        success: true,
+        message: 'Pose detected successfully!'
+      };
+
+      // Emit event to parent component
+      this.referencePoseUploaded.emit(referencePose);
+
+      console.log('[Intro] Reference pose processed successfully');
+    } catch (error: any) {
+      console.error('[Intro] Failed to process reference image:', error);
+
+      this.poseDetectionStatus = {
+        success: false,
+        message: error.message || 'Failed to detect pose in the image'
+      };
+
+      this.referencePoseImage = null;
+      this.referencePoseDescription = null;
+    } finally {
+      this.isProcessingImage = false;
+    }
+  }
+
+  /**
+   * Clear reference pose and revert to default
+   */
+  clearReferencePose(): void {
+    this.referencePoseImage = null;
+    this.referencePoseDescription = null;
+    this.poseDetectionStatus = null;
+    this.referencePose = null;
+    this.isSavingCustomPose = false; // Reset save flag
+    this.referencePoseService.clearReferencePose();
+    this.poseSelectionMode = 'browse'; // Switch back to browse mode
+
+    console.log('[Intro] Reference pose cleared');
+  }
+
+  /**
+   * Select a pose from the grid
+   */
+  onSelectPose(pose: PoseDefinition): void {
+    // Clear any uploaded custom pose (mutual exclusivity)
+    if (this.referencePoseImage) {
+      this.clearReferencePose();
+    }
+
+    this.poseSelectionService.selectPoseByObject(pose);
+    const selectedPoseInfo = this.poseSelectionService.getSelectedPose();
+
+    if (selectedPoseInfo) {
+      console.log('[Intro] Pose selected:', pose.name);
+      console.log('[Intro] Pose metadata:', {
+        id: pose.id,
+        category: pose.category,
+        detectionStrategy: pose.detectionStrategy,
+        difficulty: pose.difficulty
+      });
+
+      // Simply emit the pose selection
+      // The live-preview component will handle detection based on pose metadata
+      // The pose image is only used for display, not for OpenPose comparison
+      this.poseSelected.emit(selectedPoseInfo);
+    }
+  }
+
+  /**
+   * Clear pose selection
+   */
+  clearPoseSelection(): void {
+    this.poseSelectionService.clearSelection();
+    this.selectedPose = null;
+    console.log('[Intro] Pose selection cleared');
+  }
+
+  /**
+   * Check if a pose is currently selected
+   */
+  isPoseSelected(pose: PoseDefinition): boolean {
+    return this.selectedPose?.pose.id === pose.id;
+  }
+
+  /**
+   * Toggle filters visibility
+   */
+  toggleFilters(): void {
+    this.showFilters = !this.showFilters;
+  }
+
+  /**
+   * Change view mode
+   */
+  setViewMode(mode: 'grid' | 'list'): void {
+    this.viewMode = mode;
+  }
+
+  /**
+   * Filter by category
+   */
+  filterByCategory(category: PoseDefinition['category'] | 'all'): void {
+    this.selectedCategory = category;
+  }
+
+  /**
+   * Filter by difficulty
+   */
+  filterByDifficulty(difficulty: PoseDefinition['difficulty'] | 'all'): void {
+    this.selectedDifficulty = difficulty;
+  }
+
+  /**
+   * Search poses
+   */
+  onSearchChange(event: any): void {
+    this.searchQuery = event.target.value || '';
+  }
+
+  /**
+   * Clear all filters
+   */
+  clearFilters(): void {
+    this.selectedCategory = 'all';
+    this.selectedDifficulty = 'all';
+    this.searchQuery = '';
+  }
+
+  /**
+   * Get icon for pose category
+   */
+  getCategoryIcon(category: PoseDefinition['category']): string {
+    return this.categoryInfo[category]?.icon || 'star-outline';
+  }
+
+  /**
+   * Get color for pose category
+   */
+  getCategoryColor(category: PoseDefinition['category']): string {
+    return this.categoryInfo[category]?.color || 'medium';
+  }
+
+  /**
+   * Get difficulty badge color
+   */
+  getDifficultyColor(difficulty: PoseDefinition['difficulty']): string {
+    const colors = {
+      easy: 'success',
+      medium: 'warning',
+      hard: 'danger'
+    };
+    return colors[difficulty] || 'medium';
+  }
+
+  /**
+   * Handle image load error (fallback to icon)
+   */
+  onImageError(event: any): void {
+    console.warn('[Intro] Failed to load pose image:', event.target.src);
+    event.target.style.display = 'none';
+  }
+
+  /**
+   * Save uploaded pose as custom pose
+   */
+  async onSaveCustomPose(): Promise<void> {
+    // Prevent double-submission
+    if (this.isSavingCustomPose) {
+      console.log('[Intro] Save already in progress, ignoring duplicate click');
+      return;
+    }
+
+    if (!this.referencePoseImage || !this.referencePose) {
+      await this.showToast('No pose to save', 'warning');
+      return;
+    }
+
+    if (!this.customPosesEnabled) {
+      await this.showToast('Custom pose saving not available', 'warning');
+      return;
+    }
+
+    try {
+      // Show dialog to get pose details
+      const poseDetails = await this.showSaveCustomPoseDialog();
+
+      if (!poseDetails) {
+        return; // User cancelled
+      }
+
+      // Set flag to prevent double-submission
+      this.isSavingCustomPose = true;
+
+      // Show loading indicator
+      const loading = await this.loadingCtrl.create({
+        message: 'Saving custom pose...',
+        spinner: 'circles'
+      });
+      await loading.present();
+
+      // Create custom pose via API
+      const { pose: customPose, isNew } = await this.customPoseRepo!.createCustomPoseFromBase64(
+        poseDetails.name,
+        poseDetails.description,
+        poseDetails.category,
+        poseDetails.difficulty,
+        this.referencePoseImage,
+        this.referencePose.keypoints
+      );
+
+      // Close loading indicator
+      await loading.dismiss();
+
+      if (isNew) {
+        // Convert to PoseDefinition and add to list
+        const poseDefinition = customPoseToPoseDefinition(customPose);
+        this.allPoses = [...this.allPoses, poseDefinition];
+        await this.showToast('Custom pose saved successfully!', 'success');
+      } else {
+        // Duplicate found - show warning with existing pose name
+        await this.showToast(`This pose already exists as "${customPose.name}"`, 'warning');
+      }
+
+      // Clear upload state
+      this.clearReferencePose();
+    } catch (error: any) {
+      console.error('[Intro] Failed to save custom pose:', error);
+      await this.showToast(error.message || 'Failed to save custom pose', 'danger');
+    } finally {
+      // Reset flag
+      this.isSavingCustomPose = false;
+    }
+  }
+
+  /**
+   * Delete custom pose
+   */
+  async onDeleteCustomPose(pose: PoseDefinition, event: Event): Promise<void> {
+    event.stopPropagation(); // Prevent pose selection
+
+    if (!pose.isCustom || !this.customPosesEnabled) {
+      return;
+    }
+
+    try {
+      // Show confirmation dialog
+      const confirmed = await this.showDeleteConfirmation(pose);
+
+      if (!confirmed) {
+        return;
+      }
+
+      // Show loading indicator
+      const loading = await this.loadingCtrl.create({
+        message: 'Deleting pose...',
+        spinner: 'circles'
+      });
+      await loading.present();
+
+      // Delete via API (remove the offset to get original ID)
+      const originalId = pose.id - 10000;
+      await this.customPoseRepo!.deleteCustomPose(originalId).toPromise();
+
+      // Remove from local list
+      this.allPoses = this.allPoses.filter(p => p.id !== pose.id);
+
+      // Close loading indicator
+      await loading.dismiss();
+
+      await this.showToast('Custom pose deleted', 'success');
+    } catch (error: any) {
+      console.error('[Intro] Failed to delete custom pose:', error);
+      await this.showToast(error.message || 'Failed to delete custom pose', 'danger');
+    }
+  }
+
+  /**
+   * Show save custom pose dialog
+   */
+  private async showSaveCustomPoseDialog(): Promise<any> {
+    const modal = await this.modalCtrl.create({
+      component: SaveCustomPoseDialogComponent,
+      componentProps: {
+        imageData: this.referencePoseImage,
+        suggestedDescription: this.referencePoseDescription
+      }
+    });
+
+    await modal.present();
+    const { data } = await modal.onWillDismiss();
+    return data;
+  }
+
+  /**
+   * Show delete confirmation dialog
+   */
+  private async showDeleteConfirmation(pose: PoseDefinition): Promise<boolean> {
+    const alert = await this.alertCtrl.create({
+      header: 'Delete Custom Pose',
+      message: `Are you sure you want to delete "${pose.name}"? This action cannot be undone.`,
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel'
+        },
+        {
+          text: 'Delete',
+          role: 'destructive',
+          handler: () => true
+        }
+      ]
+    });
+
+    await alert.present();
+    const { role } = await alert.onDidDismiss();
+    return role !== 'cancel';
+  }
+
+  /**
+   * Show toast notification
+   */
+  private async showToast(message: string, color: string = 'primary'): Promise<void> {
+    const toast = await this.toastCtrl.create({
+      message,
+      duration: 3000,
+      color,
+      position: 'bottom'
+    });
+    await toast.present();
+  }
+
+  onStart(): void {
+    // Check if a pose is selected
+    if (!this.selectedPose) {
+      console.warn('[Intro] No pose selected, starting with default actions');
+    }
+
+    this.startClicked.emit();
+  }
+
+  onCancel(): void {
+    this.cancelClicked.emit();
+  }
+}