Upload error and reading error of model files

[rosen22004]

I opened the example project of image style transfer from the ml5 website using p5.js-web-editor. Reading errors of the model files (Variable_?) appeared when I run the program. I tried to upload these files using the github source but was failed to do so because of the file type(Variable_1, Variable_2, ....).

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[lindapaiste]

I'll have to look into this more. I think the lack of the file extension might be causing trouble, but the ml5 examples don't use the extension and it's fine 🤷 . I believe the file type is a binary .bin.

If you were to add the extension then I suspect you'd also have to change the manifest.json so that the filename matches. But that really shouldn't be necessary.

[rosen22004]

If you were to add the extension then I suspect you'd also have to change the manifest.json so that the filename matches. But that really shouldn't be necessary.

I had already tried that before by changing the file extension to txt, svg and modifying the corresponding manifest.json but it still failed to run the program properly.

[parteekcoder]

he ml5 examples don't use the

@rosen22004 can you please share the project link and the screenshort of your problem

[rosen22004]

The project link was located on the webpage of ml5 (https://examples.ml5js.org/):
https://editor.p5js.org/ml5/sketches/StyleTransfer_Image
The problem had been solved already after adding crossOrigin="annoymous" to the input image tab:
<img src="img/patagonia.jpg" alt="input img" id="inputImg" crossOrigin="annoymous"/>

[rosen22004]

However, there are still similar errors when running the real time style transfer from video:
https://editor.p5js.org/ml5/sketches/StyleTransfer_Video

[lindapaiste]

In that last code snippet, there was is some sort of problem that happens when the style transfer is run but we're not seeing it due to a bad gotResult callback.

Error-handling is one of the more confusing parts of the ml5 callbacks which I want to change in a future ml5 version because whoever wrote that example did not even get it quite right. When you have a callback function like function gotResult(err, img) that means you might have an error err or you might have a result img. If there's an error then the gotResults function will be called but img will be undefined.

The error that you are seeing in the console "TypeError: Cannot read properties of undefined (reading 'src')" is caused by accessing img.src when img is undefined. You need to see if you have a result or an error before using the result.

Try this callback:

function gotResult(err, img) {
  if (err) {
    console.error(err);
    return;
  }
  resultImg.attribute('src', img.src);
  if (isTransferring) {
    style.transfer(gotResult); 
  }
}

That should show you the error that was thrown by the model.