Getting Started

Getting Started

Take a ride on the Coding Train to watch Dan Shiffman's "A Beginner's Guide to Machine Learning with ml5.js". Here Dan explains what ml5.js is and where it all comes from.


ml5.js is machine learning for the web in your web browser. Through some clever and exciting advancements, the folks building TensorFlow.js figured out that it is possible to use the web browser's built in graphics processing unit (GPU) to do calculations that would otherwise run very slowly using central processing unit (CPU) based calculations. A really nice explantion of what is happening with GPUs can be found here - Why are shaders fast?. ml5 helps to make all these new developments in machine learning on the web more approachable for everyone.



Quickstart

The fastest way to get started exploring the creative possibilities of ml5.js are to either:

  1. Download a ml5.js project boilerplate. You can download a zip file here: ml5 project boilerplate.
    Or...
  2. Open this p5 web editor sketch with ml5.js added.

Quickstart Option 1 - without p5

Reference the latest version of ml5.js using a script tag in an HTML file as below:


In an index.html file, copy and paste the following and open up that file in your web browser. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Getting Started with ml5.js and p5.js</title>
    <script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js"></script>
  </head>

  <body>
    <script>
      // Your code will go here
      // open up your console - if everything loaded properly you should see 0.3.1
      console.log('ml5 version:', ml5.version);

    </script>
  </body>
</html>

That's all! 💥


Quickstart Option 2 - with p5.js

If you're familiar with p5.js, ml5.js has been designed to play very nicely with p5. You can use the following boilerplate code to get started:


In an index.html file, copy and paste the following and open up that file in your web browser. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Getting Started with ml5.js</title>
    <!-- p5 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
    <!-- ml5 -->
    <script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js"></script>
  </head>

  <body>
    <script>
      // Your code will go here
      // open up your console - if everything loaded properly you should see 0.3.1
      console.log('ml5 version:', ml5.version);


      function setup(){
        createCanvas(400, 400);

      }

      function draw(){
        background(200);

      }
    </script>
  </body>
</html>

That's all! 💥