带有 tensorflowjs 的 Vue3 应用程序抛出 TypeError:无法读取未定义的属性“后端" [英] Vue3 app with tensorflowjs throws TypeError: Cannot read property 'backend' of undefined
问题描述
我用普通的 Jquery 构建了一个简单的 tensorflowjs 应用程序，它运行良好，虽然预测不是那么好，但它有效.
I build a simple tensorflowjs app with plain Jquery and it was working fine, although prediction wasn't that great but it worked.
现在，我开始使用我使用 @vue/cli 创建的 Vue3 为应用程序构建 GUI.我已经通过 npm 安装了其他几个插件，例如 tailwindcss、clmtrackr，它们运行良好.
Now, I started building a GUI for the app using Vue3 which I have create using @vue/cli. I have installed couple of other plugin such as tailwindcss, clmtrackr via npm and they are working fine.
现在我已经使用 npm 安装了 tensorflowjs -
Now I have installed the tensorflowjs using npm -
npm install @tensorflow/tfjs
所有安装都没有任何错误，但是当我在为模型创建和训练设置代码后运行应用程序时，我开始出现错误 -
Everything installed without any error but when I ran the app after setting up code for model creation and training, I started getting error -
Uncaught (in promise) TypeError: Cannot read property 'backend' of undefined
at Engine.moveData (engine.js?6ae2:288)
at DataStorage.get (backend.js?8b87:29)
at eval (backend_webgl.js?5edb:497)
at Array.every (<anonymous>)
at MathBackendWebGL.shouldExecuteOnCPU (backend_webgl.js?5edb:497)
at concatImpl (Concat_impl.js?2cbf:39)
at Object.concat [as kernelFunc] (Concat.js?b4c2:35)
at kernelFunc (engine.js?6ae2:463)
at eval (engine.js?6ae2:524)
at Engine.scopedRun (engine.js?6ae2:337)
首先我想我可能需要安装 - @tensorflow/tfjs-node，它是为 NodeJs 制作的，但我仍然继续安装它.当然它不起作用，因为我有 node v.14 所以我开始收到 node-gyp 错误.我读到我需要用旧版本的 node v12 安装它，所以我安装了 nvm 并安装了另一个版本的 nodejs，然后运行 @tensorflow/tfjs-node 并且它工作了.之后我开始收到一堆我已经预料到的错误，因为这个包是为 NodeJS 制作的.
First I thought I probably need to install - @tensorflow/tfjs-node which is made for NodeJs but I still went ahead and installed it. Ofcourse it didn't work because I had node v.14 so I started getting node-gyp error. I read that I need to install it with older version of node v12 so I install nvm and installed another version of nodejs and then run @tensorflow/tfjs-node and it worked. After that I started getting bunch of error which I expected already because this package is made for NodeJS.
接下来，我删除了我的 node_modules 文件夹并修改了 package.json 以删除 tensorflow 的节点版本并运行
Next, I deleted my node_modules folder and modified package.json to remove node version of tensorflow and ran
npm install
使用最新版本安装所有新软件包.所有安装都没有任何错误，但无法读取属性后端"没有得到解决.
to install all fresh packages with their latest version. Everything installed without any error but the Cannot read property 'backend' didn't get resolved.
出人意料的是，当我在 Firefox 中运行代码时，我得到了未定义错误的信息，而在 chrome 中却得到了我不明白的未定义错误的信息.
Surprisingly, when I ran the code in firefox I got info of undefined error and in chrome backed of undefined error which I don't understand.
导致错误的代码是这样的 -
The code which is causing the error was this -
async trainModel(imageArray, labelArray) {
// tf.getBackend()
let imageSet = tf.tidy(() => {
return tf.concat(imageArray); <--------------- Error
});
let labelSet = tf.tidy(() => {
return tf.oneHot(tf.tensor1d(labelArray, 'int32'), 3);
})
this.model.fit(.............
}
我怎么知道?好吧，我在 tf.tidy() 中返回了 null 并且我确实通过了下一个代码块.我经历了很多 github 问题，它们都遇到了相同错误的不同问题.
How do I know that? Well I returned null in tf.tidy() and I did get pass through to next code block. I went through so many github issues and they all had different issues with same error.
TypeError: 无法读取未定义的属性后端" - 张量已在moveData 被称为
所以可能对我创建数据集的过程有疑问，它是 在我的另一篇文章中描述.
So there might be doubt about my process for creating dataset which is described here in my other post.
请有人帮助我.自从我遇到这个问题以来，已经差不多整整一周了.
Please someone help me. It has been almost entire week since I had this problem.
编辑 1 :
因此，对 imageArray 的任何操作都会导致后端错误，这实际上可能与我创建数据集并将其传递给类方法的方式有关.
So any operation on imageArray causes backend error which might actually b related to how I am creating dataset and passing it to the class method.
我是怎么想出来的?我试过了
How I figured this out? I tried
console.log(imageArray.toString()) <--- this causes backend error
console.log(imageArray) < -- this doesn't
|
---> console output <--------------------------------
Tensor {kept: false, isDisposedInternal: false, shape: Array(4), dtype: "float32", size: 135000, …} (4) [1, 150, 300, 3]
Models.vue?2820:139 Tensor {kept: false, isDisposedInternal: false, shape: Array(4), dtype: "float32", size: 135000, …} (4) [1, 150, 300, 3]
Models.vue?2820:139 Tensor {kept: false, isDisposedInternal: false, shape: Array(4), dtype: "float32", size: 135000, …} (4) [1, 150, 300, 3]
Models.vue?2820:139 Tensor {kept: false, isDisposedInternal: false, shape: Array(4), dtype: "float32", size: 135000, …} (4) [1, 150, 300, 3]
Models.vue?2820:139 Tensor {kept: false, isDisposedInternal: false, shape: Array(4), dtype: "float32", size: 135000, …} (4) [1, 150, 300, 3]
TFModel.js?4fc1:71 Proxy {0: Tensor, 1: Tensor, 2: Tensor, 3: Tensor, 4: Tensor}
我正在 vue3 应用程序中添加我的数据集创建方法 -
I am adding my dataset creation method in vue3 app -
initCanvas() {
this.mycan.canvas = this.$refs.mycan;
this.mycan.context = this.mycan.canvas.getContext('2d')
this.mycan.w = this.mycan.canvas.width
this.mycan.h = this.mycan.canvas.height
},
collectData() {
const img = tf.tidy(() => {
const captureImg = this.getImage();
console.log(captureImg, captureImg.shape)
return captureImg;
})
this.imageArray.push(img)
this.label = parseInt(Math.random() * 3)
this.labelArray.push(this.label) //--- labels are 0,1,2
},
getImage() {
return tf.tidy(() => {
const image = tf.browser.fromPixels(this.mycan.canvas);
const batchedImage = image.expandDims(0);
const norm = batchedImage.toFloat().div(tf.scalar(255)).sub(tf.scalar(1));
return norm;
});
}
编辑 2 :
所以我对 getImage() 方法进行了另一个测试并记录了返回值.它正确返回下面提到的所有值，但同时抛出相同的后端未定义错误
So I ran another test on getImage() method and logged the returned value. It return all the values mentioned below correctly but throws same backend of undefined error at the same time
let imgData = this.getImage()
console.log(imgData)
console.log(imgData.shape)
console.log(imgData.toString())
<--- console output-->
Tensor {kept: false, isDisposedInternal: false, shape: Array(4), dtype: "float32", size: 135000, …}
Models.vue?2820:119 (4) [1, 150, 300, 3]
Models.vue?2820:120 Tensor
[[[[-0.6117647, -0.5411765, -0.3450981],
[-0.6117647, -0.5411765, -0.3450981],
[-0.6117647, -0.5411765, -0.3450981],
...,
[-0.5333334, -0.5019608, -0.3176471],
[-0.5333334, -0.5019608, -0.3176471],
[-0.5333334, -0.5019608, -0.3176471]],
[[-0.6039216, -0.5333334, -0.3372549],
[-0.6078432, -0.5372549, -0.3411765],
[-0.6078432, -0.5372549, -0.3411765],
...,
[-0.5372549, -0.5019608, -0.3176471],
[-0.5372549, -0.5019608, -0.3176471],
[-0.5372549, -0.5019608, -0.3176471]],
[[-0.6 , -0.5294118, -0.3333334],
[-0.6 , -0.5294118, -0.3333334],
[-0.6 , -0.5294118, -0.3333334],
...,
[-0.5372549, -0.4980392, -0.3176471],
[-0.5372549, -0.4980392, -0.3176471],
[-0.5333334, -0.4941177, -0.3137255]],
...
[[-0.4039216, -0.454902 , -0.3529412],
[-0.4078432, -0.4588236, -0.3568628],
[-0.4078432, -0.4588236, -0.3568628],
...,
[-0.309804 , -0.3254902, -0.2352942],
[-0.309804 , -0.3254902, -0.2352942],
[-0.309804 , -0.3254902, -0.2352942]],
[[-0.4039216, -0.454902 , -0.3529412],
[-0.4039216, -0.454902 , -0.3529412],
[-0.4039216, -0.454902 , -0.3529412],
...,
[-0.3058824, -0.3215687, -0.2313726],
[-0.309804 , -0.3254902, -0.2352942],
[-0.309804 , -0.3254902, -0.2352942]],
[[-0.4039216, -0.454902 , -0.3529412],
[-0.4039216, -0.454902 , -0.3529412],
[-0.4039216, -0.454902 , -0.3529412],
...,
[-0.3058824, -0.3215687, -0.2313726],
[-0.309804 , -0.3254902, -0.2352942],
[-0.309804 , -0.3254902, -0.2352942]]]]
Uncaught TypeError: Cannot read property 'backend' of undefined
at Engine.moveData (engine.js?6ae2:288)
at DataStorage.get (backend.js?8b87:29)
at reshape (Reshape.js?ad24:31)
at conv2dWithIm2Row (Conv2D_impl.js?7600:157)
at Object.fusedConv2d [as kernelFunc] (FusedConv2D.js?2d19:46)
at kernelFunc (engine.js?6ae2:463)
at eval (engine.js?6ae2:524)
at Engine.scopedRun (engine.js?6ae2:337)
at Engine.runKernelFunc (engine.js?6ae2:520)
at Engine.runKernel (engine.js?6ae2:393)
推荐答案
当我尝试在 Vue3 中使用我的模型时，我遇到了同样的情况.我设法通过以下方式在模型上运行预测:
I've been in the same situation when I tried to use my model in Vue3. I managed to run predict on model by doing:
import { toRaw } from 'vue'
...
let raw_model = toRaw(this.model)
let result = raw_model.predict(img)
...
这篇关于带有 tensorflowjs 的 Vue3 应用程序抛出 TypeError:无法读取未定义的属性“后端"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
