11
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptで手書き数字の識別

Last updated at Posted at 2017-06-07

###はじめに
JavaScriptのディープラーニング ライブラリ 
ConvNetJS http://cs.stanford.edu/people/karpathy/convnetjs/
を使うと手書き数字 0 ~ 9 の識別ができるようです

###デモ
http://pie.karou.jp/zt.html

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>手書き数字認識 簡易版</title>
</head>
<body>
   <h1>手書き数字認識 簡易版</h1>
   <canvas id="pad" width="24" height="24"></canvas>
   <button onclick="checkFn()">識別</button>
   <p>黒色の小さな正方形にマウスで数字を書いて識別してください</p>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/convnetjs/0.3.0/convnet.js"></script>
   <script>
      var netObj = ;/* ← ここにJSONを入れてください*/

      var canvas = document.getElementById('pad');

      var signaturePad = new SignaturePad(canvas, {
         penColor: "white",
         backgroundColor: "black",
      });

      function checkFn() {
         var ctx = canvas.getContext('2d');
         var rgba = ctx.getImageData(0, 0, 24, 24);
         var net = new convnetjs.Net();
         net.fromJSON(netObj);
         var input = new convnetjs.Vol(24, 24, 1);
         for (var i = 0; i < rgba.data.length; i += 4) input.w[i / 4] = rgba.data[i] / 255;
         var output = net.forward(input);
         var max = 0;
         var index = 0;
         for (var i = 0; i < output.w.length; i++) {
            if (output.w[i] >= max) {
               index = i;
               max = output.w[i];
            }
         }
         alert(index);
         signaturePad.clear();
      }
   </script>
</body>
</html>

###使い方
上のHTMLをテキストエディタに貼り付け
”ConvNetJS MNIST demo”
http://cs.stanford.edu/people/karpathy/convnetjs/demo/mnist.html
のWEBページのJSONをvar netObjに代入してa.htmlで保存します。
ブラウザで開くと動作します

index.jpeg

手書き数字認識
http://pie.karou.jp/zs.html


###追記
10種類の画像も識別できるようです

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ConvNetJSで画像を分類 簡易版</title>
</head>
<body>
<h1>ConvNetJSで画像を分類 簡易版</h1>
<p>飛行機 自動車 鳥 猫 鹿 犬 蛙 馬 船の画像ファイルを選択してください</p>
<input type="file" id="myFile">
<br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/convnetjs/0.3.0/convnet.js"></script>
<script>
var netObj2 = ;/* ← ここにJSONを入れてください*/
document.getElementById('myFile').addEventListener('change', function(e) {
   var reader = new FileReader();
   reader.onload = function() {
      var img = new Image();
      img.onload = function() {
         var canvas = document.createElement('canvas');
         canvas.height = 32;
         canvas.width = 32;
         var ctx = canvas.getContext('2d');
         var wh = Math.max(img.width, img.height);
         var lx = Math.floor(img.width / 2 - wh / 2);
         var ly = Math.floor(img.height / 2 - wh / 2);
         ctx.drawImage(img, lx, ly, wh, wh, 0, 0, 32, 32);
         document.body.appendChild(canvas);
         var rgba = ctx.getImageData(0, 0, 32, 32);
         var net = new convnetjs.Net();
         net.fromJSON(netObj2);
         var input = new convnetjs.Vol(32, 32, 3, 0.0);
         var j = 0;
         for (var i = 0; i < rgba.data.length; i += 4) {
            input.w[j + 0] = rgba.data[i + 0] / 255 - 0.5;
            input.w[j + 1] = rgba.data[i + 1] / 255 - 0.5;
            input.w[j + 2] = rgba.data[i + 2] / 255 - 0.5;
            j += 3;
         }
         var output = net.forward(input);
         var max = 0;
         var index = 0;
         for (var i = 0; i < output.w.length; i++) {
            if (output.w[i] >= max) {
               index = i;
               max = output.w[i];
            }
         }
         var name = ['飛行機', '自動車', '', '', '鹿', '', 'カエル', '', '', 'トラック'];
         alert(name[index] + Math.floor(max * 100) + '%');
      }
      img.src = reader.result;
   }
   reader.readAsDataURL(e.target.files[0]);
});
</script>
</body>
</html>

###使い方
手書き数字認識と同じように
”ConvNetJS CIFAR-10 demo”
http://cs.stanford.edu/people/karpathy/convnetjs/demo/cifar10.html
のWEBページのJSONをvar netObj2に代入すれば使えます

ConvNetJSで画像を分類
http://pie.karou.jp/zu.html


参考サイト
TigranGalstyan/mnistconvnetdemo
https://github.com/TigranGalstyan/mnistconvnetdemo

11
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?