s202226701049/AIart-app/src/app/modules/face/page-feat68/page-feat68.component.html

<ion-content>
  <ion-segment [value]="tab"  (ionChange)="tabChange($event)">
    <ion-segment-button value="models">
      <ion-label>模型加载</ion-label>
    </ion-segment-button>
    <ion-segment-button value="feat68">
      <ion-label>特征提取</ion-label>
    </ion-segment-button>
    <ion-segment-button value="match">
      <ion-label>相似对比</ion-label>
    </ion-segment-button>
  </ion-segment>
  @if(tab=="match"){
    <ion-button (click)="matchFaces()">开始跑分</ion-button>
    @for(face of faceListSelect;track face.photo){
      <div style="display: flex;flex-direction: column;">
        <div style="display: flex;">
          <img style="width: 60%;" [src]="face?.photo" [alt]="face?.title">
          <div style="flex:1;display: flex; flex-direction: column;">
            @if(face?.distance||face?.score){
              <div>差异性 {{face?.distance}}</div>
              <div>相似度 {{(face?.score)*100}}%</div>
            }
          </div>
        </div>

      </div>
    }
  }

  @if(tab=="feat68"){
    @for(face of faceList;track face.photo){
      <div style="display: flex;flex-direction: column;">
        <div style="display: flex;">
          <img #faceimg style="width: 70%;" [src]="face?.photo" [alt]="face?.title">
          <div style="flex:1;display: flex; flex-direction: column;">
            <ion-button (click)="getFeat68(face,faceimg)">特征向量</ion-button>
            @if(face?.feat68){
              <div>长度 {{face?.feat68?.length}}</div>
              <ion-button (click)="selectFace(face)">选中</ion-button>
            }
          </div>
        </div>

      </div>
    }
  }

  @if(tab=="models"){
    <div class="test-card">
      <h1>精简库加载测试</h1>
      <h2 *ngIf="!timeMap['faceload']">...加载中...</h2>
      <ng-container *ngIf="timeMap['faceload']">
        <h2>加载时间：{{timeMap['faceload']}}秒</h2>
        <button (click)="loadFaceApi()">重新测试</button>
      </ng-container>
    </div>

    <div class="test-card">
      <h1>完整库加载测试</h1>
      <h2 *ngIf="!timeMap['faceloadall']">...加载中...</h2>
      <ng-container *ngIf="timeMap['faceloadall']">
        <h2>加载时间：{{timeMap['faceloadall']}}秒</h2>
        <button (click)="loadFaceApi('faceloadall')">重新测试</button>
      </ng-container>
    </div>

    <div class="test-card">
      <h1>单图识别速度测试</h1>
      <h2 *ngIf="!timeMap['imgload']">...图片加载中...</h2>
      <ng-container *ngIf="timeMap['imgload']">
        <h2>图片加载：{{timeMap['imgload']}}秒</h2>
      </ng-container>

      <h2 *ngIf="!timeMap['detect']">...人脸识别中...</h2>
      <ng-container *ngIf="timeMap['detect']">
        <h2>人脸识别：{{timeMap['detect']}}秒</h2>
        <button (click)="detectFace()">重新测试</button>
      </ng-container>
      <button *ngIf="detectTimeout" (click)="detectFace()">重新测试</button>

    </div>

    <div style="text-align: center;">
      <button style="width: 80vw;" (click)="doTest()">开始测试</button>
      <button style="width: 80vw;" (click)="back()">返回</button>
    </div>
  }

</ion-content>