RのWeb制作

Webサービス制作のための技術情報を。データ分析(Python、機械学習コンペ他)や自作野球ゲームMeisyoのこと中心。

Web制作 Python

手書き数字診断士(機械学習)を作り始めました

投稿日:

Python(Flask)+機械学習の勉強がてら、「手書き数字診断士」を作っています。

元ネタは2chの中小企業診断士です。
「う~ん、これは中小企業!w」

やること

1・index.html
 1. canvasに手書きで文字を書けるようにする(280×280)
 2. canvasを送信できる
 3. save.htmlで保存した間違いを殿堂入りとして表示
2・result.html
 1. canvasのデータを画像で受け取って配列データ化(280×280)
 2. MNISTの28×28に変換(Max-Pooling?)
 3. 判断→「う~ん、これは0!w」
 4. 正解かどうかチェックしてもらう or 間違えたら正解と名前を保存(save.htmlへ)
3・save.html
 1. 間違えた画像データを保管。

2’・機械学習
 1. mnistを使って予め学習。(何個かモデルを用意しとく)

できたこと

1-1まで終わった。
コード詳細は下記「現在のコード」にて。

できていないこと

1-2 canvasを送信できる、が厄介。
・canvasを画像データにすること
・Flaskでのformのやり取りが不明(wtformとは)
 → 使わなければいいじゃん・・・

解決策たち

他の人のコード見て動かすしかないですね。
・https://deep-ize.jp/hcr/
・https://icondecotter.jp/blog/2013/01/31/canvas-todataurl%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%82%92%E4%BD%BF%E3%81%86/
・https://qiita.com/0829/items/a8c98c8f53b2e821ac94
・https://www.google.co.jp/search?q=canvas.toDataURL()&oq=canvas.toDataURL()&aqs=chrome..69i57j69i61&sourceid=chrome&ie=UTF-8

現在のコード

<html>
<head>
<meta charset='utf-8'>
<title>手書き数字診断士「う~ん、これは0!w」</title>
</head>
<body>
<h1>手書き数字診断士</h1>
<form method="POST">
<input type=submit value="診断!"><br />
<a href="./test.html">もう一度行う</a><br />
<input type=hidden name=text value="10">
<p id="comment">「・・・」</p>
<canvas id="canvas" name="canvas" width="280" height="280" style="border: 1px solid #eee;"></canvas><br>
</form>
<script type="text/javascript">
<!--
  // https://kigiroku.com/frontend/canvas_draw.html
	var drawing = false;
	// 前回の座標を記録する(初期値:0)
	var before_x = 0;
	var before_y = 0;

	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');

	canvas.addEventListener('mousemove', draw_canvas);
	// マウスをクリックしてる時
	canvas.addEventListener('mousedown', function(e) {
		drawing = true;
		var rect = e.target.getBoundingClientRect();
		before_x = e.clientX - rect.left;
		before_y = e.clientY - rect.top;
	});
	// マウスをクリックしてない時
	canvas.addEventListener('mouseup', function() {
		drawing = false;
	});

// 描画の処理
function draw_canvas(e) {
	// drawingがtrueじゃなかったら返す
	if (!drawing){
		return
	};
	var rect = e.target.getBoundingClientRect();
	var x = e.clientX - rect.left;
	var y = e.clientY - rect.top;

	// 描画
	ctx.lineCap = 'round';
  ctx.strokeStyle = 'black';
	ctx.lineWidth = 10;
	ctx.beginPath();
	ctx.moveTo(before_x, before_y);
	ctx.lineTo(x, y);
	ctx.stroke();
	ctx.closePath();
	// 描画最後の座標を前回の座標に代入する
	before_x = x;
	before_y = y;
}
//-->
</script>
</body>
</html>

-Web制作, Python

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[Meisyo]アイテム3種類の追加

Meisyoのアップデートを行いました。 メインはアイテムの追加です。 監督画面でアイテムの所持数を確認できるようにしました。 下記アイテムを追加しました。 1・モード5(選手やる気5上昇) 2・プロ …

[Meisyo]左投右打が出過ぎで気持ち悪い件の分析

本日フリーゲーム夢現に初コメントが付いたのでワクワクして見ました。 #—————————&# …

[Python] tensorflow_datasetsで詰まったとき

「図解速習 DEEPLEARNING」で自己環境(Windows)で学習していました。 tensorflow_datasetsって何だ・・・? import tensorflow_datasets a …

「実践!Chainerとロボットで学ぶディープラーニング」を作ってみた

実践!Chainerとロボットで学ぶディープラーニングを購入しました。 単純にロボを動かすのは楽しいです。 周りに意外と買った人が居ないようなので、レビューを書きました。 所感 ちょっとお高いけど、土 …

no image

「1秒でも早く読者を離脱させる」 – まとめサイトの新たな挑戦

あなたがテレビでニュースを見るのはなぜでしょうか? 綺麗なアナウンサーを見るため?時間をつぶすため? 確かにそういう人もいるでしょう。 ただ、間違いのないことは、 あなたは「情報を得るために」ニュース …

筆者情報

名将と呼ばれた者達(Meisyo)公式ブログ
高校野球チーム育成シミュレーションゲーム。個性豊かな選手たちを育成し、監督としてチームを優勝に導こう!

Twitter(R@おいす)
連絡はこちら

メインサイト:Rの考え方

気に入ったらクリックしてね!