angular-is-all-you-need.pdf

As 2024 unfolds, the drive for on-device machine learning is gaining momentum, spurred by factors like cost, privacy, latency, and offline capability. This talk will focus on Angular's readiness for this trend, showcasing its proficiency in streamlined client-side machine learning implementations. We'll explore how Angular simplifies the integration of complex functionalities in ML applications, ensuring seamless, maintainable, and performant solutions. Attendees will gain valuable insights into crafting innovative, privacy-first ML applications using Angular's flexible and powerful framework.

Talk by Markus Ingvarsson @ ng-India 2024.

Transcript

1. C L I E N T - S I D E M A C H I N E L E A R N I N G Markus Ingvarsson ANGULAR IS ALL YOU NEED
2. 2 C L I E N T - S I D E M A C H I N E L E A R N I N G ANGULAR IS ALL YOU NEED “In the future, we’re gonna see, in my opinion, local models on windows, local models on iPhones, where we don’t have to send the data anywhere” - Scott Hanselman, VP Developer Community at Microsoft @ Ep. 280 Azure Devops Podcast, Jan 15th, 2024
3. 3 C L I E N T - S I D E M A C H I N E L E A R N I N G ANGULAR IS ALL YOU NEED
4. HELLO! 4 ANGULAR IS ALL YOU NEED I’m Markus @markusingvarssn
5. HELLO! 5 ANGULAR IS ALL YOU NEED I’m Markus @markusingvarssn
6. HELLO! 6 ANGULAR IS ALL YOU NEED I’m Markus @markusingvarssn
7. ANGULAR IS ALL YOU NEED Today’s project
8. CLIENT-SIDE MACHINE LEARNING IN A NUTSHELL 8 Server-Side ML Model is kept on the server Client-Side ML Model is sent to the device
9. BENEFITS WITH CLIENT-SIDE ML 9 • Privacy and Security • Reduced Latency • Reduced Server Load • Offline Functionality
10. Today’s App - Overview • Stream video from camera • Use object detection library to list the predictions from the video stream ANGULAR IS ALL YOU NEED 10
11. PROJECT STRUCTURE
12. APP.COMPONENT.TS
13. COCOSSD.TS
14. COCOSSD.TS
15. COCOSSD.TS
16. COCOSSD.TS
17. COCOSSD.SERVICE.TS
18. COCOSSD.SERVICE.TS
19. COCOSSD.SERVICE.TS
20. OBJECT-DETECTION.TOKEN.TS
21. VIDEO.COMPONENT.TS
22. VIDEO.COMPONENT.TS
23. VIDEO.COMPONENT.TS
24. INDEX.TS
25. 26 An issue – machine learning models are chunky • Large ML models can lead to increased app loading time • Increased bounce rate • Lower conversion rates
27. Lazy-load routes - modules and standalone components
28. Lazy-load routes - modules and standalone components 🥁
29. 30 Deferrable Views • New feature in Angular v17! • Defer the loading within a template • Supports triggers, prefetching and sub blocks for state management • The must-have feature for client-side machine learning! Original from https://60cd6480.rocketcdn.me/wp-content/uploads/2023/05/3kblvvwwa18-1500x1200.jpg
30. HANDLING CHUNKY MODELS Demo Time
32. An issue – machine learning models are computationally expensive to use
33. An issue – machine learning models are computationally expensive to use
34. An issue – machine learning models are computationally expensive to use
38. An issue – machine learning models are computationally expensive to use
39. An issue – machine learning models are computationally expensive to use
40. An issue – machine learning models are computationally expensive to use ng generate web-worker
41. An issue – machine learning models are computationally expensive to use Web Workers ♥ RxJS
42. What are Web Workers? This specification defines an API for running scripts in the background independently of any user interface scripts. https://html.spec.whatwg.org/multipage/workers.html#scope-2
43. HANDLING CHUNKY MODELS, AGAIN Demo Time
47. What about offline support?
48. ng add @angular/pwa What about offline support?
49. What does ng add @angular/pwa do? It adds a service worker to our app which will help to cache and serve assets offline.
50. MAKE A PROGRESSIVE WEB APP Demo Time
51. ng-pet-cam Heavily inspired by Jason Mayes pet-cam app Leverages all the benefits of Angular that we’ve visited today Is live on https://ngpetcam.web.app and code can be accessed on https://github.com/markusingvar sson/aiayn-ng-pet-cam ANGULAR IS ALL YOU NEED 53
52. SUMMARY Today we’ve learned some of the benefits of using Angular to build client side machine learning applications
53. SUMMARY Today we’ve learned some of the benefits of using Angular to build client side machine learning applications • Use deferrable views to lazy load heavy dependencies
54. SUMMARY Today we’ve learned some of the benefits of using Angular to build client side machine learning applications • Use deferrable views to lazy load heavy dependencies • Leverage Angular’s DI architecture to easily update machine learning models in your app
55. SUMMARY Today we’ve learned some of the benefits of using Angular to build client side machine learning applications • Use deferrable views to lazy load heavy dependencies • Leverage Angular’s DI architecture to easily update machine learning models in your app • Use web workers to make your app run smoothly and use RxJS to deal with asynchronous event streams
56. SUMMARY Today we’ve learned some of the benefits of using Angular to build client side machine learning applications • Use deferrable views to lazy load heavy dependencies • Leverage Angular’s DI architecture to easily update machine learning models in your app • Use web workers to make your app run smoothly and use RxJS to deal with asynchronous event streams • Leverage Angular’s native support for building PWAs
57. Further Resources • Make your own web based smart camera in JS | Google For Developers https://www.youtube.com/watch?v=mwEQ_oN3w0Y • Deferrable Views – New Feature in Angular 17 | Decoded Frontend https://www.youtube.com/watch?v=gA6iJbA9oBg&t=4 125s • Reaping Benefits with Web Workers | Markus Ingvarsson https://www.youtube.com/watch?v=R-y8dcJAlDw • Angular service worker overview | Angular Documentation https://angular.dev/ecosystem/service-workers
58. C L I E N T - S I D E M A C H I N E L E A R N I N G Markus Ingvarsson https://www.linkedin.com/in/markusingvarsson/ https://twitter.com/markusingvarssn ANGULAR IS ALL YOU NEED Thank you!