Add results page with functionality

PlanktonDetector/DetectionApp/migrations/0011_remove_predictedimage_class_name_and_more.py

@@ -0,0 +1,26 @@
+# Generated by Django 4.2.7 on 2023-12-19 21:15
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("DetectionApp", "0010_rename_detectimage_uploadimage"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="predictedimage",
+            name="class_name",
+        ),
+        migrations.RemoveField(
+            model_name="predictedimage",
+            name="confidence",
+        ),
+        migrations.AddField(
+            model_name="predictedimage",
+            name="prediction_data",
+            field=models.JSONField(default={"data": "no predictions"}),
+            preserve_default=False,
+        ),
+    ]

PlanktonDetector/DetectionApp/models.py

@@ -1,3 +1,4 @@
+import json
 from django.db import models
 from django.core.validators import FileExtensionValidator
 from django.contrib.auth.models import User
@@ -17,8 +18,7 @@ class UploadImage(models.Model):
 class PredictedImage(models.Model):
     original_image = models.OneToOneField(UploadImage, on_delete=models.CASCADE)
     image = models.ImageField(upload_to=f"plankton/%Y/%m/%d/{original_image.name}")
-    confidence = models.FloatField()
+    prediction_data = models.JSONField()
-    class_name = models.CharField(max_length=100)
     date_predicted = models.DateTimeField(auto_now_add=True)
 
     @property
@@ -28,3 +28,9 @@ class PredictedImage(models.Model):
     @property
     def get_original_image(self):
         return self.original_image.image
+
+    def get_prediction_data(self):
+        results = json.loads(self.prediction_data)
+        for pred in results:
+            pred["confidence"] = round(pred["confidence"] * 100, 2)
+        return results

PlanktonDetector/DetectionApp/utils.py

@@ -16,5 +16,6 @@ def predict_image(image):
         name=f"{image.image.name}_predicted",
         imgsz=[640, 640],
     )
-    x = json.loads(results[0].tojson())
+    for r in results:
+        x = r.tojson()
     return x

PlanktonDetector/DetectionApp/views.py

@@ -9,6 +9,7 @@ from django.utils.decorators import method_decorator
 from .models import UploadImage, PredictedImage
 from .utils import predict_image
 from django.contrib.auth.mixins import LoginRequiredMixin
+import json
 
 
 class DetectView(View):
@@ -37,22 +38,20 @@ class DetectView(View):
                 )
                 image.save()
                 try:
-                    results_metrics = prediciton_results[0]
+                    results_metrics = prediciton_results
                 except IndexError as e:
