Character recognition exercise

Clone and edit the world
First, look at the data set. Data is loaded into the "mnist" object. View console to explore this object. Regular array-like structure.
Examine the code to see how one entry of the array (an array of pixels) is transformed into an image to display in different sizes on the canvas.

Change the learning

Turn learning off / slow learning down:
- It is hard to see, because it happens so fast, but the network starts random with random predictions, but after only a few hundred exemplars it gets pretty good.
- To see that the network starts random, change "do_training" to false. However this will not do any testing of the training, so we cannot see how good it is. You need to edit that section to leave the testing in (but no training).
- Alternatively, set TRAINPERSTEP to zero.
- If we do no training, the Network stays random. Results are random. (Meaning what?)
- Or you can let it learn but slow it down with TRAINPERSTEP = 1, TESTPERSTEP = 50. Then it learns slower, and you can see it improve.
See what happens when you:
- Reduce hidden nodes to 5.
- Reduce hidden nodes to 1.
- Increase hidden nodes to 200.
- Why?
See what happens when you:
- Change randomWeight to return zero.
- Change randomWeight to return constant.
- Why?

Consider the output vector.
- The find12 function is used to classify Doodles.
- Edit find12 to console.log the output vector.
- Consider the output vector as a measure of "confidence" in each digit.
Output to the page:
- Scrolling output in the console is hard to read. You can scroll up to pause it and read it. Clear the console to resume.
- Better to output to the page, so numbers are in the same spot.
- AB.msg writes to pre-defined spots on the page (numbered 1 to 50).
- See AB.msg in guessDoodle(). It writes the guess to a certain spot on the page. Append your extra data to what it writes to that spot.
- Write a function to convert your array to a readable string, showing limited number of decimal places, like:
```
 0.91 0.03 0.15 .. 0.14 
```
- Use fixed font, not variable font, so numbers are all in the exact same place.

Make the run header wider:

 
AB.headerCSS ( { "width":     "60vw" } );
AB.headerCSS ( { "max-width": "60vw" } );

When we are training, we tell it the correct output is one "1" and the rest 0:

  let targets = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  targets[label] = 1;       // change one output location to 1, the rest stay at 0

Could we try another input scheme?
Here is an idea:

2 input nodes per pixel.
One node for 0-127 and another node for 128-255
So "70" has 70/128 (or some other scheme) in 1st input node, and 0 in 2nd input node.
And "178" has 0 in 1st input node, and 50/128 (or some other scheme) in 2nd input node.
More weights per pixel. Weights can change independently.
Would not be hard to set up. Just a few lines of code when setting up the inputs.
Will this help? I do not know.

To try to improve doodle recognition, I made a change to make the doodle more like the MNIST images.

In the original Coding Train code, the doodle produces sharp images with no blurry edges. This leads to neural network input nodes which are all either 0 or 1, with no values in between.
But in the MNIST data, pixels are shades of grey and the neural network inputs end up with real numbers ranging from 0 to 1.
Perhaps we need to make the doodles more like the MNIST images.
The change I made is to "blur" the edges of the doodle using filter(BLUR)
To see how this changes the input nodes, I added a debug function so you can see in the console the exact input nodes for the doodle and for a demo image. Type this in the console:
```
 showInputs(demo_inputs);
 showInputs(doodle_inputs);
```
You will see that the input nodes are now very similar.