s202226701010/src/app/tab3/tab3.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title class="header-title">陶瓷识别</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" style="--background: url('/assets/images/background.jpg') no-repeat center/cover;">
  <div class="image-container" [ngClass]="{ 'destroyed': isDestroyed }">
    <!-- 背景框 -->
    <div class="background-frame" *ngIf="!isDestroyed">
      <!-- 图片显示区域 -->
      <img [src]="imageSrc" alt="Selected Image" class="image" *ngIf="!isDestroyed && !isCameraMode && imageSrc" />
      <!-- 视频流显示 -->
      <video #video *ngIf="!isDestroyed && isCameraMode && !imageCaptured && cameraAvailable" autoplay muted></video>
      <!-- 占位文本 -->
      <p class="placeholder-text" *ngIf="!isDestroyed && !imageSrc && !isCameraMode">No Image Selected</p>
      <p class="placeholder-text" *ngIf="!isDestroyed && isCameraMode && (!cameraAvailable || imageCaptured)">Camera not available</p>
    </div>
    <!-- 切换图标 -->
    <ion-button fill="clear" class="toggle-button" *ngIf="!isDestroyed" (click)="toggleMode()">
      <ion-icon [name]="isCameraMode ? 'image' : 'camera'"></ion-icon>
    </ion-button>
    <!-- 切换卷轴按钮 -->
    <ion-button fill="solid" class="toggle-roll-button" (click)="toggleBackground()">
      <ion-icon [name]="isDestroyed ? 'chevron-down-outline' : 'chevron-up-outline'"></ion-icon>
    </ion-button>
  </div>
  <!-- 上传图片按钮 -->
  <div *ngIf="!isCameraMode" class="upload-container">
    <ion-button class="primary-button" (click)="selectImage()">上传图片</ion-button>
    <ion-button class="secondary-button" (click)="startDetection()">开始检测</ion-button>
    <input type="file" hidden #fileInput (change)="onFileSelected($event)" />
  </div>
  <!-- 调用摄像头按钮 -->
  <div *ngIf="isCameraMode" class="camera-container">
    <ion-button class="primary-button" (click)="startCamera()">打开摄像头</ion-button>
    <ion-button class="secondary-button" (click)="startDetection()">开始检测</ion-button>
  </div>
  <!-- Canvas 用于捕获图像 -->
  <canvas #canvas hidden></canvas>
  <!-- 分隔线 -->
  <hr class="divider" />
  <!-- 动态填充表格 -->
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>识别结果</th>
          <th>识别置信度</th>
          <th>详情</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of recognitionResults; let i = index">
          <td>{{ i + 1 }}</td>
          <td>{{ item.result }}</td>
          <td>{{ item.confidence }}</td>
          <td>
            <ion-button size="small" fill="outline" (click)="viewDetails(item)">查看</ion-button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</ion-content>