ml5.js styleTransfer only works with 1:1 aspect ratio?
up vote
0
down vote
favorite
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:
https://reiinakano.github.io/fast-style-transfer-deeplearnjs/assets/scripts/example-style-transfer-image.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.
javascript tensorflow.js style-transfer
asked Nov 9 at 20:24
George Mandis
681418
add a comment |
up vote
0
down vote
favorite
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:
https://reiinakano.github.io/fast-style-transfer-deeplearnjs/assets/scripts/example-style-transfer-image.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.
javascript tensorflow.js style-transfer
asked Nov 9 at 20:24
George Mandis
681418
Deeplearning.js is no longer supported. tensorflow.js can be used instead
– edkeveked
Nov 12 at 19:22
@edkeveked Thanks. I know DeepLearn.js is deprecated — I'm linking to it because the DeepLearn example works "correctly" whereas the ml5.js one does not. I double-checked and my understanding is ml5.js is built on top of tensorflow.js, for what it's worth. I'm not sure how any of this addresses my question about the image aspect ratio issue though.
– George Mandis
Nov 12 at 20:04
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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:
https://reiinakano.github.io/fast-style-transfer-deeplearnjs/assets/scripts/example-style-transfer-image.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.
javascript tensorflow.js style-transfer
asked Nov 9 at 20:24
George Mandis
681418
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:
https://reiinakano.github.io/fast-style-transfer-deeplearnjs/assets/scripts/example-style-transfer-image.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.
javascript tensorflow.js style-transfer
javascript tensorflow.js style-transfer
asked Nov 9 at 20:24
George Mandis
681418
asked Nov 9 at 20:24
George Mandis
681418
asked Nov 9 at 20:24
George Mandis
681418
asked Nov 9 at 20:24
George Mandis
681418
asked Nov 9 at 20:24
George Mandis
681418
681418
Deeplearning.js is no longer supported. tensorflow.js can be used instead
– edkeveked
Nov 12 at 19:22
@edkeveked Thanks. I know DeepLearn.js is deprecated — I'm linking to it because the DeepLearn example works "correctly" whereas the ml5.js one does not. I double-checked and my understanding is ml5.js is built on top of tensorflow.js, for what it's worth. I'm not sure how any of this addresses my question about the image aspect ratio issue though.
– George Mandis
Nov 12 at 20:04
add a comment |
Deeplearning.js is no longer supported. tensorflow.js can be used instead
– edkeveked
Nov 12 at 19:22
@edkeveked Thanks. I know DeepLearn.js is deprecated — I'm linking to it because the DeepLearn example works "correctly" whereas the ml5.js one does not. I double-checked and my understanding is ml5.js is built on top of tensorflow.js, for what it's worth. I'm not sure how any of this addresses my question about the image aspect ratio issue though.
– George Mandis
Nov 12 at 20:04
Deeplearning.js is no longer supported. tensorflow.js can be used instead
– edkeveked
Nov 12 at 19:22
Deeplearning.js is no longer supported. tensorflow.js can be used instead
– edkeveked
Nov 12 at 19:22
@edkeveked Thanks. I know DeepLearn.js is deprecated — I'm linking to it because the DeepLearn example works "correctly" whereas the ml5.js one does not. I double-checked and my understanding is ml5.js is built on top of tensorflow.js, for what it's worth. I'm not sure how any of this addresses my question about the image aspect ratio issue though.
– George Mandis
Nov 12 at 20:04
@edkeveked Thanks. I know DeepLearn.js is deprecated — I'm linking to it because the DeepLearn example works "correctly" whereas the ml5.js one does not. I double-checked and my understanding is ml5.js is built on top of tensorflow.js, for what it's worth. I'm not sure how any of this addresses my question about the image aspect ratio issue though.
– George Mandis
Nov 12 at 20:04
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53232822%2fml5-js-styletransfer-only-works-with-11-aspect-ratio%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Deeplearning.js is no longer supported. tensorflow.js can be used instead
– edkeveked
Nov 12 at 19:22
@edkeveked Thanks. I know DeepLearn.js is deprecated — I'm linking to it because the DeepLearn example works "correctly" whereas the ml5.js one does not. I double-checked and my understanding is ml5.js is built on top of tensorflow.js, for what it's worth. I'm not sure how any of this addresses my question about the image aspect ratio issue though.
– George Mandis
Nov 12 at 20:04