问题描述
调用预测函数时浏览器中的Tensorflow.js错误
Tensorflow.js error in browser while calling predict function
我正在使用Node.js运行Webapp.这是我包含的脚本，并且我在Chrome中运行Node.js，但无法解决该错误.
I'm using Node.js to run the webapp. This is my scripts I have included and I'm running Node.js in Chrome and not able to solve the error.
该项目有7个类的输出，它们是形状为1x7的输出中的密集层.
This project has 7 classes as output that is dense layer in output of shape 1x7.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js
https://code.jquery.com/jquery-3.3.1.slim.min.js
这是我的JavaScript文件.
This is my JavaScript file.
$(document).on('change', '#file', function() {
let reader = new FileReader();
reader.onload= function(){
let dataUrl = reader.result;
$('#selected-image').attr('src',dataUrl);
$('#type1-predict').empty();
$('#type2-predict').empty();
$('#type3-predict').empty();
$('#type4-predict').empty();
$('#type5-predict').empty();
$('#type6-predict').empty();
$('#type7-predict').empty();
}
let file = $('#file').prop('files')[0];
reader.readAsDataURL(file)
});
const CANCER_CLASSES = {
0:"Actinic Keratoses",
1:"Basal cell carcinoma",
2:"Benign keratosis",
3:"Dermatofibroma",
4:"Melanoma",
5:"Melanocytic nevi",
6:"Vascular skin",
}
let model;
(async function(){
model= await tf.loadLayersModel('http://localhost:81/model/model.json');
$('#pro').hide()
})();
$(document).on('click', '#predict-button', async function() {
let image = $('#selected-image').get(0);
let tensor =
tf.browser.fromPixels(image)
.resizeNearestNeighbor([224,224])
.toFloat()
.expandDims();
let prediction = await model.predict(tensor).data();
let top3 = Array.from(prediction)
.map(function(p,i){
return {
probab: p,
classname:CANCER_CLASSES[i]
};
}).sort(function(a,b){
return b.probab-a.probab;
}).slice(0,4);
$("#type1-predict").empty();
top3.forEach(function(p){
$('#type1-predict').append(`<li>${p.classname}:
${p.probab.tpFixed(6)}
</li>`);
});
});
这是HTML文件的代码段
This is a snippet of the HTML file
<body>
<div id="pro" class="progress progress-bar progress-bar-striped progress-
bar-animated"></div>
<input type="file" id="image-selector">
<button id="predict-button">Predict</button>
<p style="font-weight:bold">Presentation</p>
<p>Actinic Keratoses : <span id="type1-predict"></span></p>
<p>Basal cell carcinoma: <span id="type2-predict"></span></p>
<p>Benign keratosis: <span id="type3-predict"></span></p>
<p>Dermatofibroma: <span id="type4-predict"></span></p>
<p>Melanoma: <span id="type5-predict"></span></p>
<p>Melanocytic nevi : <span id="type6-predict"></span></p>
<p>Vascular skin: <span id="type7-predict"></span></p>
<img id="selected-image" src="">
您能帮我解决以下错误吗?
Could you help me resolve the following error:
webgl_util.ts:203 Uncaught (in promise) Error: Requested texture size
[0x0] is invalid.
at Fr (webgl_util.ts:203)
at oi (gpgpu_util.ts:126)
at ui (gpgpu_util.ts:173)
at t.createUnsignedBytesMatrixTexture (gpgpu_context.ts:134)
at t.acquireTexture (texture_manager.ts:71)
at t.acquireTexture (backend_webgl.ts:2472)
at t.uploadToGPU (backend_webgl.ts:2407)
at t.getTexture (backend_webgl.ts:566)
at t.fromPixels (backend_webgl.ts:254)
at t.fromPixels (engine.ts:599)
推荐答案
问题
当Tensorflow.js尝试通过 tf将图像转换为张量时.browser.fromPixels ，它从DOM元素中读取宽度 width 和高度 height .由于未根据您的情况设置这些值，因此您会收到错误消息.
When Tensorflow.js tries to transform your image into a tensor via tf.browser.fromPixels, it reads the width and height from the DOM element. As these values are not set in your case, you receive an error.
解决方案
您必须为 img 标记赋予 width 和 height 属性，以便Tensorflow.js知道图像的大小:
You have to give the img tag a width and height attribute, so that Tensorflow.js knows the size of your image:
<img id="selected-image" src="" width="..." height="...">
存储库中当前有一个公开问题描述了此问题.将来可以通过提供更好的错误消息来解决此问题.
There is currently an open issue in the repository describing this problem. This might be fixed in the future by providing a better error message.
这篇关于请求的纹理大小[0x0]无效.我在浏览器中加载图像时出现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！