facecog-liveness-showcase 0.0.1

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

@@ -0,0 +1,120 @@
+<div class="live-preview-container">
+  <!-- Camera unavailable overlay -->
+  <div class="camera-error-container" *ngIf="cameraError() !== 'none'">
+    <div class="camera-error-content">
+      <div class="error-icon-container">
+        <ion-icon
+          [name]="cameraError() === 'not-found' ? 'videocam-off' : cameraError() === 'not-readable' ? 'lock-closed' : 'alert-circle'"
+          class="error-icon">
+        </ion-icon>
+      </div>
+
+      <h2 class="error-title" *ngIf="cameraError() === 'not-found'">Camera Not Found</h2>
+      <h2 class="error-title" *ngIf="cameraError() === 'not-readable'">Camera Unavailable</h2>
+      <h2 class="error-title" *ngIf="cameraError() === 'denied'">Camera Access Denied</h2>
+      <h2 class="error-title" *ngIf="cameraError() === 'generic'">Camera Error</h2>
+
+      <p class="error-description" *ngIf="cameraError() === 'not-found'">
+        No camera was detected on your device. Please ensure a camera is connected and enabled.
+      </p>
+      <p class="error-description" *ngIf="cameraError() === 'not-readable'">
+        Your camera is currently in use by another application. Please close other apps using the camera and try again.
+      </p>
+      <p class="error-description" *ngIf="cameraError() === 'denied'">
+        Camera access was denied. Please update your browser or app permissions to allow camera access.
+      </p>
+      <p class="error-description" *ngIf="cameraError() === 'generic'">
+        An unexpected error occurred while accessing your camera. Please check your settings and try again.
+      </p>
+
+      <div class="error-tips">
+        <div class="tip-item">
+          <ion-icon name="settings-outline"></ion-icon>
+          <span>Check your browser/app settings to ensure camera permissions are enabled.</span>
+        </div>
+        <div class="tip-item">
+          <ion-icon name="phone-portrait-outline"></ion-icon>
+          <span>On mobile, go to System Settings &gt; App Permissions &gt; Camera.</span>
+        </div>
+        <div class="tip-item">
+          <ion-icon name="desktop-outline"></ion-icon>
+          <span>On desktop, check the camera icon in your browser's address bar.</span>
+        </div>
+      </div>
+
+      <ion-button expand="block" (click)="retryCamera()" class="retry-button">
+        <ion-icon name="refresh" slot="start"></ion-icon>
+        Try Again
+      </ion-button>
+    </div>
+  </div>
+
+  <!-- Normal camera view -->
+  <div class="camera-view" *ngIf="cameraError() === 'none'">
+    <video #videoElement autoplay playsinline class="video-feed"></video>
+
+    <!-- Canvas for drawing -->
+    <canvas #canvasOverlay class="canvas-overlay"></canvas>
+
+    <!-- Overlay with face guide and controls -->
+    <div class="overlay">
+      <!-- Face guide container (oval removed) -->
+      <div class="face-guide-container">
+        <!-- Selected pose overlay (if pose was selected from grid) -->
+        <div class="pose-reference-overlay" *ngIf="showPoseOverlay() && selectedPose">
+          <img [src]="selectedPose.imageUrl" alt="Selected Pose" class="pose-reference-image">
+          <p class="pose-hint">{{ selectedPose.pose.description }}</p>
+        </div>
+
+        <!-- Custom uploaded pose overlay (legacy) -->
+        <div class="reference-pose-overlay" *ngIf="showPoseOverlay() && referencePose && !selectedPose">
+          <img [src]="referencePose.imageData" alt="Reference Pose" class="reference-pose-image">
+          <p class="pose-hint">{{ referencePose.poseDescription }}</p>
+        </div>
+
+        <!-- Default overlay (no pose selected) -->
+        <div class="smile-reference-overlay" *ngIf="showPoseOverlay() && !selectedPose && !referencePose">
+          <ion-icon name="happy-outline" class="smile-icon"></ion-icon>
+          <p class="smile-hint">{{ currentPoseDescription() }}</p>
+        </div>
+      </div>
+
+      <!-- Moving dot for "Follow Dot" pose -->
+      <div class="moving-dot" *ngIf="showFollowDot()" [style.left.px]="dotX()" [style.top.px]="dotY()"></div>
+
+      <!-- Status message at top -->
+      <div class="status-message-top">
+        <ion-text>
+          <p>{{ statusMessage() }}</p>
+        </ion-text>
+      </div>
+
+      <!-- Lighting warning -->
+      <div class="lighting-warning" *ngIf="lightingWarning()">
+        <ion-icon
+          [name]="isLowLight() ? 'moon' : 'sunny'"
+          class="warning-icon">
+        </ion-icon>
+        <span>{{ lightingWarning() }}</span>
+      </div>
+
+      <!-- Capturing loader overlay -->
+      <div class="capturing-loader" *ngIf="isMatching()">
+        <div class="loader-content">
+          <ion-spinner name="crescent" color="light"></ion-spinner>
+          <p class="loader-text">Capturing...</p>
+        </div>
+      </div>
+
+      <!-- Capture button at bottom -->
+      <div class="capture-button-container" *ngIf="!isMatching()">
+        <button
+          class="capture-btn"
+          (click)="manualCapture()"
+          [disabled]="isMatching()">
+          <ion-icon name="camera"></ion-icon>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,611 @@
+.live-preview-container {
+  --background: #000;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.camera-error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  background: var(--ion-background-color, #fff);
+  padding: 24px;
+
+  .camera-error-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 480px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .error-icon-container {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, rgba(235, 68, 90, 0.15) 0%, rgba(235, 68, 90, 0.08) 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 24px;
+    box-shadow: 0 8px 24px rgba(235, 68, 90, 0.15);
+
+    .error-icon {
+      font-size: 56px;
+      color: var(--ion-color-danger, #eb445a);
+    }
+  }
+
+  .error-title {
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--ion-text-color, #1a1a1a);
+    margin: 0 0 12px;
+  }
+
+  .error-description {
+    font-size: 15px;
+    line-height: 1.6;
+    color: var(--ion-color-medium, #92949c);
+    margin: 0 0 24px;
+  }
+
+  .error-tips {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    margin-bottom: 28px;
+    text-align: left;
+
+    .tip-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      padding: 10px 14px;
+      border-radius: 10px;
+      background: rgba(var(--ion-color-medium-rgb, 146, 148, 156), 0.08);
+      font-size: 13px;
+      line-height: 1.5;
+      color: var(--ion-text-color, #1a1a1a);
+
+      ion-icon {
+        font-size: 18px;
+        flex-shrink: 0;
+        margin-top: 1px;
+        color: var(--ion-color-medium, #92949c);
+      }
+    }
+  }
+
+  .retry-button {
+    width: 100%;
+  }
+}
+
+.camera-view {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #000;
+
+  .video-feed {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: scaleX(-1); // Mirror the camera like a selfie
+  }
+
+  .canvas-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+    transform: scaleX(-1); // Mirror to match video
+  }
+
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    pointer-events: none;
+
+    .face-guide-container {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 552px;
+      height: 552px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .example-image-container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 420px;
+        height: 510px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        overflow: hidden;
+        z-index: 1;
+
+        .example-image {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          opacity: 0.4;
+          filter: grayscale(30%);
+          transition: opacity 0.3s ease;
+          animation: fadeInOut 3s ease-in-out infinite;
+        }
+      }
+    }
+
+    // Reference pose image overlay (for custom uploaded poses)
+    .reference-pose-overlay {
+      position: absolute;
+      bottom: 120px;
+      left: 20px;
+      width: 180px;
+      height: 180px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 3;
+      animation: slideInLeft 0.5s ease-in-out;
+      pointer-events: none; // Allow clicks to pass through
+      background: rgba(0, 0, 0, 0.4);
+      border-radius: 16px;
+      padding: 8px;
+      backdrop-filter: blur(8px);
+      border: 2px solid rgba(255, 255, 255, 0.3);
+
+      .reference-pose-image {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        opacity: 0.9; // Higher opacity for corner view
+        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
+        border-radius: 12px;
+      }
+
+      .pose-hint {
+        position: absolute;
+        top: -35px;
+        left: 0;
+        color: #fff;
+        font-size: 13px;
+        font-weight: 600;
+        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
+        background: rgba(0, 0, 0, 0.7);
+        padding: 6px 12px;
+        border-radius: 12px;
+        backdrop-filter: blur(10px);
+        white-space: nowrap;
+      }
+    }
+
+    // Selected pose overlay (from pose selection grid) - new
+    .pose-reference-overlay {
+      position: absolute;
+      bottom: 120px;
+      left: 20px;
+      width: 180px;
+      height: 180px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 3;
+      animation: slideInLeft 0.5s ease-out;
+
+      .pose-reference-image {
+        width: 160px;
+        height: 160px;
+        border-radius: 12px;
+        border: 2px solid white;
+        opacity: 0.9;
+        object-fit: cover;
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(10px);
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+        animation: fadeInOut 3s ease-in-out infinite;
+      }
+
+      .pose-hint {
+        margin: 8px 0 0;
+        font-size: 12px;
+        font-weight: 600;
+        color: white;
+        text-align: center;
+        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
+        background: rgba(0, 0, 0, 0.7);
+        padding: 6px 12px;
+        border-radius: 12px;
+        backdrop-filter: blur(10px);
+        max-width: 180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    // Default smile overlay (when no pose selected)
+    .smile-reference-overlay {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+      z-index: 2;
+      animation: fadeIn 0.5s ease-in-out;
+
+      .smile-icon {
+        font-size: 120px;
+        color: rgba(255, 255, 255, 0.9);
+        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
+        animation: smilePulse 2s ease-in-out infinite;
+      }
+
+      .smile-hint {
+        color: #fff;
+        font-size: 18px;
+        font-weight: 600;
+        text-align: center;
+        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
+        background: rgba(0, 0, 0, 0.5);
+        padding: 8px 16px;
+        border-radius: 16px;
+        backdrop-filter: blur(10px);
+        max-width: 300px;
+      }
+    }
+
+    .status-message-top {
+      position: absolute;
+      top: 30px;
+      left: 0;
+      right: 0;
+      text-align: center;
+      padding: 0 20px;
+      z-index: 2;
+
+      ion-text p {
+        margin: 0;
+        font-size: 17px;
+        font-weight: 600;
+        color: #fff;
+        line-height: 1.4;
+        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
+        letter-spacing: 0.3px;
+        background: rgba(0, 0, 0, 0.5);
+        padding: 12px 20px;
+        border-radius: 24px;
+        backdrop-filter: blur(10px);
+        display: inline-block;
+      }
+    }
+
+    .lighting-warning {
+      position: absolute;
+      top: 100px;
+      left: 0;
+      right: 0;
+      text-align: center;
+      padding: 0 20px;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      font-size: 15px;
+      font-weight: 600;
+      color: #fff;
+      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
+      background: rgba(255, 152, 0, 0.9);
+      padding: 10px 18px;
+      border-radius: 20px;
+      backdrop-filter: blur(10px);
+      margin: 0 auto;
+      max-width: fit-content;
+      animation: warningPulse 2s ease-in-out infinite;
+
+      .warning-icon {
+        font-size: 20px;
+        color: #fff;
+      }
+
+      span {
+        color: #fff;
+      }
+    }
+
+    .moving-dot {
+      position: absolute;
+      width: 30px;
+      height: 30px;
+      background: radial-gradient(circle, #ff4444 0%, #ff0000 50%, #cc0000 100%);
+      border-radius: 50%;
+      box-shadow:
+        0 0 20px rgba(255, 68, 68, 0.8),
+        0 0 40px rgba(255, 68, 68, 0.4),
+        inset 0 0 10px rgba(255, 255, 255, 0.3);
+      z-index: 10;
+      pointer-events: none;
+      transform: translate(-50%, -50%);
+      animation: dotPulse 1s ease-in-out infinite;
+      border: 3px solid rgba(255, 255, 255, 0.8);
+      transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1), top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+
+      // Add a white glow
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(255, 68, 68, 0.3) 0%, transparent 70%);
+        animation: dotGlow 1s ease-in-out infinite;
+      }
+    }
+
+    .capturing-loader {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.7);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 100;
+      animation: fadeIn 0.3s ease-in-out;
+
+      .loader-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+
+        ion-spinner {
+          width: 60px;
+          height: 60px;
+          --color: #fff;
+        }
+
+        .loader-text {
+          color: #fff;
+          font-size: 18px;
+          font-weight: 600;
+          margin: 0;
+          text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
+        }
+      }
+    }
+
+    .capture-button-container {
+      position: absolute;
+      bottom: 40px;
+      left: 50%;
+      transform: translateX(-50%);
+      pointer-events: all;
+      z-index: 2;
+
+      .capture-btn {
+        width: 72px;
+        height: 72px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, var(--ion-color-primary, #fe3c72), var(--ion-color-primary-shade, #e0365f));
+        border: 4px solid rgba(255, 255, 255, 0.9);
+        box-shadow: 0 4px 24px rgba(254, 60, 114, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        ion-icon {
+          font-size: 32px;
+          color: #fff;
+        }
+
+        &:active {
+          transform: scale(0.92);
+        }
+
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        &:not(:disabled):hover {
+          box-shadow: 0 6px 32px rgba(254, 60, 114, 0.7);
+          transform: scale(1.05);
+        }
+      }
+    }
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    border-color: rgba(255, 255, 255, 0.95);
+    transform: scale(1);
+  }
+  50% {
+    border-color: rgba(var(--ion-color-success-rgb, 16, 220, 96), 0.95);
+    transform: scale(1.02);
+  }
+}
+
+@keyframes rippleGuide {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.15);
+    opacity: 0;
+  }
+}
+
+@keyframes progressPulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scaleY(1.1);
+  }
+}
+
+@keyframes fadeInOut {
+  0%, 100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes smilePulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.9;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+}
+
+@keyframes thumbsPulse {
+  0%, 100% {
+    transform: scale(1) rotate(0deg);
+    opacity: 0.9;
+  }
+  50% {
+    transform: scale(1.15) rotate(5deg);
+    opacity: 1;
+  }
+}
+
+@keyframes warningPulse {
+  0%, 100% {
+    opacity: 0.9;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.02);
+  }
+}
+
+@keyframes dotPulse {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.2);
+    opacity: 0.8;
+  }
+}
+
+@keyframes dotGlow {
+  0%, 100% {
+    opacity: 0.6;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1.3);
+  }
+}
+
+@media (max-width: 768px) {
+  .status-bar {
+    padding: 18px 18px;
+
+    .status-message p {
+      font-size: 16px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .status-bar {
+    padding: 16px 16px;
+    padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
+
+    .status-message {
+      margin-bottom: 14px;
+
+      p {
+        font-size: 15px;
+      }
+    }
+
+    ion-progress-bar {
+      margin-bottom: 14px;
+      height: 5px;
+    }
+
+    .capture-button {
+      margin-top: 14px;
+    }
+  }
+}