Improve the loading speed for image cards (#279)

* Use smaller thumbnails for dataset page to improve the loading speed of image cards
* Simplified thumbnail generation code
* Corrected error in PIL.Image.thumbnail usage

Author: taalbrecht

backend/database/images.py

@@ -18,6 +18,9 @@ class ImageModel(DynamicDocument):
     THUMBNAIL_DIRECTORY = '.thumbnail'
     PATTERN = (".gif", ".png", ".jpg", ".jpeg", ".bmp", ".GIF", ".PNG", ".JPG", ".JPEG", ".BMP")
 
+    # Set maximum thumbnail size (h x w) to use on dataset page
+    MAX_THUMBNAIL_DIM = (1024, 1024)
+
     # -- Private
     _dataset = None
 
@@ -89,9 +92,6 @@ def thumbnail(self):
         """
         Generates (if required) and returns thumbnail
         """
-        if not self.annotated:
-            self.thumbnail_delete()
-            return Image.open(self.path)
 
         thumbnail_path = self.thumbnail_path()
 
@@ -102,7 +102,13 @@ def thumbnail(self):
 
             pil_image = self.generate_thumbnail()
             pil_image = pil_image.convert("RGB")
-            pil_image.save(thumbnail_path)
+
+            # Resize image to fit in MAX_THUMBNAIL_DIM envelope as necessary
+            pil_image.thumbnail((self.MAX_THUMBNAIL_DIM[1], self.MAX_THUMBNAIL_DIM[0]))
+
+            # Save as a jpeg to improve loading time
+            # (note file extension will not match but allows for backwards compatibility)
+            pil_image.save(thumbnail_path, "JPEG", quality=80, optimize=True, progressive=True)
 
             self.update(is_modified=False)
             return pil_image

backend/webserver/api/annotator.py

@@ -128,7 +128,7 @@ def post(self):
             set__metadata=image.get('metadata', {}),
             set__annotated=annotated,
             set__category_ids=image.get('category_ids', []),
-            set__regenerate_thumbnail=annotated,
+            set__regenerate_thumbnail=True,
             set__num_annotations=annotations\
                 .filter(deleted=False, area__gt=0).count()
         )

client/src/components/cards/ImageCard.vue

@@ -146,7 +146,7 @@ export default {
   computed: {
     imageUrl() {
       let d = new Date();
-      if (this.image.annotated && this.showAnnotations) {
+      if (this.showAnnotations) {
         return `/api/image/${
           this.image.id
         }?width=250&thumbnail=true&dummy=${d.getTime()}`;