Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bring your neural networks to the browser with TF.js - Simone Scardapane

111 views

Published on

https://www.meetup.com/it-IT/Machine-Learning-Data-Science-Meetup/events/257338405/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Bring your neural networks to the browser with TF.js - Simone Scardapane

  1. 1. Bring your neural networks to the browser with TF.js!
  2. 2. Something about myself Research fellow @ Sapienza researching on neural networks Strong passion for promoting ML in all its aspects
  3. 3. Not-so-easy question: what is TensorFlow?
  4. 4. TensorFlow is all about: 1. Neural networks 2. Python 3. Huge data & infrastructures
  5. 5. TensorFlow has grown impressively
  6. 6. TensorFlow Distributed Execution Engine CPU GPU TPU Mobile Embedded Neural Nets C++ K-Means Loss Functions, Metrics Linear Algebra Decision Trees SVM Gaussian Mixture Models Regression Random Forests Probabilistic Methods Signal Processing Lattice TensorFlow is a comprehensive ML framework Python Java Javascript
  7. 7. Why Javascript?
  8. 8. 1. No installation required 2. Privacy (GDPR, anyone?) 3. Sensors! (Lots of) 4. WebGL 5. The world runs on apps and web... Why TF on browsers?
  9. 9. 1. Train a model from scratch 2. Fine-tune a model 3. Import a trained model 3 use cases COMPLEXITY
  10. 10. https://blog.mgechev.com/2018/10/20/transfer-learning-tensorflow-js-data-augmentation-mobile-net/
  11. 11. Interactive visualizations https://tensorspace.org/ https://github.com/tensorflow/tfjs-vis
  12. 12. TensorFlow.js
  13. 13. Core API (ex deeplearn.js) TensorFlow SavedModel Layers API Keras models Browser (WebGL) Node.js: everywhere! (GPUs, TPUs, …)
  14. 14. Inference Time (ms) of MobileNet 1.0_224 Average of 200 runs
  15. 15. Core concepts
  16. 16. Import TF.js in your page <html> <head> <!-- Load TensorFlow.js --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.3/dist/tf.min.js" /> <script> <!-- Code here! --> ... </script> </head> ... </html>
  17. 17. Tensors // A 3x2 matrix of random numbers const x = tf.randomUniform([3, 2]); // Convert from Javascript arrays const y = tf.tensor1d([0.4, -0.2, 1.0]); // Matrix operations const z = x.transpose().matMul(y.reshape([3, 1]));
  18. 18. Auto-differencing // Function definition const axis = 1; const f = x => tf.sin(x).sum(axis); // Automatic gradient computation const fGrad = tf.grad(f);
  19. 19. Models and layers // Initialize the model const model = tf.sequential(); // Add layers model.add(tf.layers.dense({'units': 10, 'inputShape': 4})); model.add(tf.layers.dense({'units': 1})); // Define loss const loss = tf.losses.meanSquaredError // Optimize! const opt = tf.train.sgd({'lr': 0.1}); opt.minimize(() => loss(model.predict(xs), ys));
  20. 20. Simplified Keras API model.compile({'optimizer': 'sgd', loss: 'categoricalCrossentropy'}); await model.fit({x: xs, y: ys}); The training step is an async function!
  21. 21. Tidy can help you the code const sum = tf.tidy(() => { const a1 = tf.randomUniform([3, 2]); const a2 = tf.randomNormal([3, 2]); return a1.square().add(a2); });
  22. 22. Demo time!
  23. 23. ● Input: a (fixed-length) sequence. ● Output: the index of the largest element. Please don’t do this in real life. :-( Let’s learn… MAX!
  24. 24. Our RNN 0.14 0.81 0.64 0.0 LSTM 2% 95% 2.5% 0.5%
  25. 25. A better demo https://magenta.tensorflow.org/js https://codepen.io/teropa/full/RMGxOQ/
  26. 26. Where to from here?
  27. 27. Some resources 1. TensorFlow.js tutorials: https://js.tensorflow.org/tutorials/ 2. More examples: https://github.com/tensorflow/tfjs-examples/
  28. 28. Thanks for listening! «The future will be intensely data-driven. Creating a dynamic hub that brings together professionals, industries, and academics will be essential to achieve this vision.» http://www.iaml.it/member

×