shiffman / tensorflow-js-examples

Working on some new examples with tensorflow.js and p5.js

TensorFlow.js Examples

XOR vanilla neural network

Doodle Classifier

This repo is experimental and in progress. It is an "MNIST"-style classification example using the Google QuickDraw dataset, p5js, and tensorflow.js. It is loosely based on the tfjs MNIST example.

Reference

• JS Doodle Classifier video tutorials
• ml4a ofx Doodle Classifier

RoadMap

• Simplify model removing convolutional layers. The idea is for this to be a dropdead simple example that I can use to explain tensorflow.js and the layers API. I'd like to cover convolutional neural networks as a secondary example.
• Incorporate testing data. At the moment no any validation / testing data is included during training. For clarity of the example I might like to run the testing as a separate function. What do the results mean me if I give it null data?
• Guess user drawings in real-time.
• Train with a much larger dataset.
• Save model using local storage or to JSON file.
• Bring the idea of a higher level Classifier class that wraps keras layers into ml5.

Neuro-Evolution

• Flappy Bird Demo: Learning
• Flappy Bird Demo: Loading Saved Model
• Steering Ecosystem Simulation Demo

tensorflow-js-examples's Issues

Question

Hi Daniel,

Thanks for all the great and fun content you produce! I really appreciate and learn a lot from it every time!

I had a question with regards to the neuro-flappy bird example. And I hope you'll have the minute to reflect on this.

I'm trying to understand how the model actually fits/trains. It's not clear to me to what extent does the learning actually happen and when. I'm reading up on Reinforcement Learning and if I somewhat understand the learning process there I'm a bit confused here.

Does the frame by frame 'situation' matter to the ML model in this case, since the mutation only happens when the bird hits the wall? It seems that memory of past frames is not something that's taken into consideration. Or is it?

I'm guessing that the model here needs to see all (as much as possible) situations with regards to inputs to then be able to predict reliably it's actions. If the model has seen hole positions from top to bottom and it's own positions/velocities with relation to them it'll do well in those situations. But if any of the parameters would change e.g. canvas height - the model would have to be re-trained.

So again if you could reflect on how the ML part + GA in this example is actually working, with comparison to a more 'standard' ML approach with let's say a gradient descent or even Reinforcement Learning, I'd really appreciate it! Since I'm trying to understand why this works so quick and well and where the corners are cut comparing to the 'common' ML approaches.

Thanks again!

Not enough "grey-ish" data (Colour Classifier)

I saw from the crowd sourcing website that grey was very uncommon and when downloading this and running it, the NN is really struggling with correctly classifying greys (i.e. ones where roughly R=G=B).

As a fix to this, maybe it would be possible to manually inject the dataset with grey datapoints following an algorithm (pseudocode) along the lines of:

let n = rand()%255;
let RGB = colour(n,n,n);
//send to server as "grey-ish"
//loop as many times as necessary

or alternatively adding a little bit of randomness:

let n = rand()%255;
let m = 3; 
//m is some small number of how large of a variation one would want. I suspect 3 or less is good

let r = n + rand()%m
let g = n + rand()%m
let b = n + rand()%m

let RGB = colour(r,g,b);
//send to server as "grey-ish"
//loop as many times as necessary

where rand() is some function that gives a random integer

Doodle Classifier loss is damn high

In your doodle classification example using cnn the loss is very high and in each iteration it is not reducing.
I made some changes in the model like changed optimizer to "rmsprop" and loss metric as "MeanSquaredError", then the model is performing good with 95.5% accuracy

Neuro-Evolution with TensorFlow.js!

I'm working on a port of my Neuro-Evolution Flappy Bird example to use TensorFlow.js. The non tf.js version of this is explained in a 5 part video series that starts here. I'm hoping to revisit this with tf.js in a future video.

In the port, I'm using tf.layers to create the Neural Network and model.getWeights() and model.setWeights() to copy / mutate the model. However, I'm getting some strange behavior. @nsthorat @dsmilkov do you see a flaw in my methodology for copy/mutation?

• copy()
• mutate()

I may just build the model tf operations instead of tf.layers to dig into this a bit more.

fix memory link in neuro-evolution example!

xor training example

This example works!

https://shiffman.github.io/Tensorflow-JS-Examples/01_XOR/

I am planning to recreate my XOR Coding Challenge in a video tutorial with the layers API. @nsthorat @dsmilkov @cvalenzuela @yining1023 feel free to take a look at the code in case you have any feedback!

This example at the moment is written in a slightly strange way as I'm experimenting with ideas for wrapping the layers API into new classes for ml5: NeuralNetwork (likely not the same I will use) and Batch. When I make a tutorial I will just walk through the steps without breaking things out into separate classes. And then eventually I'll make an even simpler ml5 tutorial?

The things I'm not super sure about:

• use of tidy() vs. individual dispose()
• how to run training effectively in a loop while also having an animation loop i.e. p5's draw().
• learning rate considerations
• epochs per training cycle considerations
• using dataSync() vs data() (in conjunction with an animation loop).

This is obviously a totally trivial example -- The XOR problem is one that helps me think through and learn how this stuff works. . so hopefully it's useful?

avoiding dataSync() in neuro-evolution example

In the interest of getting the thing working, I just used dataSync() out of convenience. I should probably avoid it and run predict() asynchronously. This will be tricky to align with p5's draw() loop.

cannot load colorData.json

on opening index.html in chrome browser it fives an error saying "Fetch API cannot load colorData.json. URL scheme must be 'http' or 'https' for CORS request."