Empty predictions using roboflow.js detect after 2nd image

Feedback
1

Hi, I’m using roboflow.js (https://cdn.roboflow.com/0.2.26/roboflow.js) to load a model in a web (Yolov8).
The first image I pass to detect() returns predictions as expected but passing a second image returns an empty array of predictions. In this case, I’m not getting any errors (see below).
Both images are same size (2048x2048).

This is how I’m reading the files:

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = async (ev) => {
    //console.log(reader.result);
    let image = reader.result;

    var htmlImage = new Image();
    htmlImage.src = image.toString();
    htmlImage.width = 2048;
    htmlImage.height = 2048;

If I don’t set width and height in the above code, the first image returns predictions as expected but the 2nd throws an error:

Error: Requested texture size [0x0] is invalid.
at webgl_util.js:158:15
at hv (gpgpu_util.js:46:5)
at gpgpu_util.js:83:12
at yv.createUnsignedBytesMatrixTexture (gpgpu_context.js:122:16)
at hw.acquireTexture (texture_manager.js:69:28)
at Sw.acquireTexture (backend_webgl.js:942:36)
at Sw.uploadToGPU (backend_webgl.js:920:37)
at Sw.getTexture (backend_webgl.js:543:14)
at Object.kernelFunc (FromPixels.js:56:52)
at i (engine.js:472:30)

2

It might be that the image might not be fully loaded before you attempt to fire the prediction. Try the below and see if that helps.

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = async (ev) => {
//console.log(reader.result);
let image = reader.result;

var htmlImage = new Image();
htmlImage.onload = async function() {
    // The image has been loaded. You can now start the prediction.
    htmlImage.width = 2048;
    htmlImage.height = 2048;

    // Call your prediction function here
};
htmlImage.src = image.toString();

};

3

It was my mistake. Solution provided by Roboflow support team:

    htmlImage.onload = async ()=> {
            //Call inference here
    }