Menu
Tensorflow.js error in browser while calling predict function
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.
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
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>`);
});
});
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)
673
Problem
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.
Solution
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.
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
