I'm experimenting with the styleTransfer method in ml5.js. It works well, but I've run into a problem where it only seems to work with square images as the input source — any other aspect ratio results in garbled output where the x/y coordinates appear interpolated.
This seems like a bug, but I'm wondering if I'm doing something wrong?
I'm using the starter code found in the ml5-examples repository, specifically here:
https://github.com/ml5js/ml5-examples
You can see a functional demonstration of that code here:
https://ml5js.org/docs/style-transfer-image-example
The only thing I've changed from the original source code is that my input image is a non-square aspect ratio. This is the image I'm using, though I've scaled it down to about 300x225 pixels.
To recreate the problem I'm trying to describe:
- Go to the demo page. Click the "Transfer" button once to see how it's intended to work.
- Use the browser inspector (I'm using Chrome) and make the height and width of the input image (
#inputImg) something like 300 by 200 pixels. - Click "Transfer" and notice the clearly garbled result.
In contrast, an almost identical demo is setup for Deeplearn.js:
If you take similar steps and skew the aspect ratio of the input image to something other than a square the results work as expected — the output image is a style-transferred version of the input image with the same aspect ratio as the input.
DeepLearn.js is deprecated now but actually served as the base code for ml5.js as I understand it, so it' curious to me this bug doesn't exist in the original implementation.
Is there something I'm overlooking? Or is this a bug with ml5.js?
Apologies for not linking to a CodePen demo or something — it's a little tricky with the need to load models. I can try to host my code somewhere for all to see if it helps clarify the problem.