Convert Figma logo to code with AI

ml5js logoml5-library

Friendly machine learning for the web! 🤖

6,564
909
6,564
288

Top Related Projects

18,913

A WebGL accelerated JavaScript library for training and deploying ML models.

Example code snippets and machine learning code for Teachable Machine

22,842

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.

36,310

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

  1. 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);
});
  1. 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!');
}
  1. 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

  1. Include the ml5.js library in your HTML file:
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
  1. 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);
  }
}
  1. Run your HTML file in a web server to start using ml5.js!

Competitor Comparisons

18,913

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.

22,842

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.

36,310

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Read our ml5.js Code of Conduct and software licence here!

ml5

All Contributors BrowserStack Status Version Twitter Follow

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):


Daniel Shiffman

💻 💡 📆 👀 ⚠️ 📹

Cristóbal Valenzuela

💻 💡 👀 🔧 ⚠️

Yining Shi

💻 💡 👀 🔧 ⚠️ 🐛

Hannah Davis

💻 💡

Joey Lee

💻 💡 👀 🖋 ⚠️

AshleyJaneLewis

📝 🎨 📋 🖋

Ellen Nickles

📝 🖋 🤔 ✅

Itay Niv

💻 💡

Nikita Huggins

📝 🖋 🤔

Arnab Chakravarty

🖋 📓

Aidan Nelson

💻 💡

WenheLI

💻 💡 🚧 🤔

Darius Kazemi

🤔 💬

Dingsu Wang

💻 💡

garym140

🖋 📝 🤔 📓

Gene Kogan

💻 💡 🤔

Hayley Hwang

💻 💡 🤔

Lisa Jamhoury

💡 🤔

Alejandro Matamala Ortiz

🎨 🖋 📝

Maya Man

💻 💡

Mimi Onuoha

🤔 🖋 👀

Yuuno, Hibiki

💻 💡 🚧

Dan Oved

💻 💡 💬 🤔

Stephanie Koltun

💻 💡 🖋 📝 🎨

YG Zhang

💻 💡 🤔

Wenqi Li

💻 💡 🚇

Brent Bailey

⚠️ 💻 💡

Jonarod

💻

Jasmine Otto

💻 ⚠️ 💡

Zaid Alyafeai

💻 💡 🤔 💬

Jacob Foster

💻 💡 ⚠️

Memo Akten

💻 💡

Mohamed Amine

💻 💡 🤔 ⚠️

Oliver Wright

💻 ⚠️

Marshal Hayes

📖

Reiichiro Nakano

💻 ⚠️ 💡

Nikhil Thorat

💻 💡 🤔 🚇

Irene Alvarado

💻 💡 🚧 🤔

Andrew Lee

💻 💡 🤔

Jerhone

📖

achimkoh

💻 💡 ⚠️

Jim

💡 📖 🖋

Junya Ishihara

🚧 💻

Naoto HIÉDA

🚧

aarón montoya-moraga

🚧 💡

b2renger

💻 🚇

Aditya Sharma

🚧

okuna291

🤔

Jenna

🤔

nicoleflloyd

🖋 🎨 📓

jepster-dk

💻 🤔

Xander Jake de los Santos

🤔

Cassie Tarakajian

🐛 🚇 🤔

Dave Briccetti

🐛

Sblob1

🐛

Jared Wilber

💡 🤔 💻

danilo

💻 🤔

Emma Goodliffe

🤔 💬 🚧

Yang

💻 🐛

Lydia Jessup

💻 🤔 💡

CJ R.

📖 🖋

Fabio Corona

🐛

Tobias Nickel

🐛 💻

Michael Salaverry

🖋 🐛

Rob

🐛 💬

Pujaa Rajan

💡 🐛

Nick McIntyre

⚠️ 🐛

Andy Baio

🖋 🚧

Wenqi Li

🖋 💻 🚇 🚧 🤔

garym140

🎨

Jim

🖋 🚧 🤔

Yeswanth

🚧 🐛

Pettrus Sherlock

🐛 🚧

danilo

🖋

Andreas Refsgaard

🖋

Brian Jordan

🖋

bradley inniss

🖋

Kaushlendra Pratap

🖋

maxdevjs

🖋

josher19

🖋 🐛

Frederik De Bleser

🖋

Violet

🐛

Tirta Wening Rachman

💻 🖋 🤔

Miká Kruschel

💻 🐛

Takanobu Asanuma

🖋

Martin L. Jensen

🖋

Hugo Romano

🖋

Darshan Sen

🖋

Ludwig Stumpp

👀 🐛 💡

Bomani Oseni McClendon

🖋 💻

Jang Haemin

🖋

Anton Filatov

🖋

Elijah Lucian

📖

Tam

🖋

RGV

💬

hansvana

🖋

Ali Karpuzoglu

🐛 🚧

Jacob Wysko

🖋

Dilwoar Hussain

📖

Manaswini Das

📖

Benjamin Botwin

👀 💬 🤔

Henrique Mota

👀 💬 🤔

CaseyPan

💻 🤔

Sam Tarakajian

💻 🐛 🚧 🤔

Michael Bell

📖 🐛 🚧

machenmusik

💡

Pranav Dudhane

📖

Tündi Szász

🎨 🤔

hellonun

🤔 📓

Pierre Grimaud

📖 🖋

Greg French

🐛

Dale Markowitz

💻 🤔

Ragland Asir

📖

Tom-Lucas Säger

📖

altruios

📖

mennosc

💻

neta

💻 📖

Koji

💻 📖

josephrocca

💻 📖

Lauren Lee McCarthy

💻 📖

Sorin Curescu

💻

mofanke

🐛 💻

Ikko Ashimine

📖

Mudasar-Makandar

🐛 💻

Amir Feqhi

💻

DasK

💻 🤔

Amir

💻 💡

lindapaiste

💻 🤔 🐛

Evan Weinberg

📖

Coder Gautam

📖

Yong-Yuan Chen

📖

adrianfiedler

📖 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

NPM DownloadsLast 30 Days