cでnn その３

概要

cでnnやってみた。
cで学習して、webで実行を実現してるようだ。

ライブラリー

写真

サンプルコード

var cat;
alert(config);
alert(w1);
alert(w2);
function Main() {
    cat = new CatsEye(config[0], config[1], config[2], w1, w2);
    this.input = document.getElementById('input');
    this.canvas = document.getElementById('sketch');
    this.canvas.width  = 225;
    this.canvas.height = 225;
    this.ctx = this.canvas.getContext('2d');
    this.canvas.addEventListener('mousedown', this.onMouseDown.bind(this));
    this.canvas.addEventListener('mouseup', this.onMouseUp.bind(this));
    this.canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
    this.canvas.addEventListener('touchstart', this.onMouseDown.bind(this));
    this.canvas.addEventListener('touchend', this.onMouseUp.bind(this));
    this.canvas.addEventListener('touchmove', this.onMouseMove.bind(this));
    this.initialize();
};
Main.prototype = {
    initialize: function() {
        this.ctx.fillStyle = '#FFFFFF';
        this.ctx.fillRect(0, 0, 225, 225);
        this.ctx.lineWidth = 1;
        this.ctx.strokeRect(0, 0, 225, 225);
        this.ctx.lineWidth = 0.05;
        for (var i = 0; i < 27; i++) 
        {
            this.ctx.beginPath();
            this.ctx.moveTo((i + 1) * 8, 0);
            this.ctx.lineTo((i + 1) * 8, 225);
            this.ctx.closePath();
            this.ctx.stroke();
            this.ctx.beginPath();
            this.ctx.moveTo(0, (i + 1) * 8);
            this.ctx.lineTo(225, (i + 1) * 8);
            this.ctx.closePath();
            this.ctx.stroke();
        }
        this.drawInput();
        $('#output td').text('').removeClass('success');
    },
    onMouseDown: function(e) {
        this.canvas.style.cursor = 'default';
        this.drawing = true;
        this.prev = this.getPosition(e);
    },
    onMouseUp: function() {
        this.drawing = false;
        this.drawInput();
    },
    onMouseMove: function(e) {
        if (this.drawing)
        {
            var curr = this.getPosition(e);
            this.ctx.lineWidth = 16;
            this.ctx.lineCap = 'round';
            this.ctx.beginPath();
            this.ctx.moveTo(this.prev.x, this.prev.y);
            this.ctx.lineTo(curr.x, curr.y);
            this.ctx.stroke();
            this.ctx.closePath();
            this.prev = curr;
        }
    },
    getPosition: function(e) {
        var rect = this.canvas.getBoundingClientRect();
    	if (e.changedTouches) e = e.changedTouches[0];
        return {
            x: e.clientX - rect.left,
            y: e.clientY - rect.top
        };
    },
    drawInput: function() {
        var ctx = this.input.getContext('2d');
        var img = new Image();
        img.onload = function() {
            var inputs = [];
            var small = document.createElement('canvas').getContext('2d');
            small.drawImage(img, 0, 0, img.width, img.height, 0, 0, 28, 28);
            var data = small.getImageData(0, 0, 28, 28).data;
            for (var i = 0; i < 28; i++)
            {
                for (var j = 0; j < 28; j++)
                {
                    var n = 4 * (i * 28 + j);
                    inputs[i * 28 + j] = (data[n + 0] + data[n + 1] + data[n + 2]) / 3;
                    ctx.fillStyle = 'rgb(' + [data[n + 0], data[n + 1], data[n + 2]].join(',') + ')';
                    ctx.fillRect(j * 5, i * 5, 5, 5);
                }
            }
            if (Math.min.apply(null, inputs) === 255) return;
            for (i = 0; i < 28 * 28; i++) inputs[i] = 255 - inputs[i];
            for (i = 0; i < 28 * 28; i++) inputs[i] /= 255;
            a = cat.predict(inputs);
            for (i = 0; i < 10; i++) 
            {
                $('#output tr').eq(i + 1).find('td').eq(0).text(cat.o3[i].toFixed(2));
                if (a === i)
                {
                    $('#output tr').eq(i + 1).find('td').eq(0).addClass('success');
                }
                else 
                {
                    $('#output tr').eq(i + 1).find('td').eq(0).removeClass('success');
                }
            }
        };
        img.src = this.canvas.toDataURL();
    }
}
$(document).ready(function() {
    document.body.addEventListener('touchmove', function (event) {
        event.preventDefault();
    }, false);
    var main = new Main();
    $('#clear').click(function() {
        main.initialize();
    });
});

jsdoで実行

以上。