Edited at

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

More than 1 year has passed since last update.

全然門外漢なのに機械学習をさわってみたくなりました。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.おわりに

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

以上です。