From d580df2736b487580b68902e500d637540d7803c Mon Sep 17 00:00:00 2001 From: Albrecht Date: Fri, 1 Nov 2019 15:23:38 -0500 Subject: [PATCH 1/3] Use smaller thumbnails for dataset page to improve loading speed of image cards --- backend/database/images.py | 20 ++++++++++++++++---- backend/webserver/api/annotator.py | 2 +- client/src/components/cards/ImageCard.vue | 2 +- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/backend/database/images.py b/backend/database/images.py index 046b5104..63f350e4 100644 --- a/backend/database/images.py +++ b/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,19 @@ def thumbnail(self): pil_image = self.generate_thumbnail() pil_image = pil_image.convert("RGB") - pil_image.save(thumbnail_path) + + # Calculate resize ratio: + resize_ratio = min(1, self.MAX_THUMBNAIL_DIM[0] / pil_image.height, + self.MAX_THUMBNAIL_DIM[1] / pil_image.width) + + # Resize the image if it is larger than the maximum size specified by MAX_THUMBNAIL_DIM + if resize_ratio < 1: + pil_image = pil_image.resize((int(resize_ratio * pil_image.width), + int(resize_ratio * pil_image.height))) + + # 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 diff --git a/backend/webserver/api/annotator.py b/backend/webserver/api/annotator.py index b568a0c8..7906f2f1 100644 --- a/backend/webserver/api/annotator.py +++ b/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() ) diff --git a/client/src/components/cards/ImageCard.vue b/client/src/components/cards/ImageCard.vue index cdda6225..418296a9 100755 --- a/client/src/components/cards/ImageCard.vue +++ b/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()}`; From 29bd53f004f219b5fd628d3b79b54a14add30b1b Mon Sep 17 00:00:00 2001 From: Albrecht Date: Mon, 4 Nov 2019 11:00:01 -0600 Subject: [PATCH 2/3] Simplified thumbnail generation code --- backend/database/images.py | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/backend/database/images.py b/backend/database/images.py index 63f350e4..a75600c6 100644 --- a/backend/database/images.py +++ b/backend/database/images.py @@ -103,14 +103,8 @@ def thumbnail(self): pil_image = self.generate_thumbnail() pil_image = pil_image.convert("RGB") - # Calculate resize ratio: - resize_ratio = min(1, self.MAX_THUMBNAIL_DIM[0] / pil_image.height, - self.MAX_THUMBNAIL_DIM[1] / pil_image.width) - - # Resize the image if it is larger than the maximum size specified by MAX_THUMBNAIL_DIM - if resize_ratio < 1: - pil_image = pil_image.resize((int(resize_ratio * pil_image.width), - int(resize_ratio * pil_image.height))) + # Resize image to fit in MAX_THUMBNAIL_DIM envelope as necessary + pil_image = 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) From b4f86015f30e13e5ebd165618c25664cdbff6711 Mon Sep 17 00:00:00 2001 From: Albrecht Date: Mon, 4 Nov 2019 11:02:17 -0600 Subject: [PATCH 3/3] Corrected error in PIL.Image.thumbnail usage --- backend/database/images.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/database/images.py b/backend/database/images.py index a75600c6..8e55ed68 100644 --- a/backend/database/images.py +++ b/backend/database/images.py @@ -104,7 +104,7 @@ def thumbnail(self): pil_image = pil_image.convert("RGB") # Resize image to fit in MAX_THUMBNAIL_DIM envelope as necessary - pil_image = pil_image.thumbnail((self.MAX_THUMBNAIL_DIM[1], self.MAX_THUMBNAIL_DIM[0])) + 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)