17
15

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.

HTMLファイル一つで機械学習してみる

Last updated at Posted at 2017-05-24

全然門外漢なのに機械学習をさわってみたくなりました。HTML,JS,CSSもド素人です。ド素人なのにQiitaに書いていいのか悩みましたが一応できたので…

ド素人なのでググると以下の記事がありました

ぱっと眺めた限り一番上のBrainしか理解できそうにありませんでした。

皆さんには簡単すぎるのかBrainについての記事がほとんどないのと一応小さいHTMLファイル一つで機械学習のテストができたので投稿します。

##1.Brainについてわかっていること

あんまりわかってませんがこんな感じだと思います。

  • jsで出来ている
  • 本当はNode.jsで使うべきだがCDN指定でブラウザ上でも動く
  • クライアント側でローカル実行可能
  • 入力、出力のパラメタ数はいくつでもいいらしい
  • 入力、出力の各パラメタの取りうる値の範囲は0~1の間のみ
  • 0~1なので各パラメータの最大値で割る、割り戻すなどの前、後処理が必要

##2.コード

さっそくコードです。たったこれだけで機械学習→テストまで実施できます。とても簡単です。ポイントは以下

  • 学習処理の中のnet.trainでinputとouputを複数件与えて学習
  • テスト開始の中のnet.runでinputのみ与えてテスト
  • データは適当に都道府県別のある統計データを使いました
  • 42都道府県分を学習データ、残りをテストデータで使いました
サンプルコード
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<script src="https://cdnjs.cloudflare.com/ajax/libs/brain/0.6.3/brain.js"></script> 

<style>
body { 
   font-size: 100%;
   color: #ecf0f1;
   background: #27ae60;
}
#kkaf {
   font-size: 1.5em;
   margin: 10px;
}
</style>

    

  <title>brain.jsテスト(結果)</title>

  
    

<style>
div#footer-fixed
{
    position: fixed;            /* フッターの固定 */
    bottom: 0px;                /* 位置(下0px) */
    left: 0px;                  /* 位置(左0px) */
    width: 100%;                /* 横幅100% */
    height: 70px;              /* 縦幅70px */
}
 
div#body-bk{
    padding: 0px 0 80px 0;    /* 下に80pxを余白を取る */
}
#out {
  width: 90%;
  font-size: 1em; 
};
</style>


  
</head>

<body>
     <h1>brain.jsテスト(結果)</h1>


<div id="body-bk">

<div id="kkaf">
<textarea id="out" rows="10">@@@1@@@</textarea>
</div>

</div>

<div id="footer-fixed">

多分一番簡単な機械学習??

</div>

