Open rosen22004 opened 1 year ago
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.
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.
If you were to add the extension then I suspect you'd also have to change the
manifest.json
so that thefilename
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.
he ml5 examples don't use the
@rosen22004 can you please share the project link and the screenshort of your problem
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"/>
However, there are still similar errors when running the real time style transfer from video: https://editor.p5js.org/ml5/sketches/StyleTransfer_Video
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.
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, ....).