show_results.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. {% extends "layout.html" %}
  2. {% block content %}
  3. <!--Create button that calls the download() function above, use dummy iframe
  4. to stop the form from redirecting -->
  5. <iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
  6. <form onsubmit="download('results.json', '{{ bbox_data_str }}')" target="dummyframe">
  7. <div class="d-flex">
  8. <div class="d-inline-block ml-1 mr-3 py-1"><h2>Results</h2></div>
  9. <div class="d-inline-block mx-3 py-1"><input class="btn btn-primary" type="submit" value="Download Results"></div>
  10. </div>
  11. </form>
  12. {% for img_base64, bbox_list in bbox_image_data_zipped %}
  13. <table class="table">
  14. <thead>
  15. <tr>
  16. <th>Class</th>
  17. <th>Bounding Box [x1, y1, x2, y2]</th>
  18. <th>Confidence</th>
  19. </tr>
  20. </thead>
  21. {% for bbox in bbox_list %}
  22. <tr>
  23. <td>{{ bbox['class_name'] }}</td>
  24. <td>{{ bbox['bbox'] }}</td>
  25. <td>{{ bbox['confidence'] }}</td>
  26. </tr>
  27. {% endfor %}
  28. </table>
  29. <!--Display base64 encoded image, scale image so it fits browser window horizontally -->
  30. <img src="data:image/jpeg;charset=utf-8;base64,{{ img_base64 }}" id="result_image" style="max-width: 100%;height: auto;width: auto\9;" />
  31. <hr/>
  32. {% endfor %}
  33. <script>
  34. // from https://stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server/18197341#18197341
  35. function download(filename, text) {
  36. var element = document.createElement('a');
  37. element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  38. element.setAttribute('download', filename);
  39. element.style.display = 'none';
  40. document.body.appendChild(element);
  41. element.click();
  42. document.body.removeChild(element);
  43. }
  44. </script>
  45. {% endblock %}