Top Related Projects
A WebGL accelerated JavaScript library for training and deploying ML models.
Example code snippets and machine learning code for Teachable Machine
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
Detectron2 is a platform for object detection, segmentation and other visual recognition tasks.
A toolkit for developing and comparing reinforcement learning algorithms.
Automated CI toolchain to produce precompiled opencv-python, opencv-python-headless, opencv-contrib-python and opencv-contrib-python-headless packages.
Quick Overview
ml5.js is a user-friendly machine learning library for the web, built on top of TensorFlow.js. It aims to make machine learning accessible to a broad audience of artists, creative coders, and students, providing easy-to-use APIs for various ML tasks.
Pros
- Easy to use, with a simple and intuitive API
- Runs in the browser, making it accessible for web-based projects
- Supports a wide range of ML tasks, including image classification, pose estimation, and sound classification
- Extensive documentation and examples for beginners
Cons
- Limited customization options compared to more advanced libraries
- Performance may be slower than native TensorFlow.js for complex tasks
- Fewer pre-trained models available compared to larger ML frameworks
- May not be suitable for large-scale or production-level ML applications
Code Examples
- Image Classification:
// Load the MobileNet model and classify an image
const classifier = ml5.imageClassifier('MobileNet', modelLoaded);
function modelLoaded() {
console.log('Model Loaded!');
}
classifier.classify(document.getElementById('image'), (error, results) => {
console.log(results);
});
- Pose Estimation:
// Load the PoseNet model and estimate poses in real-time
const video = document.getElementById('video');
const poseNet = ml5.poseNet(video, modelLoaded);
poseNet.on('pose', (results) => {
poses = results;
});
function modelLoaded() {
console.log('PoseNet Model Loaded!');
}
- Sound Classification:
// Load the SoundClassifier model and classify audio input
const classifier = ml5.soundClassifier('SpeechCommands18w', options, modelLoaded);
function modelLoaded() {
console.log('Model Loaded!');
classifier.classify(gotResult);
}
function gotResult(error, results) {
if (error) {
console.error(error);
return;
}
console.log(results);
}
Getting Started
- Include the ml5.js library in your HTML file:
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
- Create a simple image classification example:
// Load the MobileNet model
const classifier = ml5.imageClassifier('MobileNet', modelLoaded);
function modelLoaded() {
console.log('Model Loaded!');
// Classify an image
classifier.classify(document.getElementById('image'), gotResult);
}
function gotResult(error, results) {
if (error) {
console.error(error);
} else {
console.log(results);
}
}
- Run your HTML file in a web server to start using ml5.js!
Competitor Comparisons
A WebGL accelerated JavaScript library for training and deploying ML models.
Pros of TensorFlow.js
- More comprehensive and flexible, offering lower-level control
- Supports a wider range of machine learning models and operations
- Better performance for complex computations and large-scale projects
Cons of TensorFlow.js
- Steeper learning curve, especially for beginners
- Requires more code and setup for basic tasks
- Less abstraction, which can lead to more complex implementations
Code Comparison
ml5.js:
let classifier;
function setup() {
classifier = ml5.imageClassifier('MobileNet', modelLoaded);
}
function modelLoaded() {
console.log('Model Loaded!');
}
TensorFlow.js:
async function loadModel() {
const model = await tf.loadLayersModel('https://tfhub.dev/google/imagenet/mobilenet_v2_100_224/classification/2');
console.log('Model Loaded!');
return model;
}
const model = loadModel();
ml5.js provides a more straightforward API for common tasks, while TensorFlow.js offers more granular control but requires more setup. ml5.js is built on top of TensorFlow.js, abstracting away complexity for easier use in creative coding and educational contexts. TensorFlow.js is better suited for more advanced machine learning projects and custom model implementations.
Example code snippets and machine learning code for Teachable Machine
Pros of Teachable Machine
- User-friendly interface for training machine learning models without coding
- Seamless integration with Google's ecosystem and services
- Supports a wide range of input types (images, audio, poses)
Cons of Teachable Machine
- Limited customization options compared to ml5.js
- Dependency on Google's platform and potential privacy concerns
- Less flexibility for advanced users who want more control over the model architecture
Code Comparison
ml5.js:
let classifier;
function setup() {
classifier = ml5.imageClassifier('MobileNet', modelLoaded);
}
function modelLoaded() {
console.log('Model Loaded!');
}
Teachable Machine:
// No direct code comparison available as Teachable Machine
// primarily uses a web interface for model creation and training.
// The generated model can be exported and used in various formats.
ml5.js offers a more code-centric approach, allowing developers to integrate machine learning directly into their JavaScript projects. Teachable Machine, on the other hand, provides a no-code solution for creating and training models, which can then be exported and used in different environments.
Both libraries aim to make machine learning more accessible, but they cater to different user groups. ml5.js is better suited for developers who want to incorporate ML into their code, while Teachable Machine is ideal for non-programmers or those looking for a quick and easy way to create custom models.
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
Pros of p5.js
- Broader scope for creative coding, including graphics, animation, and interactive applications
- Larger community and more extensive documentation
- Easier integration with HTML5 canvas and DOM manipulation
Cons of p5.js
- Steeper learning curve for beginners in programming
- Less focused on machine learning and AI applications
- Potentially slower performance for complex computations compared to specialized libraries
Code Comparison
p5.js:
function setup() {
createCanvas(400, 400);
}
function draw() {
ellipse(mouseX, mouseY, 50, 50);
}
ml5.js:
let classifier;
function setup() {
classifier = ml5.imageClassifier('MobileNet', modelLoaded);
}
function modelLoaded() {
console.log('Model Loaded!');
}
Summary
p5.js is a versatile creative coding library with a broad scope, while ml5.js focuses specifically on machine learning for the web. p5.js offers more general-purpose features for visual and interactive applications, whereas ml5.js provides easy-to-use machine learning tools. The choice between the two depends on the project requirements and the developer's focus on either creative coding or machine learning applications.
Detectron2 is a platform for object detection, segmentation and other visual recognition tasks.
Pros of Detectron2
- More powerful and flexible for advanced computer vision tasks
- Supports a wider range of state-of-the-art models and algorithms
- Better performance and scalability for large-scale projects
Cons of Detectron2
- Steeper learning curve and more complex setup
- Requires more computational resources
- Less suitable for beginners or quick prototyping
Code Comparison
ml5-library:
// Object detection using YOLO
let detector;
function setup() {
detector = ml5.objectDetector('yolo', modelLoaded);
}
Detectron2:
# Object detection using Faster R-CNN
from detectron2.engine import DefaultPredictor
from detectron2.config import get_cfg
cfg = get_cfg()
cfg.merge_from_file("path/to/config.yaml")
predictor = DefaultPredictor(cfg)
ml5-library is designed for simplicity and ease of use, making it accessible for beginners and web-based projects. It offers a high-level API that abstracts away much of the complexity of machine learning algorithms.
Detectron2, on the other hand, provides a more comprehensive and powerful toolkit for computer vision tasks. It offers greater flexibility and control over model architectures and training processes, making it suitable for advanced research and production-level applications.
A toolkit for developing and comparing reinforcement learning algorithms.
Pros of gym
- Comprehensive suite of reinforcement learning environments
- Widely adopted in the AI research community
- Supports various algorithms and frameworks
Cons of gym
- Steeper learning curve for beginners
- Primarily focused on reinforcement learning tasks
- Requires more setup and dependencies
Code Comparison
ml5-library:
let classifier;
function setup() {
classifier = ml5.imageClassifier('MobileNet', modelLoaded);
}
function modelLoaded() {
console.log('Model Loaded!');
}
gym:
import gym
env = gym.make('CartPole-v1')
observation = env.reset()
for _ in range(1000):
env.render()
action = env.action_space.sample()
observation, reward, done, info = env.step(action)
ml5-library is designed for easy integration of machine learning into web applications, while gym focuses on providing environments for reinforcement learning tasks. ml5-library offers a more accessible approach for beginners, especially those familiar with JavaScript and web development. On the other hand, gym provides a broader range of complex environments and is better suited for advanced AI research and experimentation.
Automated CI toolchain to produce precompiled opencv-python, opencv-python-headless, opencv-contrib-python and opencv-contrib-python-headless packages.
Pros of opencv-python
- More comprehensive and powerful computer vision library
- Better performance for complex image processing tasks
- Wider range of algorithms and functions available
Cons of opencv-python
- Steeper learning curve and more complex API
- Requires more setup and configuration
- Less beginner-friendly compared to ml5-library
Code Comparison
ml5-library (JavaScript):
let video;
let poseNet;
let poses = [];
function setup() {
createCanvas(640, 480);
video = createCapture(VIDEO);
video.size(width, height);
poseNet = ml5.poseNet(video, modelReady);
poseNet.on('pose', gotPoses);
video.hide();
}
opencv-python (Python):
import cv2
cap = cv2.VideoCapture(0)
face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
while True:
ret, frame = cap.read()
gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
faces = face_cascade.detectMultiScale(gray, 1.3, 5)
Both libraries offer computer vision capabilities, but opencv-python provides more advanced features and better performance for complex tasks. ml5-library is more accessible for beginners and web-based projects, while opencv-python is better suited for professional and high-performance applications.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Read our ml5.js Code of Conduct and software licence here!
This project is currently in development.
Friendly machine learning for the web!
ml5.js aims to make 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.
The library is supported by code examples, tutorials, and sample data sets with an emphasis on ethical computing. Bias in data, stereotypical harms, and responsible crowdsourcing are part of the documentation around data collection and usage.
ml5.js is heavily inspired by Processing and p5.js.
Please read our Code of Conduct, which establishes our commitment to make ml5.js a friendly and welcoming environment.
Usage
Before getting started with ml5.js, review our Code of Conduct. There are several ways you can use the ml5.js library:
- You can use the latest version (0.12.2) by adding it to the head section of your HTML document:
v0.12.2
<script src="https://unpkg.com/ml5@0.12.2/dist/ml5.min.js" type="text/javascript"></script>
- If you need to use an earlier version for any reason, you can change the version number. The previous versions of ml5 can be found here. You can use those previous versions by replacing
<version>
with the ml5 version of interest:
<script src="https://unpkg.com/ml5@<version>/dist/ml5.min.js" type="text/javascript"></script>
For example:
<script src="https://unpkg.com/ml5@0.6.1/dist/ml5.min.js" type="text/javascript"></script>
- You can also reference "latest", but we do not recommend this as your code may break as we update ml5.
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
Resources
Standalone Examples
You can find a collection of standalone examples in this repository within the examples/
directory. You can also test working hosted of the examples online on the ml5.js examples index website.
These examples are meant to serve as an introduction to the library and machine learning concepts.
Code of Conduct
We believe in a friendly internet and community as much as we do in building friendly machine learning for the web. Please refer to our Code of Conduct for our rules for interacting with ml5 as a developer, contributor, or as a person using the library.
Contributing
Want to be a contributor ð to the ml5.js library? If yes and you're interested to submit new features, fix bugs, or help develop the ml5.js ecosystem, please go to our CONTRIBUTING documentation to get started.
See CONTRIBUTING ð
Acknowledgements
ml5.js is supported by the time and dedication of open source developers from all over the world. Funding and support is generously provided by a Google Education grant at NYU's ITP/IMA program.
Many thanks BrowserStack for providing testing support.
Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
Top Related Projects
A WebGL accelerated JavaScript library for training and deploying ML models.
Example code snippets and machine learning code for Teachable Machine
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
Detectron2 is a platform for object detection, segmentation and other visual recognition tasks.
A toolkit for developing and comparing reinforcement learning algorithms.
Automated CI toolchain to produce precompiled opencv-python, opencv-python-headless, opencv-contrib-python and opencv-contrib-python-headless packages.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot