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.
.js/1.14.7/umd/popper.min.js
/@tensorflow/[email protected]/dist/tf.min.js
.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)
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./ajax/libs/popper.js/1.14.7/umd/popper.min.js
https://cdn.jsdelivr/npm/@tensorflow/[email protected]/dist/tf.min.js
https://code.jquery./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)
-
It's possible prediction was length 0 and not found. check if it's >0 before doing anything else. I had this issue in my code and just wrapped it in an
ifstatement. – guest Commented May 8, 2023 at 18:49
2 Answers
Reset to default 14Problem
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.
my issue using React and Tensorflow was that the outer div(containing the video element) didn't have height and width setup eg:
<div id="container" className="h-[460] w-[380]">
<video id="myWebcam" width={380} height={460}></video>
</div>