# My TFJS stylization looks terrible

**URL:** <https://discuss.ai.google.dev/t/my-tfjs-stylization-looks-terrible/26281>\
**Category:** General Discussion\
**Tags:** tfhub, tfjs, models, help\_request\
**Created:** [August 1, 2022, 1:45am UTC](https://discuss.ai.google.dev/t/my-tfjs-stylization-looks-terrible/26281 "2022-08-01T01:45:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ryan\_Johnson](https://d1dlmcr85iqnpo.cloudfront.net/user_avatar/discuss.ai.google.dev/ryan_johnson/32/12662_2.png) [@Ryan\_Johnson](https://discuss.ai.google.dev/u/Ryan_Johnson)\
**Post date:** [August 1, 2022, 1:45am UTC](https://discuss.ai.google.dev/t/my-tfjs-stylization-looks-terrible/26281/1 "2022-08-01T01:45:47Z")

</div>

I tried to convert this guide into TFJS: [Google Colab](https://colab.research.google.com/github/tensorflow/hub/blob/master/examples/colab/tf2_arbitrary_image_stylization.ipynb). I took this model: [Google | arbitrary-image-stylization-v1 | Kaggle](https://tfhub.dev/google/magenta/arbitrary-image-stylization-v1-256/2) and used the tensorflowjs\_converter to convert it to a tfjs\_graph\_model using this command:

`tensorflowjs_converter --signature=serving_default --input_format=tf_hub --output_format=tfjs_graph_model ~/Downloads/magenta_arbitrary-image-stylization-v1-256_2 ../temp/test_model`

I then put that folder on my test server, along with the example images of the golden gate bridge and the wave. I wrote a small amount of js and the result was terrible. Here is what I wrote:

```auto
const styleImg = tf.div(await tf.browser.fromPixelsAsync(document.querySelector('.styleImage')), 255); 
const img = tf.div(await tf.browser.fromPixelsAsync(document.querySelector('.originalImage')), 255);
const resizedStyleImage = tf.reshape(tf.image.resizeBilinear(styleImg, [256, 256]), [1, 256, 256, 3]);
const resizedImageTensor = tf.reshape(tf.image.resizeBilinear(img, [288, 384], true), [1, 288, 384, 3]);
var mymodel = await tf.loadGraphModel(TEST_MODEL_URL)
test = await mymodel.execute([resizedImageTensor, resizedStyleImage]);
tf.browser.toPixels(tf.reshape(tf.image.resizeBilinear(test, [288, 384], true), [288, 384, 3]), document.querySelector('.my-canvas'));

```

 ![Screen Shot 2022-07-29 at 4.14.51 PM](https://d3qe71uytubmmx.cloudfront.net/original/2X/2/256a8bc473ea303af764469d414ddc41135e0b1f.jpeg)

Any thoughts on where I went wrong? Perhaps this is a side effect of converting the model from hub to tfjs\_graph? I’m new to ML so it’s possible I made an obvious mistake and I’m just oblivious to it.

---

<div class="post-metadata">

**Author:** ![Ryan\_Johnson](https://d1dlmcr85iqnpo.cloudfront.net/user_avatar/discuss.ai.google.dev/ryan_johnson/32/12662_2.png) [@Ryan\_Johnson](https://discuss.ai.google.dev/u/Ryan_Johnson)\
**Post date:** [August 1, 2022, 2:09pm UTC](https://discuss.ai.google.dev/t/my-tfjs-stylization-looks-terrible/26281/3 "2022-08-01T14:09:12Z")

</div>

I figured it out! My mistake was I swapped the inputs around in my execute function. So I was making a wave in the style of a bridge, not a bridge in the style of a wave. Here is my final result, which I am much happier with:

 ![Screen Shot 2022-08-01 at 9.58.50 AM](https://d3qe71uytubmmx.cloudfront.net/original/2X/1/1c6f997a32a9ae8f1531091f06820dd392c45fa3.jpeg)

Corrected line of code I ended up using:

`test = await mymodel.predict([resizedStyleImage, resizedImageTensor])`

After fixing the issue, I did see this warning in my console, so perhaps I’m still doing something wrong?

`High memory usage in GPU: 1211.99 MB, most likely due to a memory leak`

I think I need to wrap `predict` in a `tf.tidy` perhaps.