angular-is-all-you-need.pdf

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

HELLO! 4 ANGULAR IS ALL YOU NEED I’m Markus @markusingvarssn

Slide 5

Slide 5 text

HELLO! 5 ANGULAR IS ALL YOU NEED I’m Markus @markusingvarssn

Slide 6

Slide 6 text

HELLO! 6 ANGULAR IS ALL YOU NEED I’m Markus @markusingvarssn

Slide 7

Slide 7 text

ANGULAR IS ALL YOU NEED Today’s project

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

BENEFITS WITH CLIENT-SIDE ML 9 • Privacy and Security • Reduced Latency • Reduced Server Load • Offline Functionality

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

PROJECT STRUCTURE

Slide 12

Slide 12 text

APP.COMPONENT.TS

Slide 13

Slide 13 text

COCOSSD.TS

Slide 14

Slide 14 text

COCOSSD.TS

Slide 15

Slide 15 text

COCOSSD.TS

Slide 16

Slide 16 text

COCOSSD.TS

Slide 17

Slide 17 text

COCOSSD.SERVICE.TS

Slide 18

Slide 18 text

COCOSSD.SERVICE.TS

Slide 19

Slide 19 text

COCOSSD.SERVICE.TS

Slide 20

Slide 20 text

OBJECT-DETECTION.TOKEN.TS

Slide 21

Slide 21 text

VIDEO.COMPONENT.TS

Slide 22

Slide 22 text

VIDEO.COMPONENT.TS

Slide 23

Slide 23 text

VIDEO.COMPONENT.TS

Slide 24

Slide 24 text

INDEX.TS

Slide 25

Slide 25 text

26 An issue – machine learning models are chunky • Large ML models can lead to increased app loading time • Increased bounce rate • Lower conversion rates

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Lazy-load routes - modules and standalone components

Slide 28

Slide 28 text

Lazy-load routes - modules and standalone components 🥁

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

HANDLING CHUNKY MODELS Demo Time

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

An issue – machine learning models are computationally expensive to use

Slide 33

Slide 33 text

An issue – machine learning models are computationally expensive to use

Slide 34

Slide 34 text

An issue – machine learning models are computationally expensive to use

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

An issue – machine learning models are computationally expensive to use

Slide 39

Slide 39 text

An issue – machine learning models are computationally expensive to use

Slide 40

Slide 40 text

An issue – machine learning models are computationally expensive to use ng generate web-worker

Slide 41

Slide 41 text

An issue – machine learning models are computationally expensive to use Web Workers ♥ RxJS

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

HANDLING CHUNKY MODELS, AGAIN Demo Time

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

What about offline support?

Slide 48

Slide 48 text

ng add @angular/pwa What about offline support?

Slide 49

Slide 49 text

What does ng add @angular/pwa do? It adds a service worker to our app which will help to cache and serve assets offline.

Slide 50

Slide 50 text

MAKE A PROGRESSIVE WEB APP Demo Time

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

SUMMARY Today we’ve learned some of the benefits of using Angular to build client side machine learning applications

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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!