Plankton_Detector/PlanktonDetector/templates/results.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>
            <button onclick="location.href='{% url 'login' %}'" id='submit' method="GET" type='button'>Login</button>
        {% else %}
            <p id="description">Results:</p>
            {%for img in img_url%}
            <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_url%}
                <img src="{{img.image.url}}" alt="upload_image" style="width:640px; height:460px;">
            {%endfor%}
            </label>
    </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%}