ml5.js: Friendly Machine Learning For The Web
ml5.js: Friendly Machine Learning For The Web
ml5.js: Friendly Machine Learning For The Web
Yining Shi
Adjunct professor at New York University
Software Engineer at RunwayML
1
Friendly Machine Learning for the Web
A neighborly approach to creating and exploring artificial
intelligence in the browser.
Developing ml5 is not just about developing machine learning software, it is about making machine learning
approachable for a broad audience of artists, creative coders, and students.
The library provides access to machine learning algorithms and models in the browser, building on top of
TensorFlow.js.
ml5js.org
2
What does ml5.js do?
1. Running pre-trained models
2. Creating and training neural networks
3
imageClassifier(‘MobileNet’)
ported by Cristobal Valenzuela
classifier.classify(video, gotResult);
4
PoseNet
ported by Cristobal Valenzuela, Maya Man, Dan Oved.
posenet.on('pose', function(results) {
poses = results;
});
function draw() {
if (poses.length > 0) {
circle(poses[0].nose.x, poses[0].nose.y);
}
}
5
Style Transfer
ported by Yining Shi
function modelReady() {
cubist.transfer(video, gotImage)
}
6
DIY Neural Network
Wrapped by Dan Shiffman, Joey Lee & Yining Shi
const options = {
dataUrl: 'data/colorData.json',
inputs: ['r', 'g', 'b'],
outputs: ['label'],
task: 'classification'
};
neuralNetwork.train(whileTraining, finishedTraining);
neuralNetwork.classify(data, gotResults);
7
image sound text helpers
imageClassifier CartoonGAN Pitch Detection CharRNN NeuralNetwork
ObjectDetector FaceApi SoundClassifier Word Vectorization FeatureExtractor
poseNet Facemesh Sentiment KNNClassifier
BodyPix Handpose UniversalSentence KMeans
UNET CVAE Encoder
YOLO DCGAN
StyleTransfer SketchRNN
Pix2Pix
9
Step 1: Call your ml5 function.
const myClassifier = await ml5.imageClassifier(‘MobileNet’);
11
Core
ml5-library ml5-examples
14
https://ml5js.org/community
Challenge 1: Native support for converting browser
I/O streams to model input/output data structures
● Accessibility + familiarity of web apps
● Ease of creation of interactive use cases
○ Better support for real-time interaction with webcam,
microphones as inputs and image, canvas, audio, text as
outputs
15
https://ml5js.org/community
Challenge 2: Standardization of model format
● Factors to determine whether pre-trained models can be ported
to ml5.js:
○ Small model size
○ Low-latency
○ Portable model format
● Workflow of porting:
1 2 3
16
Thank you!
https://ml5js.org
https://github.com/ml5js
Twitter @ml5js
17