wehub-resource-sync
80 lines
2.2 KiB
HTML
80 lines
2.2 KiB
HTML
{% extends "layout/single_default.html" %}
|
|
|
|
|
|
{% block main_content %}
|
|
|
|
|
|
<h3 class="header smaller lighter blue">手写图片识别演示</h3>
|
|
|
|
<div class="row clearfix">
|
|
<div class="col-md-6 column">
|
|
<canvas id="the_stage" width="280" height="280">your browser don't support canvas!</canvas>
|
|
<div>
|
|
<button type="button" class="btn btn-default butt" onclick="clearCanvas()"><strong>删除</strong></button>
|
|
<button type="button" class="btn btn-default butt" id="recognize" onclick="processImg()"><strong>识别</strong></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 column">
|
|
<h3>result:</h3>
|
|
<h2 id="rec_result"></h2>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="header smaller lighter blue">测试图片识别演示</h3>
|
|
<div class="row clearfix" style="width:400px;">
|
|
{% for image in image_array %}
|
|
<div class="col-md-2" style="margin-top: 15px;">
|
|
<img src="{{ image }}" alt="" width="50" class="minst_img" height="50" style="1px solid #e1e4e5;cursor: pointer;">
|
|
</div>
|
|
{% end %}
|
|
</div>
|
|
<div class="col-md-6 column">
|
|
<h3>结果:</h3>
|
|
<h2 id="prediction_text">"-1"</h2>
|
|
</div>
|
|
<!-- inline scripts related to this page -->
|
|
<script src="/static/js/mnist-draw.js"></script>
|
|
<style>
|
|
#the_stage {
|
|
border: 1px solid #999;
|
|
border-radius: 4px;
|
|
box-shadow: -10px 10px 5px #888888;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
jQuery(function($) {
|
|
$("#recognize").click(
|
|
//提交数据
|
|
function () {
|
|
$("#rec_result").html("connecting...");
|
|
var scribbler = document.getElementById ("the_stage");
|
|
var imageData = scribbler.toDataURL('image/png');
|
|
var dataTemp = imageData.substr(22);
|
|
|
|
var sendPackage = {"id": "1", "txt": dataTemp};
|
|
$.post("/minst_serving/prediction2", sendPackage, function(msg){
|
|
$("#rec_result").html(msg);
|
|
});
|
|
}
|
|
);
|
|
|
|
$(".minst_img").click(
|
|
//提交数据
|
|
function () {
|
|
img_url = $(this).attr("src")
|
|
console.log("here",);
|
|
//
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/minst_serving/prediction",
|
|
data: "img_url="+img_url,
|
|
success: function(msg){
|
|
console.log( "prediction : " + msg );
|
|
$("#prediction_text").html(msg);
|
|
}
|
|
});
|
|
}
|
|
);
|
|
});
|
|
</script>
|
|
{% end %} |