|
<div class="col-md-12"> |
|
<div class="card" style="width: 14rem"> |
|
<img id="selected-image{{ label }}" src="{{ url_for('static', filename='images/placeholder-image.png')}}" class="card-img-top" alt="..."> |
|
<div class="card-body"> |
|
<input id="image-selector{{ label }}" type="file"> |
|
<p class="card-text">选择图片请点击👆</p> |
|
</div> |
|
<ul class="list-group list-group-flush"> |
|
<li class="list-group-item">品种: <span id="species{{ label }}"></span></li> |
|
<li class="list-group-item">健康状态: <span id="condition{{ label }}"></span></li> |
|
<li class="list-group-item">置信度: <span id="value{{ label }}"></span></li> |
|
</ul> |
|
<div class="text-center card-body"> |
|
<div class="btn-group me-2"> |
|
<button id="predict{{ label }}" type="button" class="btn btn-sm btn-outline-secondary">识别</button> |
|
{% if current_user.is_visitor %} |
|
<button type="button" class="btn btn-sm btn-outline-secondary disabled" aria-disabled="true">反馈</button> |
|
{% else %} |
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.location.href='{{ url_for('feedback') }}'">反馈</button> |
|
{% endif %} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<script src="/static/js/jquery.min.js"></script> |
|
<script> |
|
{ |
|
let base64Image |
|
$("#image-selector{{ label }}").change(function() { |
|
let reader = new FileReader(); |
|
reader.onload = function(e) { |
|
let dataURL = reader.result; |
|
if(/image/.test($("#image-selector{{ label }}")[0].files[0].type)) { |
|
var typeOfUpload = $("#image-selector{{ label }}")[0].files[0].type |
|
$('#selected-image{{ label }}').attr("src", dataURL); |
|
if (typeOfUpload === "image/jpeg") { // jpg jpeg jfif |
|
base64Image = dataURL.replace("data:image/jpeg;base64,", ""); |
|
}else if (typeOfUpload === "image/png"){ |
|
base64Image = dataURL.replace("data:image/png;base64,", ""); |
|
}else if (typeOfUpload === "image/bmp"){ |
|
base64Image = dataURL.replace("data:image/bmp;base64,", ""); |
|
}else { |
|
alert("not known") |
|
return |
|
} |
|
}else{ |
|
var noimage = new bootstrap.Modal(document.getElementById('noimage'), {}) |
|
noimage.show() |
|
return |
|
} |
|
|
|
console.log($("#image-selector{{ label }}")[0].files[0].name); |
|
} |
|
reader.readAsDataURL($("#image-selector{{ label }}")[0].files[0]); |
|
$("#species").text(""); |
|
$("#condition").text(""); |
|
$("#value").text(""); |
|
}); |
|
$("#predict{{ label }}").click(function(){ |
|
let message = { |
|
value: "{{label}}", |
|
image: base64Image |
|
}; |
|
if(typeof(message['image']) != "undefined") { |
|
if("{{current_user.is_visitor}}"==="True"){ |
|
$.post("{{ url_for('predict_for_visitor') }}", JSON.stringify(message), function(response){ |
|
$("#species{{ label }}").text(response.prediction.species); |
|
$("#condition{{ label }}").text(response.prediction.condition); |
|
$("#value{{ label }}").text(response.prediction.value); |
|
{#console.log(response);#} |
|
}); |
|
}else{ |
|
$.post("{{ url_for('predictbykind') }}", JSON.stringify(message), function(response){ |
|
$("#species{{ label }}").text(response.prediction.species); |
|
$("#condition{{ label }}").text(response.prediction.condition); |
|
$("#value{{ label }}").text(response.prediction.value); |
|
{#console.log(response);#} |
|
}); |
|
} |
|
}else{ |
|
var noimage = new bootstrap.Modal(document.getElementById('noimage'), {}) |
|
noimage.show() |
|
return |
|
} |
|
}); |
|
} |
|
</script> |
