Intelligent Frontends - Angular and Transformers.js

Discover how Transformers.js enables Angular applications to deliver advanced AI capabilities directly in the browser, enhancing user experiences with powerful features.

Learn how to implement AI without relying on servers, ensuring privacy, speed, and scalability.

Through practical examples, we’ll explore how to seamlessly integrate these capabilities into your Angular apps. Achieve more with AI-powered features that take your projects to the next level.

Talk by Markus Ingvarsson @ ng-India 2025.

Transcript

1. I N T E L L I G E N T F R O N T E N D S A N G U L A R A N D T R A N S F O R M E R S . J S @markusingvarssn
4. D E L H I A I R P O R T
5. S O M E R O U N D A B O U T @ D E L H I A I R P O R T
7. I N T E L L I G E N T F R O N T E N D S A N G U L A R A N D T R A N S F O R M E R S J S After this talk, we will know about:
8. I N T E L L I G E N T F R O N T E N D S A N G U L A R A N D T R A N S F O R M E R S J S After this talk, we will know about: • Why Client-side Machine Learning?
9. I N T E L L I G E N T F R O N T E N D S A N G U L A R A N D T R A N S F O R M E R S J S After this talk, we will know about: • Why Client-side Machine Learning? • Transformers.js
10. I N T E L L I G E N T F R O N T E N D S A N G U L A R A N D T R A N S F O R M E R S J S After this talk, we will know about: • Why Client-side Machine Learning? • Transformers.js • Adding Transformers.js to our Angular projects
11. HELLO! INTELLIGENT F RONTENDS I’m Markus @markusingvarssn
12. HELLO! I’m Markus @markusingvarssn INTELLIGENT F RONTENDS
13. HELLO! I’m Markus @markusingvarssn INTELLIGENT F RONTENDS
14. M A C H I N E L E A R N I N G I N 3 0 S E C O N D S
15. M A C H I N E L E A R N I N G I N 3 0 S E C O N D S
16. M A C H I N E L E A R N I N G I N 3 0 S E C O N D S f(x) Dog Cat
17. W H Y 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 ?
18. W H Y 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 ? - No network delay!
19. W H Y 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 ? - No network delay! https://www.keycdn.com/support/network-latency
20. W H Y 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 ? - No network delay! https://www.nvidia.com/sv-se/geforce/graphics-cards/
21. W H Y 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 ? - No network delay! https://www.nvidia.com/sv-se/geforce/graphics-cards/ https://en.wikipedia.org/wiki/WebGPU
22. W E BGP U BR OWS E R S UP P ORT https://caniuse.com/webgpu
23. https://github.com/tensorflow/tfjs- models/tree/master/hand-pose-detection
24. W H Y 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 ? - No network delay! - It is private (and therefore supported offline!)
26. W H Y 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 ? - No network delay! - It is private (and therefore supported offline!) - It is cost effective!
28. W H Y 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 ? - No network delay! - It is private (and therefore supported offline!) - It is cost effective!
31. W H AT I S T R A N F O R M E R S . J S ? - Run pre-trained, state-of-the-art machine learning models in JavaScript
32. W H AT I S T R A N F O R M E R S . J S ? - Run pre-trained, state-of-the-art machine learning models in JavaScript - Mirrors the Python transformers library
33. W H AT I S T R A N F O R M E R S . J S ? - Run pre-trained, state-of-the-art machine learning models in JavaScript - Mirrors the Python transformers library - Supports 100+ model architectures across a wide domain of tasks
34. I N S TA L L I N G T R A N S F O R M E R S . J S
35. U S I N G T H E P I P E L I N E A P I
36. U S I N G T H E P I P E L I N E A P I A pipeline in Transformers.js is a high-level abstract that bundles together:
37. U S I N G T H E P I P E L I N E A P I A pipeline in Transformers.js is a high-level abstract that bundles together: - Pretrained model
38. U S I N G T H E P I P E L I N E A P I A pipeline in Transformers.js is a high-level abstract that bundles together: - Pretrained model - Input preprocessing
39. U S I N G T H E P I P E L I N E A P I A pipeline in Transformers.js is a high-level abstract that bundles together: - Pretrained model - Input preprocessing - Output postprocessing
40. A T I N Y E X A M P L E
41. A T I N Y E X A M P L E
42. T R A N S F O R M E R S . J S - TA S K S Natural Language Processing - summarization - question-answering - sentence-similarity - sentiment-analysis - text-generation - translation - etc Vision - background-removal - depth-estimation - image-classification - image-segmentation - object-detection - etc Audio - audio-classification - automatic-speech- recognition - text-to-speech - etc … and more
43. T R A N S F O R M E R S . J S - M O D E L S
44. T R A N S F O R M E R S . J S - M O D E L S
45. T R A N S F O R M E R S . J S - M O D E L S
46. M O R E E X A M P L E S ?
47. M O R E E X A M P L E S ?
48. M O R E E X A M P L E S ?
49. M O R E E X A M P L E S ?
50. M O R E E X A M P L E S ?
51. M O R E E X A M P L E S ?
52. M O R E E X A M P L E S ?
53. M O R E E X A M P L E S ?
54. L E T ’ S B U I L D S O M E T H I N G I N A N G U L A R !
55. S C R E E N D U M P F R O M M Y T H E S I S D A Y S
57. L E T ’ S B U I L D A N O T H E R N O T E T A K I N G A P P
58. T O D AY ’ S A P P - O V E R V I E W • Record audio from user’s device • Use a speech-to-text model from Transformers.js to transcribe the recording to create rich notes
59. PROJECT STRUCTURE
60. APP.COMPONENT.TS
61. APP.COMPONENT.TS
62. APP.COMPONENT.TS
64. APP.COMPONENT.TS
65. AUDIO-RECORED.COMPONENT.HTML
66. APP.COMPONENT.TS
67. APP.COMPONENT.TS
68. OTHER COMPONENTS
69. WORKER
70. What are Web Workers? • Runs JavaScript in a separate thread • Keeps UI smooth during heavy work
71. APP.WORKER.TS
72. WORKER.SERVICE.TS
73. WORKER.SERVICE.TS
74. WORKER.SERVICE.TS
75. WORKER.SERVICE.TS
76. WORKER.SERVICE.TS
77. INDEX.TS
78. TRANSCRIBER.SERVICE.TS
79. D E M O T I M E !
80. SUMMARY Thanks to Transformers.js and Angular, we can build ML-powered web apps that are
81. SUMMARY Thanks to Transformers.js and Angular, we can build ML-powered web apps that are Fast and responsive
82. SUMMARY Thanks to Transformers.js and Angular, we can build ML-powered web apps that are Fast and responsive Private and offline support
83. SUMMARY Thanks to Transformers.js and Angular, we can build ML-powered web apps that are Fast and responsive Private and offline-first Cost effective at scale
84. FUTURE WORK – WHAT’S NEXT?
85. FUTURE WORK – WHAT’S NEXT? • Train or fine-tune your own models!
86. FUTURE WORK – WHAT’S NEXT? • Train or fine-tune your own models! • Join the Huggingface community!
87. FUTURE WORK – WHAT’S NEXT? • Train or fine-tune your own models! • Join the Huggingface community! • Get creative!
88. A N G U L A R A N D T R A N S F O R M E R S . J S INTELLIGENT FRONTENDS Thank you! Markus Ingvarsson https://www.linkedin.com/in/markusingvarsson https://bsky.app/profile/markusingvarsson.bsky.social https://twitter.com/markusingvarssn http://if-ngindia.web.app/