# Model output not looking as expected (tfjs/tflite) styletransfer model **URL:** \ **Category:** General Discussion\ **Tags:** tfhub, tfjs, help\_request\ **Created:** [September 16, 2021, 2:04am UTC](https://discuss.ai.google.dev/t/model-output-not-looking-as-expected-tfjs-tflite-styletransfer-model/31096 "2021-09-16T02:04:57Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Lex](https://avatars.discourse-cdn.com/v4/letter/l/c68b51/32.png) [@Lex](https://discuss.ai.google.dev/u/Lex)\ **Post date:** [September 16, 2021, 2:04am UTC](https://discuss.ai.google.dev/t/model-output-not-looking-as-expected-tfjs-tflite-styletransfer-model/31096/1 "2021-09-16T02:04:57Z")
Hey all, I’m trying to implement the style transfer from the TFHub: [Google | arbitrary-image-stylization-v1 | Kaggle](https://tfhub.dev/google/magenta/arbitrary-image-stylization-v1-256/2) using tf.js but I’m running into a little bit of an issue. I think I’ve got it all hooked up together but the resulting image is not looking very good. Any help would be truly appreciated! **Current result in the browser** ![](https://d3qe71uytubmmx.cloudfront.net/original/2X/2/2fb8c98bdb78db9143af68ccc529fa3b9488a63b.png) **Code** ```auto import '@tensorflow/tfjs-backend-cpu'; import{ browser, image, tidy, Tensor, reshape} from '@tensorflow/tfjs-core'; import * as tflite from '@tensorflow/tfjs-tflite' const predictionUrl = 'https://tfhub.dev/google/lite-model/magenta/arbitrary-image-stylization-v1-256/fp16/prediction/1'; const transferUrl = 'https://tfhub.dev/google/lite-model/magenta/arbitrary-image-stylization-v1-256/fp16/transfer/1'; export async function run() { const predictionModel = await tflite.loadTFLiteModel(predictionUrl); const transferMode = await tflite.loadTFLiteModel(transferUrl); const styleImg = await browser.fromPixelsAsync(document.querySelector('.styleImage')); const img = await browser.fromPixelsAsync(document.querySelector('.originalImage')); const resizedStyleImage = reshape(image.resizeBilinear(styleImg, [256, 256]), [1, 256, 256, 3]); const styleBottleNeck = await tidy(() => predictionModel.predict([resizedStyleImage])) as Tensor; const resizedImageTensor = reshape(image.resizeBilinear(img, [384, 384], true), [1, 384, 384, 3]); const output = await tidy(() => transferMode.predict([resizedImageTensor, styleBottleNeck])) as Tensor; return browser.toPixels(reshape(image.resizeBilinear(output, [540, 960], true), [540, 960, 3]), document.querySelector('.canvas')) } ``` ---
**Author:** ![lina128](https://d1dlmcr85iqnpo.cloudfront.net/user_avatar/discuss.ai.google.dev/lina128/32/7138_2.png) [@lina128](https://discuss.ai.google.dev/u/lina128)\ **Post date:** [September 16, 2021, 4:54pm UTC](https://discuss.ai.google.dev/t/model-output-not-looking-as-expected-tfjs-tflite-styletransfer-model/31096/3 "2021-09-16T16:54:11Z")
Hi, can you provide the result from TF using their colab? ---
**Author:** ![Lex](https://avatars.discourse-cdn.com/v4/letter/l/c68b51/32.png) [@Lex](https://discuss.ai.google.dev/u/Lex)\ **Post date:** [September 16, 2021, 6:41pm UTC](https://discuss.ai.google.dev/t/model-output-not-looking-as-expected-tfjs-tflite-styletransfer-model/31096/4 "2021-09-16T18:41:31Z")
This is what I get using the CoLab: ![index](https://d3qe71uytubmmx.cloudfront.net/original/2X/9/9f3c712283d5e12d43245ea7b42bfdb4b0b1f91e.png) ---
**Author:** ![Lex](https://avatars.discourse-cdn.com/v4/letter/l/c68b51/32.png) [@Lex](https://discuss.ai.google.dev/u/Lex)\ **Post date:** [September 16, 2021, 10:14pm UTC](https://discuss.ai.google.dev/t/model-output-not-looking-as-expected-tfjs-tflite-styletransfer-model/31096/5 "2021-09-16T22:14:57Z")
Is there maybe some preprocessing step I’m missing in my code? ---
**Author:** ![Bhack](https://d1dlmcr85iqnpo.cloudfront.net/user_avatar/discuss.ai.google.dev/bhack/32/6388_2.png) [@Bhack](https://discuss.ai.google.dev/u/Bhack)\ **Post date:** [September 16, 2021, 11:05pm UTC](https://discuss.ai.google.dev/t/model-output-not-looking-as-expected-tfjs-tflite-styletransfer-model/31096/6 "2021-09-16T23:05:56Z")
In the hub example I see: ```auto Convert to float32 numpy array, add batch dimension, and normalize to range [0, 1] ``` ---
**Author:** ![lina128](https://d1dlmcr85iqnpo.cloudfront.net/user_avatar/discuss.ai.google.dev/lina128/32/7138_2.png) [@lina128](https://discuss.ai.google.dev/u/lina128)\ **Post date:** [September 17, 2021, 12:09am UTC](https://discuss.ai.google.dev/t/model-output-not-looking-as-expected-tfjs-tflite-styletransfer-model/31096/7 "2021-09-17T00:09:10Z")
Yes, you need to normalize the input image tensor to [0, 1]. ---
**Author:** ![Lex](https://avatars.discourse-cdn.com/v4/letter/l/c68b51/32.png) [@Lex](https://discuss.ai.google.dev/u/Lex)\ **Post date:** [September 17, 2021, 2:58pm UTC](https://discuss.ai.google.dev/t/model-output-not-looking-as-expected-tfjs-tflite-styletransfer-model/31096/9 "2021-09-17T14:58:03Z")
That seems to have vastly improved the result. I still need to validate that the results match with the CoLab given the exact same images as I may be missing additional processing steps. For folks who may run into similar issues, to normalize, I divided the image tensors by 255 like so: ```auto const normalizedStyleImg= div(await browser.fromPixelsAsync(document.querySelector('.styleImage')), 255); const normalizedContentImg = div(await browser.fromPixelsAsync(document.querySelector('.originalImage')), 255); ``` ---
**Author:** ![Jason](https://d1dlmcr85iqnpo.cloudfront.net/user_avatar/discuss.ai.google.dev/jason/32/6193_2.png) [@Jason](https://discuss.ai.google.dev/u/Jason)\ **Post date:** [September 17, 2021, 6:11pm UTC](https://discuss.ai.google.dev/t/model-output-not-looking-as-expected-tfjs-tflite-styletransfer-model/31096/11 "2021-09-17T18:11:55Z")
Do let us know if you end up putting the demo somewhere! Would love to share with the community if it is public 🙂 Just tag on social with [#MadeWithTFJS](https://twitter.com/hashtag/MadeWithTFJS?src=hashtag_click) so we can find it if it is!