-                    PredictedImage.objects.create(
+                    predicted_image = PredictedImage.objects.create(
                         original_image=image,
                         image=image.predicted_image_url,
-                        confidence=0.0,
+                        prediction_data={"data": "no results"},
-                        class_name="no predictions",
                     )
                 else:
-                    PredictedImage.objects.create(
+                    predicted_image = PredictedImage.objects.create(
                         original_image=image,
                         image=image.predicted_image_url,
-                        confidence=results_metrics["confidence"],
+                        prediction_data=results_metrics,
-                        class_name=results_metrics["name"],
                     )
-                predictions.append(image)
+                predictions.append(predicted_image)
             return render(
                 request,
                 "results.html",

PlanktonDetector/static/DetectionApp/css/base.css

@@ -1,10 +1,12 @@
 body, html{
     height:100%;
-    margin: 0px 0px 0px 0px;
+    min-height: 100%;
+    margin: 35px 0px 0px 0px;
     display:flex;
     justify-content: center;
     flex-direction: column;
     font-family:'Inter', sans-serif;
+    overflow-x:hidden
 }
 
 .top-menu a{
@@ -16,10 +18,12 @@ body, html{
 .top-menu{
     display: flex;
     flex-direction: row;
+    position: fixed;
+    top:0;
+    width: 100%;
     justify-content:flex-end;
     align-items: center;
     background-color:lightgray;
-    margin-bottom:5px;
     height: 45px;
     border: grey solid;
     border-width: 0px 2px 2px 2px;
@@ -29,14 +33,10 @@ body, html{
 
 .footer{
     display:flex;
-    position:fixed;
+    position:relative;
     bottom: 0;
-    right: 0;
+    width: 100%;
-    left:0;
     flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    margin-top: 5px;
     background-color: lightgray;
     border: grey solid;
     border-width: 2px 2px 0px 2px;

PlanktonDetector/static/DetectionApp/css/results.css

@@ -5,29 +5,31 @@ form{
     display:flex;
     flex-direction:row;
     margin:auto;
+    overflow:hidden;
 }
 
 
 .side_menu{
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items:center;
     flex-direction: column;
     width: 25%;
     background-color: lightgray;
-    border: grey solid;
+    border: 2px grey solid;
-    border-width: 2px;
+    padding: 0px 0px 40px 0px;
-    margin-bottom: 59px;
+    margin-bottom: 5px;
+    overflow-y: scroll;
 }
 
 
 #description{
     font-size: 40px;
     text-align: center;
+    margin: 10px 0px 15px 0px;
 }
 
 #submit{
-    margin-bottom: 40px;
     background-color: chartreuse;
     margin-top: auto;
     height: 50px;
@@ -62,3 +64,24 @@ form{
 }
 
 
+.image_number {
+    font-size: medium;
+    margin: 0 0 5px 0 ;
+}
+
+.results{
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+    width: 70%;
+    align-items: center;
+    border: 2px black solid;
+    border-radius: 5%;
+    margin-bottom: 15px;
+}
+
+.detection_info{
+    font-size: large;
+    text-decoration:solid;
+    color: black;
+}

PlanktonDetector/static/DetectionApp/css/upload.css

@@ -5,6 +5,7 @@ form{
     display:flex;
     flex-direction:row;
     margin:auto;
+    overflow: hidden;
 }
 
 
@@ -17,7 +18,7 @@ form{
     background-color: lightgray;
     border: grey solid;
     border-width: 2px;
-    margin-bottom: 59px;
+    margin-bottom:5px;
 }
 
 

PlanktonDetector/templates/base.html

@@ -13,7 +13,7 @@
     <title>Plankton Detector</title>
 </head>
 <body>
-    <div class="top-menu">
+    <div class="top-menu" id="top-menu">
         <a href="{% url 'posts' %}">Community</a>
         <a href="{% url 'detect' %}">Predict</a>
         {% if user.is_authenticated %}
@@ -24,17 +24,17 @@
         {%endif%}
     </div>
     {%block content%}{%endblock content%}
-    <div class="footer">
+    <footer class="footer">
     <p>Footer</p>
-    </div>
+    </footer>
     <script>
     var prevScrollpos = window.pageYOffset;
     window.onscroll = function() {
     var currentScrollPos = window.pageYOffset;
     if (prevScrollpos > currentScrollPos) {
-        document.getElementsByClassName("top-menu").style.top = "0";
+        document.getElementById("top-menu").style.top = "0";
     } else {
-        document.getElementsByClassName("top-menu").style.top = "-50px";
+        document.getElementById("top-menu").style.top = "-45px";
     }
     prevScrollpos = currentScrollPos;
     }

PlanktonDetector/templates/results.html

@@ -12,15 +12,29 @@
             <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="{%get_media_prefix%}{{img.predicted_image_url}}" alt="upload_image" style="width:640px; height:460px;">
+                <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%}

PlanktonDetector/templates/upload.html

@@ -4,7 +4,7 @@
 <link rel="stylesheet" href="{%static 'DetectionApp/css/upload.css' %}">
 {%endblock extracss%}
 {%block content%}
-    <form method="POST" enctype="multipart/form-data">
+    <form method="POST" enctype="multipart/form-data" id="upload_form">
         {% csrf_token %}
     <div class="side_menu">
         {% if not user.is_authenticated %}
@@ -15,6 +15,7 @@
             <input type="submit" id="submit" value="Submit">
         {%endif%}
     </div>
+    <div id="progress"></div>
         <div class="upload_field">
         <label for="id_image", class="upload_button" id="image-preview-container">
             {{form.as_p}}