facecog-liveness-showcase 0.0.1

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

@@ -0,0 +1,190 @@
+<!-- Processing Step -->
+<div *ngIf="isProcessing" class="step-processing">
+  <ion-card>
+    <ion-card-content class="processing-content">
+      <ion-spinner name="crescent"></ion-spinner>
+      <p>Processing verification...</p>
+      <ion-progress-bar [value]="processingProgress / 100"></ion-progress-bar>
+    </ion-card-content>
+  </ion-card>
+</div>
+
+<!-- Result Step -->
+<div *ngIf="!isProcessing && result" class="result-container">
+  <div class="content-wrapper">
+    <div class="result-icon">
+      <ion-icon
+        [name]="result.success ? 'checkmark-circle' : 'close-circle'"
+        [color]="result.success ? 'success' : 'danger'">
+      </ion-icon>
+    </div>
+
+    <!-- Image only (no video in pose-specific mode) -->
+    <div class="media-container" *ngIf="!poseSpecificMode">
+      <div class="result-image" *ngIf="result.verifiedImage">
+        <h3>Captured Image</h3>
+        <img [src]="result.verifiedImage" alt="Verified image" />
+      </div>
+
+      <div class="result-video" *ngIf="videoUrl">
+        <h3>Recorded Video</h3>
+        <video [src]="videoUrl" controls playsinline class="video-player"></video>
+        <p class="video-info" *ngIf="videoSizeMB">
+          Size: {{ videoSizeMB.toFixed(2) }} MB
+        </p>
+        <p class="video-url" *ngIf="result.videoUrl">
+          <ion-text color="medium">
+            <small>S3 URL: {{ result.videoUrl }}</small>
+          </ion-text>
+        </p>
+      </div>
+    </div>
+
+    <!-- Pose-specific: just the photo -->
+    <div class="media-container pose-specific-media" *ngIf="poseSpecificMode && result.verifiedImage">
+      <div class="result-image">
+        <img [src]="result.verifiedImage" alt="Verified image" />
+      </div>
+    </div>
+
+    <!-- Countdown Banner -->
+    <div class="countdown-banner" *ngIf="countdownActive()" [class.success]="result.success" [class.failure]="!result.success">
+      <ion-icon [name]="result.success ? 'checkmark-circle-outline' : 'refresh-outline'"></ion-icon>
+      <span>{{ countdownMessage }}</span>
+    </div>
+
+    <!-- Detailed results only in non-pose-specific mode -->
+    <ng-container *ngIf="!poseSpecificMode">
+      <!-- Single Backend Result -->
+      <ion-text class="result-text" *ngIf="!isMultiBackend">
+        <h2 *ngIf="result.success">Verification Successful!</h2>
+        <h2 *ngIf="!result.success">Verification Failed</h2>
+
+        <p *ngIf="result.success">
+          Confidence: {{ confidencePercent }}%
+        </p>
+        <p *ngIf="result.success && singleBackendMetadata" class="metadata">
+          Backend: {{ singleBackendMetadata.backend }}<br>
+          Time: {{ singleBackendMetadata.timestamp | date: 'short' }}
+        </p>
+
+        <p *ngIf="!result.success">
+          {{ result.error || 'Please try again with better lighting and ensure your face is clearly visible.' }}
+        </p>
+      </ion-text>
+
+      <!-- Multi-Backend Results -->
+      <div class="multi-backend-results" *ngIf="isMultiBackend && multiBackendResult">
+        <h2 class="consensus-title">
+          <ion-icon
+            [name]="multiBackendResult.multiBackendResults.consensus.isLive ? 'checkmark-circle' : 'close-circle'"
+            [color]="multiBackendResult.multiBackendResults.consensus.isLive ? 'success' : 'danger'">
+          </ion-icon>
+          Consensus: {{ multiBackendResult.multiBackendResults.consensus.isLive ? 'Live' : 'Not Live' }}
+        </h2>
+
+        <ion-card class="consensus-card">
+          <ion-card-header>
+            <ion-card-title>
+              Voting Results
+              <ion-badge [color]="getAgreementBadgeColor(multiBackendResult.multiBackendResults.consensus.votingResults.agreement)">
+                {{ multiBackendResult.multiBackendResults.consensus.votingResults.agreement }}
+              </ion-badge>
+            </ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <p>
+              <strong>Consensus Confidence:</strong> {{ getBackendConfidencePercent(multiBackendResult.multiBackendResults.primary) }}%
+            </p>
+            <p>
+              <strong>Live Votes:</strong> {{ multiBackendResult.multiBackendResults.consensus.votingResults.liveVotes }} / 3<br>
+              <strong>Not Live Votes:</strong> {{ multiBackendResult.multiBackendResults.consensus.votingResults.notLiveVotes }} / 3
+            </p>
+          </ion-card-content>
+        </ion-card>
+
+        <h3 class="backends-title">Individual Backend Results</h3>
+
+        <div class="backend-cards-grid">
+          <ion-card class="backend-card" *ngIf="multiBackendResult.multiBackendResults.amazon">
+            <ion-card-header>
+              <div class="card-icon"><ion-icon name="logo-amazon"></ion-icon></div>
+              <ion-card-title>{{ getBackendName('amazon') }}</ion-card-title>
+              <ion-badge [color]="multiBackendResult.multiBackendResults.amazon.isLive ? 'success' : 'danger'">
+                {{ multiBackendResult.multiBackendResults.amazon.isLive ? 'Live' : 'Not Live' }}
+              </ion-badge>
+            </ion-card-header>
+            <ion-card-content>
+              <p *ngIf="!multiBackendResult.multiBackendResults.amazon.error" class="confidence-text">
+                <strong>{{ getBackendConfidencePercent(multiBackendResult.multiBackendResults.amazon) }}%</strong>
+                <span class="confidence-label">Confidence</span>
+              </p>
+              <p *ngIf="multiBackendResult.multiBackendResults.amazon.error" class="error-text">
+                {{ multiBackendResult.multiBackendResults.amazon.error }}
+              </p>
+            </ion-card-content>
+          </ion-card>
+
+          <ion-card class="backend-card" *ngIf="multiBackendResult.multiBackendResults.openpose">
+            <ion-card-header>
+              <div class="card-icon"><ion-icon name="body"></ion-icon></div>
+              <ion-card-title>{{ getBackendName('openpose') }}</ion-card-title>
+              <ion-badge [color]="multiBackendResult.multiBackendResults.openpose.isLive ? 'success' : 'danger'">
+                {{ multiBackendResult.multiBackendResults.openpose.isLive ? 'Live' : 'Not Live' }}
+              </ion-badge>
+            </ion-card-header>
+            <ion-card-content>
+              <p *ngIf="!multiBackendResult.multiBackendResults.openpose.error" class="confidence-text">
+                <strong>{{ getBackendConfidencePercent(multiBackendResult.multiBackendResults.openpose) }}%</strong>
+                <span class="confidence-label">Confidence</span>
+              </p>
+              <p *ngIf="multiBackendResult.multiBackendResults.openpose.error" class="error-text">
+                {{ multiBackendResult.multiBackendResults.openpose.error }}
+              </p>
+            </ion-card-content>
+          </ion-card>
+
+          <ion-card class="backend-card" *ngIf="multiBackendResult.multiBackendResults.facetec">
+            <ion-card-header>
+              <div class="card-icon"><ion-icon name="scan"></ion-icon></div>
+              <ion-card-title>{{ getBackendName('facetec') }}</ion-card-title>
+              <ion-badge [color]="multiBackendResult.multiBackendResults.facetec.isLive ? 'success' : 'danger'">
+                {{ multiBackendResult.multiBackendResults.facetec.isLive ? 'Live' : 'Not Live' }}
+              </ion-badge>
+            </ion-card-header>
+            <ion-card-content>
+              <p *ngIf="!multiBackendResult.multiBackendResults.facetec.error" class="confidence-text">
+                <strong>{{ getBackendConfidencePercent(multiBackendResult.multiBackendResults.facetec) }}%</strong>
+                <span class="confidence-label">Confidence</span>
+              </p>
+              <p *ngIf="multiBackendResult.multiBackendResults.facetec.error" class="error-text">
+                {{ multiBackendResult.multiBackendResults.facetec.error }}
+              </p>
+            </ion-card-content>
+          </ion-card>
+        </div>
+
+        <p class="metadata">
+          Time: {{ multiBackendResult.metadata.timestamp | date: 'short' }}
+        </p>
+      </div>
+    </ng-container>
+
+    <div class="button-container" *ngIf="!countdownActive()">
+      <ion-button
+        *ngIf="result.success"
+        expand="block"
+        (click)="onDone()">
+        Done
+      </ion-button>
+
+      <ion-button
+        *ngIf="!result.success"
+        expand="block"
+        fill="outline"
+        (click)="onRetry()">
+        Try Again
+      </ion-button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,534 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.step-processing {
+  ion-card {
+    margin: 0;
+  }
+}
+
+.processing-content {
+  text-align: center;
+  padding: 32px;
+
+  ion-spinner {
+    margin-bottom: 16px;
+    width: 48px;
+    height: 48px;
+  }
+
+  p {
+    margin-bottom: 16px;
+    color: var(--ion-color-medium);
+  }
+}
+
+.result-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  padding: 24px;
+  background: var(--ion-background-color);
+}
+
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 960px;
+
+  @media (max-width: 767px) {
+    max-width: 480px;
+  }
+}
+
+.result-icon {
+  animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  ion-icon {
+    font-size: 90px;
+    margin: 0 0 20px;
+    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
+  }
+}
+
+.media-container {
+  display: flex;
+  gap: 24px;
+  margin: 0 0 24px;
+  width: 100%;
+  max-width: 960px;
+  justify-content: center;
+  align-items: flex-start;
+  animation: fadeInUp 0.6s ease-out 0.2s backwards;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.result-image {
+  flex: 1;
+  max-width: 340px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h3 {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    text-align: center;
+    color: var(--ion-text-color);
+  }
+
+  img {
+    width: 100%;
+    max-width: 280px;
+    height: auto;
+    aspect-ratio: 1;
+    object-fit: cover;
+    border-radius: 24px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.result-video {
+  flex: 1;
+  max-width: 480px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h3 {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    text-align: center;
+    color: var(--ion-text-color);
+  }
+
+  .video-player {
+    width: 100%;
+    max-width: 360px;
+    border-radius: 16px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    background: #000;
+  }
+
+  .video-info {
+    margin: 8px 0 4px;
+    text-align: center;
+    font-size: 14px;
+    color: var(--ion-color-medium);
+  }
+}
+
+.countdown-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  max-width: 480px;
+  padding: 14px 20px;
+  border-radius: 12px;
+  margin-bottom: 20px;
+  font-size: 16px;
+  font-weight: 600;
+  animation: fadeIn 0.4s ease-out;
+
+  ion-icon {
+    font-size: 22px;
+    flex-shrink: 0;
+  }
+
+  &.success {
+    background: rgba(var(--ion-color-success-rgb, 45, 211, 111), 0.12);
+    color: var(--ion-color-success, #2dd36f);
+    border: 1px solid rgba(var(--ion-color-success-rgb, 45, 211, 111), 0.3);
+  }
+
+  &.failure {
+    background: rgba(var(--ion-color-warning-rgb, 255, 196, 9), 0.12);
+    color: var(--ion-color-warning-shade, #e0ac08);
+    border: 1px solid rgba(var(--ion-color-warning-rgb, 255, 196, 9), 0.3);
+  }
+}
+
+.result-text {
+  text-align: center;
+  margin: 0 0 32px;
+  width: 100%;
+  animation: fadeIn 0.6s ease-out 0.4s backwards;
+
+  h2 {
+    margin-bottom: 20px;
+    font-size: 28px;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+  }
+
+  p {
+    color: var(--ion-color-medium);
+    line-height: 1.7;
+    margin: 12px 0;
+    font-size: 16px;
+    font-weight: 400;
+
+    &:first-of-type {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--ion-text-color);
+      margin-bottom: 16px;
+    }
+  }
+
+  .metadata {
+    font-size: 14px;
+    opacity: 0.7;
+    margin-top: 20px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(var(--ion-color-medium-rgb), 0.2);
+    line-height: 1.8;
+  }
+}
+
+.button-container {
+  width: 100%;
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  animation: fadeInUp 0.6s ease-out 0.5s backwards;
+
+  ion-button {
+    width: 100%;
+    --border-radius: 12px;
+    height: 52px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+}
+
+// Multi-backend results styling
+.multi-backend-results {
+  width: 100%;
+  text-align: center;
+  animation: fadeIn 0.6s ease-out 0.4s backwards;
+
+  .consensus-title {
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+
+    ion-icon {
+      font-size: 32px;
+    }
+  }
+
+  .consensus-card {
+    margin-bottom: 24px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+    ion-card-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 18px;
+    }
+
+    ion-badge {
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+
+    p {
+      margin: 8px 0;
+      color: var(--ion-color-medium);
+
+      strong {
+        color: var(--ion-text-color);
+      }
+    }
+  }
+
+  .backends-title {
+    font-size: 20px;
+    font-weight: 600;
+    margin: 32px 0 20px;
+    text-align: center;
+  }
+
+  .backend-cards-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 16px;
+    width: 100%;
+    margin-bottom: 16px;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(3, 1fr);
+      max-width: 900px;
+      margin: 0 auto 16px;
+    }
+
+    @media (max-width: 767px) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .backend-card {
+    margin: 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    border-radius: 16px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    overflow: hidden;
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+    }
+
+    ion-card-header {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      padding: 20px 16px 12px;
+      background: linear-gradient(135deg, rgba(var(--ion-color-primary-rgb), 0.05) 0%, transparent 100%);
+
+      .card-icon {
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, var(--ion-color-primary) 0%, var(--ion-color-secondary) 100%);
+        margin-bottom: 12px;
+        box-shadow: 0 4px 12px rgba(var(--ion-color-primary-rgb), 0.3);
+
+        ion-icon {
+          font-size: 28px;
+          color: white;
+        }
+      }
+
+      ion-card-title {
+        font-size: 15px;
+        font-weight: 600;
+        margin-bottom: 8px;
+        color: var(--ion-text-color);
+      }
+
+      ion-badge {
+        font-size: 11px;
+        font-weight: 600;
+        padding: 4px 12px;
+        border-radius: 12px;
+      }
+    }
+
+    ion-card-content {
+      padding: 16px;
+      text-align: center;
+
+      .confidence-text {
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+
+        strong {
+          font-size: 32px;
+          font-weight: 700;
+          color: var(--ion-color-primary);
+          line-height: 1;
+        }
+
+        .confidence-label {
+          font-size: 13px;
+          color: var(--ion-color-medium);
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+        }
+      }
+
+      .error-text {
+        margin: 0;
+        font-size: 13px;
+        color: var(--ion-color-danger);
+        font-style: italic;
+        line-height: 1.5;
+      }
+    }
+  }
+
+  .metadata {
+    font-size: 14px;
+    opacity: 0.7;
+    margin-top: 20px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(var(--ion-color-medium-rgb), 0.2);
+  }
+}
+
+@keyframes scaleIn {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 768px) {
+  .result-icon ion-icon {
+    font-size: 90px;
+  }
+
+  .result-image {
+    width: 240px;
+    height: 240px;
+  }
+
+  .result-text {
+    h2 {
+      font-size: 24px;
+    }
+
+    p {
+      font-size: 15px;
+
+      &:first-of-type {
+        font-size: 17px;
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .result-container {
+    padding: 32px 20px 24px;
+  }
+
+  .result-icon ion-icon {
+    font-size: 80px;
+    margin: 20px 0;
+  }
+
+  .result-image {
+    width: 200px;
+    height: 200px;
+    margin: 16px 0 20px;
+  }
+
+  .result-text {
+    margin: 20px 0 24px;
+
+    h2 {
+      font-size: 22px;
+    }
+  }
+
+  .multi-backend-results {
+    .consensus-title {
+      font-size: 20px;
+
+      ion-icon {
+        font-size: 28px;
+      }
+    }
+
+    .backends-title {
+      font-size: 18px;
+    }
+
+    .backend-cards-grid {
+      grid-template-columns: 1fr;
+      gap: 12px;
+    }
+
+    .backend-card {
+      ion-card-header {
+        padding: 16px 12px 10px;
+
+        .card-icon {
+          width: 48px;
+          height: 48px;
+
+          ion-icon {
+            font-size: 24px;
+          }
+        }
+
+        ion-card-title {
+          font-size: 14px;
+        }
+
+        ion-badge {
+          font-size: 10px;
+          padding: 3px 10px;
+        }
+      }
+
+      ion-card-content {
+        padding: 12px;
+
+        .confidence-text {
+          strong {
+            font-size: 28px;
+          }
+
+          .confidence-label {
+            font-size: 12px;
+          }
+        }
+
+        .error-text {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}