I created an app with React.js and Tensorflow.js to demo Style Transfer in Real Time

My challenge was to create an interactive component using React and Tensorflow.js that anyone could use from a browser to play with the Fast Style Transfer model in real-time, using a web camera!

The short demo:

The article, with demo and with link to source code:


Thank you for sharing your TensorFlow.js creation and getting it working in real-time in the browser is very cool indeed! Shall most certainly re-share this on social! Thank you for being part of the #madeWithTFJS community and excited to see what else you create. I think 2022 will be the year we see a lot of folk push the boundaries of what is possible with Web ML in the browser - many companies both large and small are now using Web ML to power their ideas with TensorFlow.js.

Do you have any plans to use this anywhere yourself? You could totally turn this into a Chrome extension and then join your video calls like this like I did here with a segmentation model:

Hi Jason,
Thanks for the feedback!
That’s very cool. I didn’t know I could do a direct integration with Google Meet by creating a Chrome Extension. That’s a bit crazy! When I get sometime I will be sure to transform myself into a stylized version for my next google meet.

I did this widget mainly to learn REACT and Tensorflow.js, to share on my Youtube channel and hopefully be able to share in some upcoming developer event.

Kind Regards,

1 Like

A lot is possible! However when I run your code it runs at less than 1FPS for me - what hardware are you using to get real-time performance?! I am on a i9 10th gen Intel processor with NVIDIA 1070 GPU.

Hi Jason,

Yes, it is currently a bit slow. I had it running faster with and without an Nvidia GPU but I did some refactoring and slowed it down.
I think it might be related to missing a tf.tidy().
I will need to investigate.

Kind Regards,