Machine learning for the web

Machine learning Is a fun and very large topic

This a Web Devs meet up so we will talk about mostly the web aspects

WHY
ML things?

Problems

They need decisions.

This can be hard.

"Given a decision where the logic is unknown to us, but we have observations about the decision process, it is possible to use statistical analyses of these observations to create an approximation of the decision logic." - Ryan Case

towardsdatascience.com

https://towardsdatascience.com/why-machine-learning-303e6bdaa29d

What do we ML right now?

Media - Netflix Movies
Retail - Amazon Shopping
Manufacturing - Output Lines
Healthcare - Clinical similarity between patients
Finance - Fraud Detection
Science - My friend Zach does stuff

Big Problems

with Lots of data

Parts of MacHine learning

VOCABULARY mostly

Types of learniNg

Unsupervised learning

Learn the mapping of the data

❓ = F(X)

Supervised learning

Data is mapped

Y = f(x)

Reinforced learning

Trial and ErroR with a feedback lOop

https://cai.tools.sap/blog/the-future-with-reinforcement-learning-part-1/

General ML Terms

DATA SET

A collection of examples

TRAINING

The process of determining the ideal parameters comprising a model

Model

THE REPRESENTATION OF WHAT A MACHINE LEARNING SYSTEM HAS LEARNED FROM THE TRAINING DATA

feature engineering

Creating PredictIon VARIABLES

Classification

labels for predictions

Loss

Loss is a number indicating how bad the model's prediction was on a single example. If the model's prediction is perfect, the loss is zero; otherwise, the loss is greater.

Common ML Frameworks

TensorFlow

Pandas, Numpy, CAFFE, PyTorch, Apache Spark, matplotlib, Scikit-Learn, Seaborn

Microsoft CNTK, Amazon SageMaker,

Google Cloud ML Engine

preTrained Models

ML
JavaScript

Brain.js

BRAIN.JS

"Brain.js is a GPU accelerated library of Neural Networks written in JavaScript for Browsers and Node.js"

https://brain.js.org/#/

What did I try??

Movie gross prediction based on a string containing genre and names attached to the film

Data Set Example

{"text":"Action Adventure Sci-Fi Bryan Singer Patrick Stewart Hugh Jackman Ian McKellen Famke Janssen","category":"150"}

157 million gross

Predict gross for: Action movie with Jackman and Singer??

const brain = require('brain.js');
const data = require('./movies.json');
const network = new brain.recurrent.LSTM();
const trainingData = data.map(item => ({
  input: item.text,
  output: item.category
}));

network.train(trainingData, {
  iterations: 100
});
// test this string
let movie = 'Action Bryan Singer Hugh Jackman');
const output = network.run(movie);
console.log('Category:' + output);

My Brain.js Prediction = 100Million

X2: X-Men United (2003)

$110 Million

MY DATA WASN'T GREAT

I forgot movies can have 2 directors, no data on new actors, etc...

What I learned

I am not good at this yet 😔

Data matters MOST 💾

Verification takes thought ✅

Debugging can be hard 🐛

I needed more practice 💃

Playing with data is really FUN I should try more 🤠

Ml5.js

Higher level framework for tenserflow.js

What i tried

Image recognition

Quick Demo

Get out your phones, be on wifi

Got to this URL:

https://eugweb.dev/mlweb

this is cool

😎 ALL in the browser

😎 ml5.js runs tenserflow.js

😎 works with pd.js for dom fun

Less than cool

JS loading takes time ⏱️

Model has to be small 🤏

Normal Browser JS limitations 😤

CODE

<!-- p5 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
<!-- ml5 -->
    <script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>

Libraries

Set it up

function setup(){
    createCanvas(windowWidth, 800);
    options = {
    	video: camChoice
    };
    video = createCapture(options);
    background(0);
    video.hide();
    mobileNet = ml5.imageClassifier('MobileNet', video, modelReady)
}

model ready

function modelReady(){
    report('#ready', 'Model Ready');
    mobileNet.predict(gotResults);
}

Images

function gotResults(error, results){
    if(error){
        console.log(error);
    }
    else{
        resultLabel = results[0].label;
        setTimeout(() => {
            mobileNet.predict(gotResults);
            resultLabel = '';
            report('#matching', 'Matching');
        }, 1000);
    }
}

So cool

Image recognition for everyone 😎

Very simple to use 😀

ALL IN BROWSER 💖

Not so

Limited by by phone capabilities 📱

Not learning lots of ML ⚙️ 📖

Bugs are haaard 🐛 🐞 🐜

What i learded

hAve some empathy for the machine

Images fool humans often too. This is a sink.

USE case in web pages

this is still alpha!

Machine Learning driven user-experiences on the web

Predictions

Predict the next page (or pages)

Page-level: Prerender/Prefetch the page which is most likely to be visited next
Bundle-level: Prefetch the bundles associated with the top N pages. On each page navigation, at all the neighbors of the current page, sorted in descending order by the probability to be visited. Fetch assets (JavaScript chunks) for the top N pages, depending on the current connection effective type.

Predict the next piece of content

Predict the next piece of content (article, product, video) a user is likely to want to view and adjust or filter the user experience to account for this

Predict the types of widgets an individual user is likely to interact with more

Predict the types of widgets an individual user is likely to interact with more (e.g games) and tailor a more custom experience.

Actual use though...

Will any of this be easy??

YUUP,

EASY PeaSY!!

Practical? Maybe...

Mostly because of the browsers not the ML

Back to Ml5.js

Train your own model

IN the browser

Another web page is all

All the capture and training right here

// inside function setup()

const featureExtractor = ml5.featureExtractor('MobileNet', modelReady);
const classifier = featureExtractor.classification(video, videoReady);

Change to a feature Extractor

classifier.addImage('myImageLabel');

Add an Image

classifier.train(function(lossValue) {
     if (lossValue) {
       loss = lossValue;
       // show loss
       select('#loss').html('Loss: ' + loss);
     } else {
       // show when finished
       select('#loss').html('Done Training! Final Loss: ' + loss);
     }

Train

I trained on 3 objects in this room

Your phone should now Identify them

https://eugweb.dev/mlfind

First to tell me the 3 objects gets an IDX hat!

What about "Real Machine" learning???

tenserflow!!!

ok, well this was supposed to be under 1h.. so meet again at the python meetup??

Thank you!

slides, links, etc.. on Eugene Web Devs github