1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- {% extends "layout.html" %}
- {% block content %}
- <!--Create button that calls the download() function above, use dummy iframe
- to stop the form from redirecting -->
- <iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
- <form onsubmit="download('results.json', '{{ bbox_data_str }}')" target="dummyframe">
- <div class="d-flex">
- <div class="d-inline-block ml-1 mr-3 py-1"><h2>Results</h2></div>
- <div class="d-inline-block mx-3 py-1"><input class="btn btn-primary" type="submit" value="Download Results"></div>
- </div>
- </form>
- {% for img_base64, bbox_list in bbox_image_data_zipped %}
- <table class="table">
- <thead>
- <tr>
- <th>Class</th>
- <th>Bounding Box [x1, y1, x2, y2]</th>
- <th>Confidence</th>
- </tr>
- </thead>
- {% for bbox in bbox_list %}
- <tr>
- <td>{{ bbox['class_name'] }}</td>
- <td>{{ bbox['bbox'] }}</td>
- <td>{{ bbox['confidence'] }}</td>
- </tr>
- {% endfor %}
- </table>
- <!--Display base64 encoded image, scale image so it fits browser window horizontally -->
- <img src="data:image/jpeg;charset=utf-8;base64,{{ img_base64 }}" id="result_image" style="max-width: 100%;height: auto;width: auto\9;" />
- <hr/>
- {% endfor %}
- <script>
- // from https://stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server/18197341#18197341
- function download(filename, text) {
- var element = document.createElement('a');
- element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
- element.setAttribute('download', filename);
- element.style.display = 'none';
- document.body.appendChild(element);
- element.click();
- document.body.removeChild(element);
- }
- </script>
- {% endblock %}
|