facecog-liveness-showcase 0.0.1

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

@@ -0,0 +1,394 @@
+<div class="intro-scroll-wrapper">
+  <div class="intro-container">
+    <div class="content-wrapper">
+      <div class="icon-container">
+        <ion-icon name="shield-checkmark" class="shield-icon" color="primary"></ion-icon>
+      </div>
+
+      <ion-text class="instruction-text">
+        <h2>Pose Verification</h2>
+        <p>Select a pose below and perform it when prompted to verify your identity.</p>
+        <p class="tip">Ensure you are in a well-lit area for best results.</p>
+      </ion-text>
+
+      <!-- Backend Selection Section (hidden in pose-specific flow) -->
+      <div class="backend-selection-section" *ngIf="!poseSpecificMode">
+        <div class="backend-header" (click)="toggleBackendSettings()">
+          <ion-icon [name]="showBackendSettings ? 'chevron-down' : 'chevron-forward'"></ion-icon>
+          <span>Verification Backends ({{ getSelectedBackendCount() }} selected)</span>
+          <ion-icon name="settings-outline" class="settings-icon"></ion-icon>
+        </div>
+
+        <div class="backend-options" *ngIf="showBackendSettings">
+          <p class="backend-description">Select which backend services to use for liveness verification:</p>
+          <div class="backend-checkboxes">
+            <ion-item *ngFor="let backend of backendOptions" lines="none" class="backend-item">
+              <ion-checkbox
+                slot="start"
+                [(ngModel)]="selectedBackends[backend.id]"
+                (ionChange)="onBackendChange()">
+              </ion-checkbox>
+              <ion-label>
+                <h3>{{ backend.name }}</h3>
+                <p>{{ backend.description }}</p>
+              </ion-label>
+            </ion-item>
+          </div>
+          <p class="backend-note" *ngIf="getSelectedBackendCount() > 1">
+            <ion-icon name="information-circle-outline"></ion-icon>
+            Multiple backends use voting consensus for more accurate results.
+          </p>
+          <p class="backend-note" *ngIf="getSelectedBackendCount() === 1">
+            <ion-icon name="information-circle-outline"></ion-icon>
+            Single backend mode - results from {{ getSelectedBackendName() }} only.
+          </p>
+
+          <!-- AWS Face Liveness Anti-Spoofing Section -->
+          <div class="aws-liveness-section">
+            <div class="section-divider"></div>
+            <h4 class="aws-liveness-title">
+              <ion-icon name="shield-checkmark"></ion-icon>
+              Anti-Spoofing Protection
+            </h4>
+
+            <ion-item lines="none" class="aws-liveness-item">
+              <ion-toggle
+                [(ngModel)]="useAwsFaceLiveness"
+                (ionChange)="onAwsFaceLivenessChange()">
+              </ion-toggle>
+              <ion-label>
+                <h3>AWS Face Liveness</h3>
+                <p>Real-time anti-spoofing with oval UI challenge</p>
+              </ion-label>
+            </ion-item>
+
+            <div class="liveness-explanation">
+              <div class="explanation-card" [class.inactive]="useAwsFaceLiveness">
+                <div class="card-header">
+                  <ion-icon name="camera-outline"></ion-icon>
+                  <span>Standard Mode (Current)</span>
+                </div>
+                <p>Uses <strong>DetectFaces API</strong> for image quality analysis. Checks face visibility, lighting, blur, and pose but does <strong>not detect spoofing attacks</strong> (photos, videos, masks).</p>
+              </div>
+
+              <div class="explanation-card recommended" [class.active]="useAwsFaceLiveness">
+                <div class="card-header">
+                  <ion-icon name="shield-checkmark"></ion-icon>
+                  <span>AWS Face Liveness</span>
+                  <ion-badge color="success">Recommended</ion-badge>
+                </div>
+                <p>Uses <strong>Face Liveness API</strong> with an oval UI challenge-response flow. Detects and prevents <strong>spoofing attacks</strong> from photos, videos, and 3D masks in real-time.</p>
+                <div class="features">
+                  <span><ion-icon name="checkmark-circle"></ion-icon> Photo attack prevention</span>
+                  <span><ion-icon name="checkmark-circle"></ion-icon> Video replay detection</span>
+                  <span><ion-icon name="checkmark-circle"></ion-icon> 3D mask detection</span>
+                </div>
+              </div>
+            </div>
+
+            <p class="aws-note" *ngIf="useAwsFaceLiveness && !isSafariBrowser">
+              <ion-icon name="information-circle"></ion-icon>
+              An oval guide will appear on screen. Follow the prompts to complete the liveness check.
+            </p>
+
+            <!-- Safari Browser Warning -->
+            <div class="browser-warning" *ngIf="useAwsFaceLiveness && isSafariBrowser">
+              <ion-icon name="warning"></ion-icon>
+              <div class="warning-content">
+                <strong>Safari Not Supported</strong>
+                <p>AWS Face Liveness requires Chrome or Edge browser. Please switch browsers for anti-spoofing protection.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Pose Selection Section (hide headings in pose-specific flow) -->
+      <div class="pose-selection-section">
+        <h3 *ngIf="!poseSpecificMode">Select Your Challenge Pose</h3>
+        <p class="section-description" *ngIf="!poseSpecificMode">Choose a pose you'll need to match during verification</p>
+
+        <!-- Mode Toggle: Browse Poses vs Upload Custom Pose (hidden in pose-specific flow) -->
+        <div class="mode-toggle-container" *ngIf="!poseSpecificMode && !selectedPose && !referencePoseImage">
+          <ion-segment [(ngModel)]="poseSelectionMode" (ionChange)="onModeChange($event)">
+            <ion-segment-button value="browse">
+              <ion-icon name="grid-outline"></ion-icon>
+              <ion-label>Browse Poses</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="upload">
+              <ion-icon name="cloud-upload-outline"></ion-icon>
+              <ion-label>Upload Custom Pose</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </div>
+
+        <!-- Selected Pose Display (Pre-defined) -->
+        <div class="selected-pose-display" *ngIf="selectedPose">
+          <div class="selected-badge">
+            <ion-icon name="checkmark-circle" color="success"></ion-icon>
+            <span>Selected:</span>
+          </div>
+          <div class="selected-pose-card">
+            <div class="pose-image-container">
+              <img [src]="selectedPose.imageUrl" [alt]="selectedPose.pose.name" (error)="onImageError($event)">
+              <ion-icon [name]="getCategoryIcon(selectedPose.pose.category)" class="fallback-icon" [color]="getCategoryColor(selectedPose.pose.category)"></ion-icon>
+            </div>
+            <div class="pose-details">
+              <h4>{{ selectedPose.pose.name }}</h4>
+              <p>{{ selectedPose.pose.description }}</p>
+              <div class="pose-badges">
+                <ion-badge [color]="getCategoryColor(selectedPose.pose.category)">
+                  {{ selectedPose.pose.category }}
+                </ion-badge>
+                <ion-badge [color]="getDifficultyColor(selectedPose.pose.difficulty)">
+                  {{ selectedPose.pose.difficulty }}
+                </ion-badge>
+              </div>
+            </div>
+          </div>
+          <button class="change-pose-link" *ngIf="!poseSpecificMode" (click)="clearPoseSelection()">
+            Change Pose
+          </button>
+        </div>
+
+        <!-- Uploaded Custom Pose Display -->
+        <div class="uploaded-pose-display" *ngIf="referencePoseImage">
+          <div class="selected-badge">
+            <ion-icon name="checkmark-circle" color="success"></ion-icon>
+            <span>Custom Pose Uploaded:</span>
+          </div>
+          <div class="uploaded-pose-card">
+            <div class="pose-image-container">
+              <img [src]="referencePoseImage" alt="Uploaded custom pose">
+              <!-- Pose keypoints overlay (optional visualization) -->
+              <canvas #poseCanvas class="pose-overlay-canvas"></canvas>
+            </div>
+            <div class="pose-details">
+              <h4>Your Custom Pose</h4>
+              <p>{{ referencePoseDescription || 'Pose detected successfully' }}</p>
+              <div class="pose-status" *ngIf="poseDetectionStatus">
+                <ion-badge [color]="poseDetectionStatus.success ? 'success' : 'danger'">
+                  {{ poseDetectionStatus.message }}
+                </ion-badge>
+              </div>
+            </div>
+          </div>
+          <!-- Save as Custom Pose Button -->
+          <div class="save-custom-pose-section" *ngIf="poseDetectionStatus?.success && customPosesEnabled">
+            <ion-button expand="block" (click)="onSaveCustomPose()" color="success" [disabled]="isSavingCustomPose">
+              <ion-icon slot="start" [name]="isSavingCustomPose ? 'hourglass' : 'bookmark'"></ion-icon>
+              {{ isSavingCustomPose ? 'Saving...' : 'Save as Custom Pose' }}
+            </ion-button>
+            <p class="help-text">Save this pose to reuse it in future verifications</p>
+          </div>
+
+          <button class="change-pose-link" *ngIf="!poseSpecificMode" (click)="clearReferencePose()">
+            Change Pose
+          </button>
+        </div>
+
+        <!-- Upload Custom Pose Section -->
+        <div class="upload-pose-section" *ngIf="poseSelectionMode === 'upload' && !referencePoseImage && !selectedPose">
+          <div class="upload-container"
+               [class.dragging]="isDragging"
+               (dragover)="onDragOver($event)"
+               (dragleave)="onDragLeave($event)"
+               (drop)="onDrop($event)"
+               (click)="fileInput.click()">
+
+            <input #fileInput
+                   type="file"
+                   accept="image/*"
+                   (change)="onFileSelected($event)"
+                   style="display: none;">
+
+            <div class="upload-content" *ngIf="!isProcessingImage">
+              <ion-icon name="cloud-upload-outline" class="upload-icon" color="primary"></ion-icon>
+              <h4>Upload Your Pose Image</h4>
+              <p class="upload-instructions">
+                Drag and drop an image here, or click to browse
+              </p>
+              <p class="upload-hint">
+                Supported formats: JPEG, PNG, WebP (max 10MB)
+              </p>
+              <ion-button fill="outline" size="small">
+                <ion-icon slot="start" name="folder-open-outline"></ion-icon>
+                Choose File
+              </ion-button>
+            </div>
+
+            <div class="upload-processing" *ngIf="isProcessingImage">
+              <ion-spinner name="crescent"></ion-spinner>
+              <p>Detecting pose in your image...</p>
+            </div>
+          </div>
+
+          <!-- Upload Tips -->
+          <div class="upload-tips">
+            <h5>Tips for best results:</h5>
+            <ul>
+              <li>Use a clear, well-lit photo</li>
+              <li>Face and upper body should be visible</li>
+              <li>Stand against a plain background</li>
+              <li>Hold the pose clearly and steadily</li>
+            </ul>
+          </div>
+
+          <!-- Error/Status Message -->
+          <div class="upload-status" *ngIf="poseDetectionStatus && !referencePoseImage">
+            <ion-card [color]="poseDetectionStatus.success ? 'success' : 'danger'">
+              <ion-card-content>
+                <div class="status-content">
+                  <ion-icon [name]="poseDetectionStatus.success ? 'checkmark-circle' : 'alert-circle'"></ion-icon>
+                  <span>{{ poseDetectionStatus.message }}</span>
+                </div>
+              </ion-card-content>
+            </ion-card>
+          </div>
+        </div>
+
+        <!-- Filters & Search (only in browse mode; hidden in pose-specific flow) -->
+        <div class="filters-container" *ngIf="!poseSpecificMode && !selectedPose && !referencePoseImage && poseSelectionMode === 'browse'">
+          <div class="filter-header">
+            <ion-button fill="clear" size="small" (click)="toggleFilters()">
+              <ion-icon slot="start" name="filter"></ion-icon>
+              Filters
+              <ion-icon slot="end" [name]="showFilters ? 'chevron-up' : 'chevron-down'"></ion-icon>
+            </ion-button>
+            <div class="view-toggle">
+              <ion-button fill="clear" size="small" [color]="viewMode === 'grid' ? 'primary' : 'medium'" (click)="setViewMode('grid')">
+                <ion-icon slot="icon-only" name="grid"></ion-icon>
+              </ion-button>
+              <ion-button fill="clear" size="small" [color]="viewMode === 'list' ? 'primary' : 'medium'" (click)="setViewMode('list')">
+                <ion-icon slot="icon-only" name="list"></ion-icon>
+              </ion-button>
+            </div>
+          </div>
+
+          <!-- Expandable Filters -->
+          <div class="filters-content" *ngIf="showFilters">
+            <!-- Search Bar -->
+            <ion-searchbar
+              [(ngModel)]="searchQuery"
+              (ionInput)="onSearchChange($event)"
+              placeholder="Search poses..."
+              animated="true">
+            </ion-searchbar>
+
+            <!-- Category Filter -->
+            <div class="filter-group">
+              <label>Category:</label>
+              <div class="filter-chips">
+                <ion-chip
+                  *ngFor="let cat of categories"
+                  [color]="selectedCategory === cat.key ? 'primary' : 'medium'"
+                  (click)="filterByCategory(cat.key)">
+                  {{ cat.label }}
+                </ion-chip>
+              </div>
+            </div>
+
+            <!-- Difficulty Filter -->
+            <div class="filter-group">
+              <label>Difficulty:</label>
+              <div class="filter-chips">
+                <ion-chip
+                  *ngFor="let diff of difficulties"
+                  [color]="selectedDifficulty === diff.key ? 'primary' : 'medium'"
+                  (click)="filterByDifficulty(diff.key)">
+                  {{ diff.label }}
+                </ion-chip>
+              </div>
+            </div>
+
+            <!-- Clear Filters -->
+            <ion-button fill="clear" size="small" (click)="clearFilters()" *ngIf="selectedCategory !== 'all' || selectedDifficulty !== 'all' || searchQuery">
+              <ion-icon slot="start" name="close-circle"></ion-icon>
+              Clear Filters
+            </ion-button>
+          </div>
+        </div>
+
+        <!-- Pose Grid/List (only in browse mode; hidden in pose-specific flow) -->
+        <div class="poses-display" *ngIf="!poseSpecificMode && !selectedPose && !referencePoseImage && poseSelectionMode === 'browse'">
+          <p class="results-count">{{ filteredPoses.length }} pose(s) available</p>
+
+          <!-- Grid View -->
+          <div class="pose-grid" *ngIf="viewMode === 'grid'">
+            <div
+              *ngFor="let pose of filteredPoses"
+              class="pose-card"
+              [class.selected]="isPoseSelected(pose)"
+              [class.custom-pose]="pose.isCustom"
+              (click)="onSelectPose(pose)">
+
+              <!-- Custom Pose Badge -->
+              <ion-badge *ngIf="pose.isCustom" class="custom-badge" color="secondary">
+                <ion-icon name="star"></ion-icon>
+                Custom
+              </ion-badge>
+
+              <!-- Delete Button (Custom Poses Only) -->
+              <button
+                *ngIf="pose.isCustom && customPosesEnabled"
+                class="delete-pose-button"
+                (click)="onDeleteCustomPose(pose, $event)">
+                <ion-icon name="trash"></ion-icon>
+              </button>
+
+              <div class="pose-image-container">
+                <img [src]="pose.imageBlobUrl || pose.imagePath" [alt]="pose.name" (error)="onImageError($event)">
+                <ion-icon [name]="getCategoryIcon(pose.category)" class="fallback-icon" [color]="getCategoryColor(pose.category)"></ion-icon>
+              </div>
+              <div class="pose-info-compact">
+                <h4>{{ pose.name }}</h4>
+                <div class="badges-compact">
+                  <ion-badge [color]="getDifficultyColor(pose.difficulty)" size="small">
+                    {{ pose.difficulty }}
+                  </ion-badge>
+                </div>
+              </div>
+              <div class="pose-number">{{ pose.id }}</div>
+            </div>
+          </div>
+
+          <!-- List View -->
+          <div class="pose-list" *ngIf="viewMode === 'list'">
+            <ion-item
+              *ngFor="let pose of filteredPoses"
+              button
+              [class.selected]="isPoseSelected(pose)"
+              (click)="onSelectPose(pose)"
+              lines="full">
+              <ion-icon [name]="getCategoryIcon(pose.category)" [color]="getCategoryColor(pose.category)" slot="start"></ion-icon>
+              <ion-label>
+                <h3>{{ pose.id }}. {{ pose.name }}</h3>
+                <p>{{ pose.description }}</p>
+              </ion-label>
+              <ion-badge [color]="getDifficultyColor(pose.difficulty)" slot="end">
+                {{ pose.difficulty }}
+              </ion-badge>
+            </ion-item>
+          </div>
+
+          <!-- No Results -->
+          <div class="no-results" *ngIf="filteredPoses.length === 0">
+            <ion-icon name="search" color="medium"></ion-icon>
+            <p>No poses match your filters</p>
+            <ion-button fill="clear" (click)="clearFilters()">Clear Filters</ion-button>
+          </div>
+        </div>
+      </div>
+
+      <div class="button-container">
+        <ion-button expand="block" (click)="onStart()">
+          Start Verification
+        </ion-button>
+
+        <button class="cancel-link" *ngIf="!poseSpecificMode" (click)="onCancel()">
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</div>