// angular-ml-app/src/app/ml-service.ts

import { Injectable } from '@angular/core';

import * as tf from '@tensorflow/tfjs';

@Injectable({

  providedIn: 'root'

})

export class MlService {

  private model: tf.LayersModel | undefined;

  constructor() {

    this.loadModel();

  }

  async loadModel() {

    // 假设模型放在 assets 文件夹

    this.model = await tf.loadLayersModel('/assets/model.json');

    console.log('Model loaded successfully!');

  }

  async predict(imageData: ImageData): Promise<number[]> {

    if (!this.model) {

      throw new Error('Model not loaded yet!');

    }

    // 将图片数据转换为 Tensor

    const inputTensor = tf.browser.fromPixels(imageData).resizeBilinear([28, 28]).mean(2).expandDims(0).expandDims(-1);

    const prediction = this.model.predict(inputTensor) as tf.Tensor;

    const result = await prediction.data();

    inputTensor.dispose(); // 释放内存

    prediction.dispose(); // 释放内存

    return Array.from(result);

  }

}

// angular-ml-app/src/app/image-classifier/image-classifier.component.ts

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

import { MlService } from '../ml-service.service';

@Component({

  selector: 'app-image-classifier',

  template: `

    <input type="file" (change)="onFileSelected($event)">

    <img [src]="imageUrl" *ngIf="imageUrl" width="200" height="200">

    <p *ngIf="prediction">Prediction: {{ prediction }}</p>

  `

})

export class ImageClassifierComponent {

  imageUrl: string | undefined;

  prediction: number | undefined; // 假设是分类结果

  constructor(private mlService: MlService) {}

  async onFileSelected(event: Event) {

    const file = (event.target as HTMLInputElement).files?.[0];

    if (file) {

      this.imageUrl = URL.createObjectURL(file);

      const img = new Image();

      img.onload = async () => {

        // 创建一个 canvas 来获取 ImageData

        const canvas = document.createElement('canvas');

        canvas.width = img.width;

        canvas.height = img.height;

        const ctx = canvas.getContext('2d');

        ctx?.drawImage(img, 0, 0);

        const imageData = ctx?.getImageData(0, 0, img.width, img.height);

        

        if (imageData) {

          const predictions = await this.mlService.predict(imageData);

          // 假设是分类任务，取概率最大的索引

          this.prediction = predictions.indexOf(Math.max(...predictions));

          console.log('Raw predictions:', predictions);

          console.log('Predicted class:', this.prediction);

        }

      };

      img.src = this.imageUrl;

    }

  }

}