Add preview feature of img, create placeholder for image recognition

.gitignore

@@ -1,3 +1,7 @@
 # ingore pycache
 
-__pycache__
+__pycache__
+
+# yolov8 model
+
+yolov8n.pt

PlanktonDetector/DetectionApp/views.py

@@ -3,22 +3,36 @@ from .forms import DetectForm
 from .models import DetectImage
 from django.core.files.uploadedfile import SimpleUploadedFile
 from django.conf import settings
-
+from ultralytics import YOLO
 
 # Create your views here.
+MODEL = YOLO("yolov8n.pt")
 
 
 def view(request):
     form = DetectForm()
+    print(form.as_p())
     if request.method == "GET":
         return render(request, "upload.html", {"form": form})
     form = DetectForm(request.POST, request.FILES)
     if form.is_valid():
         image = form.save()
-        # detecting plankton
+        MODEL.predict(
+            image.image.path,
+            save=True,
+            project=settings.MEDIA_ROOT,
+            name=f"{image.image.name}_predicted",
+            imgsz=[640, 640],
+        )
+        print(f"{settings.BASE_DIR}/predicted2/{image.image.name}")
         saved = form.is_valid()
         return render(
-            request, "upload.html", {"img_saved": saved, "img_path": image.image}
+            request,
+            "upload.html",
+            {
+                "img_saved": saved,
+                "img_path": f"{image.image.name}_predicted/{image.image.name.split('/')[-1]}",
+            },
         )
     else:
         return render(request, "upload.html")

PlanktonDetector/templates/upload.html

@@ -25,12 +25,29 @@
         <label for="id_image", class="upload_button">
             {{form.as_p}}
             {% if not img_path %}
-                <img src="{% static 'DetectionApp/images/upload_img.png' %}" alt="upload_image">
+                <img id="image-preview" src="{% static 'DetectionApp/images/upload_img.png' %}" alt="Image Preview" style="max-width:640px; max-height:640px;"/>
             {%else%}
-                <img src="{%get_media_prefix %}{{img_path}}" alt="upload_image">
+                <img src="{%get_media_prefix %}{{img_path}}" alt="upload_image" width="640" height="640">
             {%endif%}
         </label>
     </div>
     </form>
+    <script>
+            document.getElementById('id_image').addEventListener('change', function() {
+            var input = this;
+
+            if (input.files && input.files[0]) {
+                var reader = new FileReader();
+
+                reader.onload = function(e) {
+                    document.getElementById('image-preview').src = e.target.result;
+                    document.getElementById('image-preview').style.display = 'block';
+                }
+
+                reader.readAsDataURL(input.files[0]);
+            }
+        });
+    </script>
+    </form>
 </body>
 </html>