Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Tagged as

Go to top

JavaScript Machine Learning and Neural Networks with Encog

, 16 Oct 2012
Use Encog genetic algorithms, simulated annealing, neural networks and more with HTML5 Javascript.
heaton-javascript-ml.zip
encog-encog-javascript-6da0a8b
EncogJavascript.iml
EncogJavascript.ipr
README
encog.ipr
examples
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
Hello World
<div id="out"> </div>

<script src="../encog.js"></script>
<script src="../encog-widget.js"></script>

<style type="text/css"><!--
#example-holder
{
    border: 1px solid #000;
    padding:5px;
    background: #c0c0c0;
    width: 420px;
    height: 340px;
    position: relative;
}

#drawing-area
{
    border: 1px solid #000;
    background: white;
    width:300px;
    height:300px;
    position: absolute;
    display: inline;
    top:5px;
    left: 5px;
}

#downsampleView
{
    border: 1px solid #000;
    background: white;
    width: 110px;
    height: 120px;
    position: absolute;
    display: inline;
    top:5px;
    left:313px;
}

#lstLetters
{
    border: 1px solid #000;
    width:112px;
    height: 171px;
    position: absolute;
    display: inline;
    left: 313px;
    top: 137px;
}

#example-btn1
{
    border: 1px solid #000;
    position: absolute;
    display: inline;
    width: 416px;
    top:315px;
}

--></style><div id="example-holder">
    <div id="drawing-area"></div><select id="lstLetters" size="10"></select><div id="example-btn1"><input id="btnRecognize" type="button" value="Recognize" /><input id="btnTeach" type="button" value="Teach" /><input id="btnClear" type="button" value="Clear" /><input id="btnDownsample" type="button" value="Down Sample" /><input id="btnRemove" type="button" value="Remove" /></div>
    <p>	<div id="downsampleView"></div></p>
</div>
<script type="text/javascript">
<!--//--><![CDATA[// ><!--

