Plankton_Detector/PlanktonDetector/templates/results.html
2024-01-06 14:14:15 +01:00

41 lines
1.6 KiB
HTML

{% extends 'base.html' %}
{%load static%}
{%block extracss%}
<link rel="stylesheet" href="{%static 'DetectionApp/css/results.css' %}">
{%endblock extracss%}
{%block content%}
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="side_menu">
{% if not user.is_authenticated %}
<p id="description">Please login to see results</p>
<a href="{% url 'login'%}?next={{request.path}}" id="submit">Login</a>
{% else %}
<p id="description">Results:</p>
{%for img in img.images.all %}
<p class="image_number">Image {{forloop.counter}}</p>
{%for detection in img.get_prediction_data%}
<div class="results">
<p class="detection_info">{{detection.name}}: {{detection.confidence}}%</p>
</div>
{%endfor%}
{%endfor%}
<a href="{% url 'detect' %}" id="submit">Submit again</a>
{%endif%}
</div>
<div class="upload_field">
<label>
{%for img in img.images.all %}
<img src="{{img.image.url}}" alt="upload_image" style="width:640px; height:460px;">
{%endfor%}
</label>
<a href="{%url 'download_predicitions' pk=img.id %}" id="download_json">Export predictions</a>
</div>
</form>
<script>
var results=document.getElementsByClassName("results")
for (var i = 0; i < results.length; i++){
results[i].style.background=`linear-gradient(90deg, #7fff00 ${results[i].textContent.split(":")[1]}, #FFFFFF 0%)`
};
</script>
{%endblock content%}