<script>
var outxxx = '結果:\n';
var net = new brain.NeuralNetwork();
// 学習処理
net.train([{input: { gan: 0.621, iryo: 0.7175 }, output: { ben: 0.65 }},
{input: { gan: 0.79, iryo: 0.8175 }, output: { ben: 0.626 }},
{input: { gan: 0.7185, iryo: 0.6575 }, output: { ben: 0.691 }},
{input: { gan: 0.72025, iryo: 0.8475 }, output: { ben: 0.636 }},
{input: { gan: 0.53025, iryo: 0.7775 }, output: { ben: 0.242 }},
{input: { gan: 0.82925, iryo: 0.7175 }, output: { ben: 0.545 }},
{input: { gan: 0.73525, iryo: 0.7075 }, output: { ben: 0.734 }},
{input: { gan: 0.787, iryo: 0.8325 }, output: { ben: 0.584 }},
{input: { gan: 0.69775, iryo: 0.72 }, output: { ben: 0.63 }},
{input: { gan: 0.73075, iryo: 0.79 }, output: { ben: 0.654 }},
{input: { gan: 0.7315, iryo: 0.885 }, output: { ben: 0.615 }},
{input: { gan: 0.7475, iryo: 0.7325 }, output: { ben: 0.714 }},
{input: { gan: 0.723, iryo: 0.86 }, output: { ben: 0.671 }},
{input: { gan: 0.7755, iryo: 0.855 }, output: { ben: 0.685 }},
{input: { gan: 0.85125, iryo: 0.9475 }, output: { ben: 0.482 }},
{input: { gan: 0.82075, iryo: 0.86 }, output: { ben: 0.598 }},
{input: { gan: 0.6265, iryo: 0.62 }, output: { ben: 0.657 }},
{input: { gan: 0.71325, iryo: 0.69 }, output: { ben: 0.69 }},
{input: { gan: 0.87975, iryo: 0.7425 }, output: { ben: 0.686 }},
{input: { gan: 0.8815, iryo: 0.8675 }, output: { ben: 0.597 }},
{input: { gan: 0.7365, iryo: 0.6975 }, output: { ben: 0.675 }},
{input: { gan: 0.6275, iryo: 0.6875 }, output: { ben: 0.778 }},
{input: { gan: 0.81425, iryo: 0.8775 }, output: { ben: 0.568 }},
{input: { gan: 0.97925, iryo: 0.7875 }, output: { ben: 0.645 }},
{input: { gan: 0.845, iryo: 0.6975 }, output: { ben: 0.722 }},
{input: { gan: 0.61975, iryo: 0.6775 }, output: { ben: 0.632 }},
{input: { gan: 0.92275, iryo: 0.7425 }, output: { ben: 0.565 }},
{input: { gan: 0.70575, iryo: 0.6925 }, output: { ben: 0.659 }},
{input: { gan: 0.73675, iryo: 0.815 }, output: { ben: 0.7 }},
{input: { gan: 0.6475, iryo: 0.655 }, output: { ben: 0.668 }},
{input: { gan: 0.72125, iryo: 0.85 }, output: { ben: 0.628 }},
{input: { gan: 0.76225, iryo: 0.8925 }, output: { ben: 0.596 }},
{input: { gan: 0.88125, iryo: 0.885 }, output: { ben: 0.504 }},
{input: { gan: 0.7245, iryo: 0.71 }, output: { ben: 0.695 }},
{input: { gan: 0.87575, iryo: 0.8225 }, output: { ben: 0.633 }},
{input: { gan: 0.9125, iryo: 0.795 }, output: { ben: 0.612 }},
{input: { gan: 0.62675, iryo: 0.8175 }, output: { ben: 0.597 }},
{input: { gan: 0.80575, iryo: 0.88 }, output: { ben: 0.689 }},
{input: { gan: 0.7085, iryo: 0.71 }, output: { ben: 0.702 }},
{input: { gan: 0.75225, iryo: 0.7275 }, output: { ben: 0.709 }},
{input: { gan: 0.81725, iryo: 0.745 }, output: { ben: 0.758 }},
{input: { gan: 0.73075, iryo: 0.7525 }, output: { ben: 0.749 }}]);
// テスト開始
var input = { gan: 0.75, iryo: 0.92 };
var output = net.run(input);  
console.log(output);
outxxx = outxxx+"----------\n";
outxxx = outxxx+"inp:"+JSON.stringify(input)+"\n";
outxxx = outxxx+"out:"+JSON.stringify(output)+"\n";
var input = { gan: 0.79, iryo: 0.71 };
var output = net.run(input);  
console.log(output);
outxxx = outxxx+"----------\n";
outxxx = outxxx+"inp:"+JSON.stringify(input)+"\n";
outxxx = outxxx+"out:"+JSON.stringify(output)+"\n";
var input = { gan: 0.73, iryo: 0.77 };
var output = net.run(input);  
console.log(output);
outxxx = outxxx+"----------\n";
outxxx = outxxx+"inp:"+JSON.stringify(input)+"\n";
outxxx = outxxx+"out:"+JSON.stringify(output)+"\n";
var input = { gan: 0.85, iryo: 0.90 };
var output = net.run(input);  
console.log(output);
outxxx = outxxx+"----------\n";
outxxx = outxxx+"inp:"+JSON.stringify(input)+"\n";
outxxx = outxxx+"out:"+JSON.stringify(output)+"\n";
var input = { gan: 0.88, iryo: 0.81 };
var output = net.run(input);  
console.log(output);
outxxx = outxxx+"----------\n";
outxxx = outxxx+"inp:"+JSON.stringify(input)+"\n";
outxxx = outxxx+"out:"+JSON.stringify(output)+"\n";
// テスト結果をテキストエリアへ
document.getElementById('out').innerHTML=outxxx;
</script>


</body>



  

</html>

##3.実行結果

実行した結果は以下です。outputがちゃんと回答されてます。

結果:
----------
inp:{"gan":0.75,"iryo":0.92}
out:{"ben":0.5622472003860413}
----------
inp:{"gan":0.79,"iryo":0.71}
out:{"ben":0.6982588526001852}
----------
inp:{"gan":0.73,"iryo":0.77}
out:{"ben":0.6552905833573789}
----------
inp:{"gan":0.85,"iryo":0.9}
out:{"ben":0.6200602913584085}
----------
inp:{"gan":0.88,"iryo":0.81}
out:{"ben":0.6637565303918588}

##4.おわりに

あんまり簡単すぎて皆さん興味が無いのだと思いますが、ド素人さんが機械学習に触れるにはいいのではないでしょうか。

以上です。

17
15
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
17
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?