{% 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> <button onclick="location.href='{% url 'login' %}'" id='submit' method="GET" type='button'>Login</button> {% 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%} <button onclick="location.href='{% url 'detect' %}'" id='submit' method="GET" type='button'>Submit again</button> {%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> <button onclick="location.href='{%url 'download_predicitons' pk=img.id%}'" id="download_json" method="GET" type="button">Export predictions</button> </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%}