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