@eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE...
Transcript of @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE...
![Page 1: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/1.jpg)
Between AI& JS
@eliraneliassy
![Page 2: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/2.jpg)
About mySelf
• Experienced FE developer, specialised in B2C applications
• FE trainer & lecturer @ 500Tech
• Angular-IL & AngularUP conf CO-organiser
![Page 3: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/3.jpg)
Building powerful Angular community
![Page 4: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/4.jpg)
![Page 5: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/5.jpg)
![Page 6: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/6.jpg)
![Page 7: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/7.jpg)
![Page 8: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/8.jpg)
![Page 9: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/9.jpg)
![Page 10: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/10.jpg)
![Page 11: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/11.jpg)
![Page 12: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/12.jpg)
What is AI?“The theory and development of
computer systems able to perform
tasks normally requiring human
intelligence, such as visual perception,
speech recognition, decision-making
and translation between Languages”
![Page 13: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/13.jpg)
What is AI?“The theory and development of
computer systems able to perform
tasks normally requiring human
intelligence, such as visual perception,
speech recognition, decision-making
and translation between Languages”
![Page 14: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/14.jpg)
What is AI?
![Page 15: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/15.jpg)
What is AI?
![Page 16: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/16.jpg)
What is AI?
![Page 17: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/17.jpg)
What is AI?
![Page 18: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/18.jpg)
What is AI?
![Page 19: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/19.jpg)
What is AI?
![Page 20: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/20.jpg)
AI is EVERYWHERE
![Page 21: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/21.jpg)
https://techcrunch.com/2017/12/19/facebook-facial-recognition-photos/
![Page 22: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/22.jpg)
Example - Image Recognition
![Page 23: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/23.jpg)
Example - Image Recognition
![Page 24: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/24.jpg)
How does it works?
![Page 25: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/25.jpg)
![Page 26: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/26.jpg)
![Page 27: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/27.jpg)
![Page 28: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/28.jpg)
![Page 29: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/29.jpg)
![Page 30: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/30.jpg)
23
-1
15
13
![Page 31: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/31.jpg)
23
-1
15
13
1
![Page 32: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/32.jpg)
23
-1
15
13
1 0
![Page 33: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/33.jpg)
23
-1
15
13
1 0
The Training
![Page 34: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/34.jpg)
![Page 35: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/35.jpg)
![Page 36: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/36.jpg)
![Page 37: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/37.jpg)
Wanna see some code?
![Page 38: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/38.jpg)
Imports
import * as tf from '@tensorflow/tsjs';
<script src="https://unpkg.com/@tensorflow/tfjs"></script>
![Page 39: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/39.jpg)
Trying/Loading models
await model.fit(inputs, labels, { batchSize, epochs, shuffle: true, callbacks: tfvis.show.fitCallbacks( { name: 'Training Performance' }, ['loss', 'mse'], { height: 200, callbacks: ['onEpochEnd'] } ) });
await tf.loadModel(‘model.json');
![Page 40: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/40.jpg)
Live Demo…
![Page 41: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/41.jpg)
Demo Objectives:
Create an image classifier using tf.js:
Load a pre-trained model call mobilenet Select image and try to predict what’s in it
Wire the webcam and predict what you see!
![Page 42: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/42.jpg)
Who loves Packman?
![Page 43: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/43.jpg)
Let’s Plays Packman…in a
different way…
![Page 44: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •](https://reader033.fdocuments.in/reader033/viewer/2022060410/5f10658f7e708231d448e83a/html5/thumbnails/44.jpg)
• You don’t have to be a data scientist to do AI any more!
• TensorFlow.js is an independent package, you can run it in the
browser with a matter of a 1 simple import
• Is the future of FE developers is taking part in building AI based
prediction models? YES!
Summary