integrated multi model

src/app/webcam/face.service.ts

@@ -8,16 +8,18 @@ export interface FaceScanResult {
   confidence: number;
   photoUrl?: string; // server-provided enrolled image
 }
-
-
 @Injectable({
   providedIn: 'root'
 })
 export class FaceService {
   constructor(private http: HttpClient) {}
 
-  scanFace(base64Image: string): Observable<FaceScanResult> {
-    return this.http.post<FaceScanResult>(`${webConfig.exposedUrl}/api/face/scan`, { imageBase64: base64Image });
+  // Add optional modelName parameter
+  scanFace(base64Image: string, modelName?: string): Observable<FaceScanResult> {
+    return this.http.post<FaceScanResult>(`${webConfig.exposedUrl}/api/face/scan`, { 
+      imageBase64: base64Image, 
+      modelName 
+    });
   }
 
   enrollFace(base64Image: string, name: string): Observable<any> {

src/app/webcam/webcam.component.html

@@ -6,6 +6,16 @@
     <canvas #canvas class="overlay-canvas"></canvas>
   </div>
 
+  <!-- Model Selection -->
+  <mat-form-field appearance="fill" style="width: 100%; margin-top: 16px;">
+    <mat-label>Select Model</mat-label>
+    <mat-select [(value)]="selectedModel">
+      <mat-option value="VGG-Face">VGG-Face</mat-option>
+      <mat-option value="Facenet">Facenet</mat-option>
+      <mat-option value="OpenFace">OpenFace</mat-option>
+    </mat-select>
+  </mat-form-field>
+
   <div class="actions">
     <button mat-raised-button color="accent" (click)="openEnrollDialog()">Enroll Face</button>
     <button mat-raised-button color="primary" (click)="openEmployeeDialog()">Manage Employees</button>
@@ -20,9 +30,9 @@
         <div class="profile-text">
           <p><strong>Name:</strong> {{ profile.name }}</p>
           <p><strong>Confidence:</strong> {{ profile.confidence | number:'1.2-2' }}</p>
+          <p><strong>Model:</strong> {{ profile.modelName }}</p>
         </div>
       </div>
     </div>
   </div>
-
-</mat-card>
+</mat-card>

src/app/webcam/webcam.component.ts

@@ -9,6 +9,9 @@ import * as faceapi from 'face-api.js';
 import { EnrollDialogComponent } from '../components/enroll-dialog/enroll-dialog.component';
 import { FaceScanResult, FaceService } from './face.service';
 import { EmployeeDialogComponent } from '../components/employee-dialog/employee-dialog.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatOptionModule } from '@angular/material/core';
 
 interface TrackedFace {
   box: faceapi.Box;
@@ -22,9 +25,9 @@ interface RecognizedProfile {
   name: string;
   confidence: number;
   color: string;
-  photoUrl?: string;  // <-- use server photo
+  photoUrl?: string;
+  modelName?: string; // <-- add this
 }
-
 @Component({
   selector: 'app-webcam',
   standalone: true,
@@ -33,7 +36,10 @@ interface RecognizedProfile {
     MatButtonModule,
     MatCardModule,
     MatSnackBarModule,
-    MatDialogModule
+    MatDialogModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatOptionModule
   ],
   templateUrl: './webcam.component.html',
   styleUrls: ['./webcam.component.css']
@@ -48,6 +54,7 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
   private recognitionCooldown = 5000; // 5 seconds cooldown per face
 
   recognizedProfiles: RecognizedProfile[] = [];
+  public selectedModel: 'VGG-Face' | 'Facenet' | 'OpenFace' = 'VGG-Face';
 
   constructor(
     private faceService: FaceService,
@@ -165,7 +172,7 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
 
     const base64Image = face.imageBase64.split(',')[1];
 
-    this.faceService.scanFace(base64Image).subscribe({
+    this.faceService.scanFace(base64Image, this.selectedModel).subscribe({
       next: (res: FaceScanResult) => {
         const color = res.name === 'Unknown' ? '#fde0e0' : '#e0f7e9';
 
@@ -175,7 +182,8 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
             name: res.name,
             confidence: res.confidence,
             color,
-            photoUrl: res.photoUrl // use server image
+            photoUrl: res.photoUrl, // use server image
+            modelName: this.selectedModel
           });
         }