使用 Capacitor 在 Ionic 框架中实现 TensorFlowjs 模型答案

【问题标题】：Implementing TensorFlowjs model in Ionic framework with Capacitor使用 Capacitor 在 Ionic 框架中实现 TensorFlowjs 模型
【发布时间】：2020-10-29 03:06:44
【问题描述】：

我正在做一个项目，我正在使用 Ionic 和 TensorFlow 进行机器学习。我已将我的 TensorFlow 模型转换为 tensorflowjs 模型。我已将 tensorflowjs 模型的 model.json 文件和分片文件放在 Ionic 的 assets 文件夹中。基本上，我已经将我的 tensorflowjs 模型放在了 ionic 的 assets 文件夹中。我想使用电容器来访问相机并允许用户拍照。然后，照片将被传递到资产中的 tensorflowjs 模型，以获取并显示该用户的预测。

这是我的打字稿代码：

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

import { Plugins, CameraResultType, CameraSource} from '@capacitor/core';

import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';

import { Platform } from '@ionic/angular';

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

import { rendererTypeName } from '@angular/compiler';

import { Base64 } from '@ionic-native/base64/ngx';

import { defineCustomElements } from '@ionic/pwa-elements/loader';

const { Camera } = Plugins;

@Component({

  selector: 'app-predict',

  templateUrl: './predict.page.html',

  styleUrls: ['./predict.page.scss'],

})

export class PredictPage{

  linearModel : tf.Sequential;

  prediction : any;

  InputTaken : any;

  ctx: CanvasRenderingContext2D;

  pos = { x: 0, y: 0 };

  canvasElement : any;

  photo: SafeResourceUrl;

  model: tf.LayersModel;

  constructor(public el : ElementRef , public renderer : Renderer2 , public platform : Platform, private base64: Base64,

    private sanitizer: DomSanitizer) 

  {}

  

  async takePicture() {

    const image = await Camera.getPhoto({

        quality: 90,

        allowEditing: true,

        resultType: CameraResultType.DataUrl,

        source: CameraSource.Camera});

      const model = await tf.loadLayersModel('src/app/assets/model.json');

      this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image.base64String);

      defineCustomElements(window);

    const pred = await tf.tidy(() => {

          // Make and format the predications

        const output = this.model.predict((this.photo)) as any;

                                

          // Save predictions on the component

        this.prediction = Array.from(output.dataSync()); 

        });

  }

}

在这段代码中，我已经导入了必要的工具。然后，我有我的构造函数和takepicture() 函数。在拍照功能中，我已经包含了用户拍照的功能。但是，我无法将拍摄的图片传递给 tensorflowjs 模型以获得预测。我在这行代码中将拍摄的图片传递给 tensorflowjs 模型：

const output = this.model.predict((this.photo)) as any;

但是，我收到一条错误消息：

“SafeResourceUrl”类型的参数不可分配给“Tensor |”类型的参数Tensor[]'。\n 类型“SafeResourceUrl”缺少类型“Tensor[]”的以下属性：length、pop、push、concat 和另外 26 个。

如果我能收到有关此主题的一些指导，我们将不胜感激。

【问题讨论】：

标签： ionic-framework tensorflow.js capacitor

【解决方案1】：

该模型希望您传递 Tensor 输入，但您传递的是 tfjs 生态系统中不存在的其他图像格式。您应该首先将this.photo 转换为张量，或者更简单，将image.base64String 转换为张量。

既然你好像在用node，试试这个代码

// Move the base64 image into a buffer
const b = Buffer.from(image.base64String, 'base64')

// get the tensor
const image = tf.node.decodeImage(b)

// Compute the output
const output = this.model.predict(image) as any;

这里的其他转换解决方案：convert base64 image to tensor

【讨论】：