"use strict";
if(window.addEventListener) {
    window.addEventListener('load', function () {

        var DOWNSAMPLE_WIDTH = 5;
        var DOWNSAMPLE_HEIGHT = 8;

        var lstLetters, downsampleArea;
        var charData = {};
        var drawingArea;
        var downSampleData = [];

        function init () {

            // Find the canvas element.
            drawingArea = ENCOG.GUI.Drawing.create('drawing-area',300,300);
            downsampleArea = ENCOG.GUI.CellGrid.create('downsampleView',DOWNSAMPLE_WIDTH,DOWNSAMPLE_HEIGHT,110,120);

            downsampleArea.outline = true;
            downsampleArea.mouseDown = function(x,y) {};

            downsampleArea.determineColor = function(row,col) {
                var index = (row*this.gridWidth)+col;
                if( downSampleData[index] < 0 )   {
                    return "white";
                }
                else {
                    return "black";
                }
            };

            lstLetters = document.getElementById('lstLetters');

            lstLetters.addEventListener('change', ev_selectList, true);

            var btnClear = document.getElementById('btnClear');
            var btnDownsample = document.getElementById('btnDownsample');
            var btnRecognize = document.getElementById('btnRecognize');
            var btnTeach = document.getElementById('btnTeach');
            var btnRemove = document.getElementById('btnRemove');

            btnClear.addEventListener('click', ev_clear, false);
            btnDownsample.addEventListener('click', ev_downSample, false);
            btnRecognize.addEventListener('click', ev_recognize, false);
            btnTeach.addEventListener('click', ev_teach, false);
            btnRemove.addEventListener('click', ev_remove, false);

            downSampleData = drawingArea.performDownSample();
            displaySample(downSampleData);
            preload();
        }

        /////////////////////////////////////////////////////////////////////////////
        // Event functions
        /////////////////////////////////////////////////////////////////////////////

        // Called when the "Teach" button is clicked.
        function ev_teach(ev)
        {
            var data = drawingArea.performDownSample();
            displaySample(data);

            if( data == null )
            {
                alert("You must draw something first.");
            }
            else
            {
                var charEntered = prompt("What did you just draw?", "");

                if( charEntered )
                {
                    if( charEntered in charData )
                    {
                        alert("That character is already defined.");
                    }
                    else if( charEntered.length!=1 )
                    {
                        alert("Please enter exactly one character.");
                    }
                    else
                    {
                        drawingArea.clear();
                        charData[charEntered] = data;
                        lstLetters.add(new Option(charEntered));
                        clearDownSample();
                    }
                }
            }
        }

        // Called when the "Remove" button is clicked.
        function ev_remove(ev)
        {
            for (var i = lstLetters.length - 1; i>=0; i--) {
                if (lstLetters.options[i].selected) {
                    lstLetters.remove(i);
                }
            }
            clearDownSample();
        }

        // Called when the "Downsample" button is clicked
        function ev_downSample(ev)
        {
            downSampleData = drawingArea.performDownSample();
            displaySample();
        }

        // Called when the "Clear" button is clicked
        function ev_clear(ev)
        {
            drawingArea.clear();
            clearDownSample();
        }

        // Called when the selected letter changes
        function ev_selectList (ev)
        {
            var c = lstLetters.options[lstLetters.selectedIndex].text;
            downSampleData = charData[c];
            displaySample();
        }

        // Called when the "Recognize" button is clicked
        function ev_recognize (ev)
        {
            downSampleData = drawingArea.performDownSample();
            displaySample();
            if( lstLetters.length<1 )
            {
                alert("Please teach me something first.");
            }
            else if( downSampleData == null )
            {
                alert("You must draw something to recognize.");
            }
            else
            {
                var bestChar = '??';
                var bestScore = 0;

                for(var c in charData )
                {
                    var data = charData[c];

// Now we will actually recognize the letter drawn.
// To do this, we will use a Euclidean distance
// http://www.heatonresearch.com/wiki/Euclidean_Distance

                    var sum = 0;
                    for(var i = 0; i<data.length; i++ )
                    {
                        var delta = data[i] - downSampleData[i];
                        sum = sum + (delta*delta);
                    }

                    sum = Math.sqrt(sum);

// Basically we are calculating the Euclidean distance between
// what was just drawn, and each of the samples we taught
// the program.  The smallest Euclidean distance is the char.

                    if( sum<bestScore || bestChar=='??' )
                    {
                        bestScore = sum;
                        bestChar = c;
                    }

                }

                alert('I believe you typed: ' + bestChar );
            }

            drawingArea.clear();
            clearDownSample();
        }

        function clearDownSample() {
            downSampleData = ENCOG.ArrayUtil.allocate1D(DOWNSAMPLE_WIDTH*DOWNSAMPLE_HEIGHT);
            ENCOG.ArrayUtil.fillArray(downSampleData,0,downSampleData.length,-1);
            displaySample();
        }

        // Preload the digits, so that the user can quickly do some OCR if desired.
        function preload()
        {
            defineChar("0", new Array( -1,1,1,1,-1,1,1,-1,1,1,1,-1,-1,-1,1,1,-1,-1,-1,1,1,-1,-1,-1,1,1,-1,-1,-1,1,1,1,-1,-1,1,-1,1,1,1,-1 ) );
            defineChar("1", new Array( 1,1,1,-1,-1,1,1,1,-1,-1,1,1,1,-1,-1,1,1,1,1,-1,-1,1,1,1,1,-1,-1,-1,1,1,-1,-1,-1,1,1,-1,1,1,1,1) );
            defineChar("2", new Array(1,1,1,-1,-1,-1,-1,1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,1,1,1,1,-1,1,-1,1,1,-1,1,1,1,1,1) );
            defineChar("3", new Array(1,1,1,1,-1,-1,-1,-1,1,1,-1,-1,-1,1,1,-1,-1,1,1,-1,-1,1,1,1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,1,1,1,1,1) );
            defineChar("4", new Array(1,-1,-1,1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,1,1,1,1,1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,-1) );
            defineChar("5", new Array(1,1,1,1,1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,1,1,1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,1,1,1,1,1) );
            defineChar("6", new Array(-1,1,1,1,-1,1,1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,1,1,-1,1,1,1,1,1,1,1,-1,-1,1,1,1,-1,-1,1,-1,1,1,1,1) );
            defineChar("7", new Array(1,1,1,1,1,-1,-1,-1,1,1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,1,1,-1,-1,-1,1,-1,-1,-1,1,1,-1,-1,-1,1,-1,-1,-1) );
            defineChar("8", new Array(1,1,1,1,1,1,-1,-1,-1,1,1,-1,-1,-1,1,1,1,1,1,1,-1,1,1,1,1,1,1,-1,-1,1,1,-1,-1,-1,1,1,1,1,1,1) );
            defineChar("9", new Array(1,1,1,1,1,1,1,-1,-1,1,1,-1,-1,-1,1,1,1,1,1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,-1,1) );
        }

        // Define a character, add it to the list and to the map.
        function defineChar(charEntered,data)
        {
            charData[charEntered] = data;
            lstLetters.add(new Option(charEntered));
        }

        // Display downsampled data to the grid.
        function displaySample()
        {
            downsampleArea.render();
        }

        // cause the init function to be called.
        init();

    }, false); }

//--><!]]>
</script>

</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0

Share

About the Author

JeffHeaton
Architect
United States United States
Jeff Heaton is a data scientist, PhD student and indy publisher. Jeff works primarily in the programming languages Python, R, C#, Java and C/C++. He is an active technology blogger, open source contributor, and author of more than ten books. His areas of expertise include Data Science, Predictive Modeling, Data Mining, Big Data, Business Intelligence and Artificial Intelligence. He is the lead developer for the Encog Machine Learning Framework open source project. Jeff holds a Masters Degree in Information Management from Washington University, is a Senior Member of the IEEE, a Sun Certified Java Programmer and a Fellow of the Life Management Institute.
Follow on   Twitter   Google+   LinkedIn

| Advertise | Privacy | Mobile
Web03 | 2.8.140926.1 | Last Updated 16 Oct 2012
Article Copyright 2012 by JeffHeaton
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid