45
Between AI& JS @eliraneliassy

@eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •

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 •

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 •

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 •
Page 5: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •
Page 6: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •
Page 7: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •
Page 8: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •
Page 9: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •
Page 10: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •
Page 11: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •
Page 12: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •

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 •

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 •

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 •

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 •

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 •

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 •

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 •

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 •

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://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 •

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 •

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 •

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 •
Page 26: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •
Page 27: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •
Page 28: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •
Page 29: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •
Page 30: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •

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 •

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 •

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 •

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 •
Page 35: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •
Page 36: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •
Page 37: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •

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 •

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 •

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 •

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 •

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 •

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 •

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 •

• 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

Page 45: @eliraneliassy Between AI& JS · Between AI& JS @eliraneliassy. About mySelf • Experienced FE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech •

Thank You

@eliraneliassy [email protected]