Add simple non-P5 example to Getting Started page

[dariusk]

I replaced TODO in the docs with an actual image classification example. I wrote this based on the Simple Image Classification example, but I removed all dependencies except for ml5 itself and am using completely browser/lib agnostic DOM calls.

A user should be able to simply copy/paste this HTML file and open it in a browser and it will work, provided they're pointing it to ml5.js. It loads a public domain cat image cross-origin from Imgur. I'm open to pointing it to a different resource, this just seemed like the simplest way to make that happen.

Here is the application running:

Here is what it looks like in the rendered docs:

[cvalenzuela]

great, thanks!
Should we add a little description too? I like your recommendation on providing a small story to each example and since this is the first example most people will see, it might be helpful to describe what's going on. Kind of what three.js does in its getting started section

What do you think? I can help write it!

[dariusk]

Sounds good. I can give it a first pass attempt, and then you can check my work, especially since I'm not 100% clear on the technical specifics and terminology around ImageNet.

[cvalenzuela]

awesome!

[dariusk]

I added the following in 222de99:

Make a new index.html and paste in the below code. Make sure the first <script> tag is pointing to a copy of ml5.min.js. Open it in a web browser and after a couple seconds of computation you should see something like this:

[image of demo]

This demo needs only ML5 to run. When the HTML is parsed by the browser, it loads the <img> tag, at which point it gets an image from Imgur using a cross-origin request. When the image is loaded, onImageReady() is called, and it resizes the image to something small enough that it runs quickly, then asks ImageNet for its best prediction as to what the image is, along with its confidence level. Then it prints the result to the specified DOM elements.

[shiffman]

This is awesome, thank you @dariusk! Should we consider hosting ml5 in a CDN and pointing to that? This way index.html can run without even downloading the library. Also (see #27), but it reminds me about the question regarding whether ml5 should internally resize the image. There is pedagogical value probably in requiring the user to resize the image and understand how the learning model requires fixed size inputs. At the same time I can resist the code just looking like:

function onImageReady() {
  // Get the image element from the page
  let img = document.getElementById('image');

  // Get a prediction for that image 
  imagenet.predict(img, 10, gotResult);
}

[dariusk]

So would the idea be to provide a small image to begin with, or to make predict() internally resize the image?

[shiffman]

I was thinking having predict() internally resize the image?

[dariusk]

I would be okay with that only if predict() tested the size of the image and threw something like console.warn('Image has been internally resized to blah x blah'); in the case of an image that needs resizing.

[dariusk]

Maybe an aside, but this demo does not work offline because the KNN Classifier doesn't work offline. It relies on calls to to a Google API, which is fine, but maybe worth mentioning in the docs as it's not immediately evident from the design of the ML5 API (the function isn't askGoogleForClassification() or whatever) and it's also not something that I would expect a "hello world" to do.

[shiffman]

Merging! I think we can discuss at some point whether a different example is better suited for "Getting Started", but it's great to have this live on the page for now! We'll resolve the questions around image resizing in #27 and #75.