HTML Formatting (#77)

* Add imantics thumbnail
* Html formatting
* Show category with image thumbnail
* Fixed create annotation bug
* Removed unused buttons

Author: jsbroks

app/api/annotations.py

@@ -1,8 +1,9 @@
 from flask_restplus import Namespace, Resource, reqparse
 from flask_login import login_required, current_user
+from imantics import Color
 
 from ..models import AnnotationModel
-from ..util import query_util, color_util
+from ..util import query_util
 
 import datetime
 
@@ -35,7 +36,6 @@ def post(self):
 
         try:
             annotation = AnnotationModel(image_id=image_id, category_id=category_id, metadata=metadata)
-            annotation.color = color_util.random_color_hex() if color is None else color
             annotation.save()
         except (ValueError, TypeError) as e:
             return {'message': str(e)}, 400

app/api/categories.py

@@ -2,7 +2,7 @@
 from flask_login import login_required, current_user
 
 from ..util.pagination_util import Pagination
-from ..util import query_util, color_util
+from ..util import query_util
 from ..models import CategoryModel, AnnotationModel
 
 import datetime

app/api/datasets.py

@@ -241,7 +241,11 @@ def get(self, dataset_id):
 
         for image in images:
             image_id = image.get('id')
-            image['annotations'] = AnnotationModel.objects(image_id=image_id, deleted=False).count()
+            query = AnnotationModel.objects(image_id=image_id, deleted=False)
+            image['annotations'] = query.count()
+            category_ids = query.distinct('category_id')
+            image['categories'] = query_util.fix_ids(CategoryModel.objects(id__in=category_ids).only('name', 'color'))
+
 
         subdirectories = [f for f in sorted(os.listdir(directory))
                           if os.path.isdir(directory + f)]

app/api/images.py

@@ -3,7 +3,7 @@
 from werkzeug.datastructures import FileStorage
 from flask import send_file
 
-from ..util import query_util, coco_util, thumbnail_util
+from ..util import query_util, coco_util
 from ..models import *
 
 import datetime
@@ -184,7 +184,7 @@ def post(self, from_id, to_id):
 
 
 @api.route('/<int:image_id>/thumbnail')
-class ImageCoco(Resource):
+class ImageThumbnail(Resource):
 
     @api.expect(image_download)
     @login_required
@@ -206,7 +206,7 @@ def get(self, image_id):
         if height < 1:
             height = image.height
 
-        pil_image = thumbnail_util.generate_thumbnail(image, save=False)
+        pil_image = image.thumbnail()
         pil_image.thumbnail((width, height), Image.ANTIALIAS)
 
         image_io = io.BytesIO()

app/models.py

@@ -3,13 +3,14 @@
 import json
 import datetime
 import numpy as np
+import imantics as im
 
+from PIL import Image
 from flask_mongoengine import MongoEngine
 from mongoengine.queryset.visitor import Q
 from flask_login import UserMixin, current_user
 
 
-from .util import color_util
 from .config import Config
 from PIL import Image
 
@@ -129,6 +130,10 @@ def thumbnail_path(self):
             os.makedirs(directory)
 
         return '/'.join(folders)
+    
+    def thumbnail(self):
+        image = self().draw(color_by_category=True, bbox=False)
+        return Image.fromarray(image)
 
     def copy_annotations(self, annotations):
         """
@@ -148,6 +153,15 @@ def copy_annotations(self, annotations):
 
         return annotations.count()
 
+    def __call__(self):
+
+        image = im.Image.from_path(self.path)
+        for annotation in AnnotationModel.objects(image_id=self.id, deleted=False).all():
+            if not annotation.is_empty():
+                image.add(annotation())
+
+        return image
+
 
 class AnnotationModel(db.DynamicDocument):
 
@@ -196,7 +210,7 @@ def save(self, copy=False, *args, **kwargs):
                 self.metadata = dataset.default_annotation_metadata.copy()
 
         if self.color is None:
-            self.color = color_util.random_color_hex()
+            self.color = im.Color.random().hex
 
         if current_user:
             self.creator = current_user.username
@@ -225,6 +239,23 @@ def clone(self):
 
         return AnnotationModel(**create)
 
+    def __call__(self):
+
+        category = CategoryModel.objects(id=self.category_id).first()
+        if category:
+            category = category()
+
+        data = {
+            'image': None,
+            'category': category,
+            'color': self.color,
+            'polygons': self.segmentation,
+            'width': self.width,
+            'height': self.height,
+            'metadata': self.metadata
+        }
+
+        return im.Annotation(**data)
 
 class CategoryModel(db.DynamicDocument):
 
@@ -260,7 +291,7 @@ def bulk_create(cls, categories):
     def save(self, *args, **kwargs):
 
         if not self.color:
-            self.color = color_util.random_color_hex()
+            self.color = im.Color.random().hex
 
         if current_user:
             self.creator = current_user.username
@@ -269,6 +300,16 @@ def save(self, *args, **kwargs):
 
         return super(CategoryModel, self).save(*args, **kwargs)
 
+    def __call__(self):
+        """ Generates imantics category object """
+        data = {
+            'name': self.name,
+            'color': self.color,
+            'parent': self.supercategory,
+            'metadata': self.metadata,
+            'id': self.id
+        }
+        return im.Category(**data)
 
 class LicenseModel(db.DynamicDocument):
     id = db.SequenceField(primary_key=True)

app/util/thumbnail_util.py

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <NavBar v-show="showNavBar"/>
+    <NavBar v-show="showNavBar" />
     <RouterView :key="$route.fullPath" />
   </div>
 </template>

client/src/App.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <i class="fa fa-plus" style="float: right; margin: 0 4px; color: green" @click="createMetadata" />
+    <i
+      class="fa fa-plus"
+      style="float: right; margin: 0 4px; color: green"
+      @click="createMetadata"
+    />
 
     <p class="title" style="margin: 0">{{ title }}</p>
 
@@ -17,15 +21,28 @@
       <li v-if="metadataList.length == 0" class="list-group-item meta-item">
         <i class="subtitle">No items in metadata.</i>
       </li>
-      <li v-for="(object, index) in metadataList" :key="index" class="list-group-item meta-item">
+      <li
+        v-for="(object, index) in metadataList"
+        :key="index"
+        class="list-group-item meta-item"
+      >
         <div class="row" style="cell">
-
           <div class="col-sm">
-            <input v-model="object.key" type="text" class="meta-input" :placeholder="keyTitle">
+            <input
+              v-model="object.key"
+              type="text"
+              class="meta-input"
+              :placeholder="keyTitle"
+            />
           </div>
 
           <div class="col-sm">
-            <input v-model="object.value" type="text" class="meta-input" :placeholder="valueTitle">
+            <input
+              v-model="object.value"
+              type="text"
+              class="meta-input"
+              :placeholder="valueTitle"
+            />
           </div>
         </div>
       </li>

client/src/components/Metadata.vue

@@ -1,13 +1,14 @@
 <template>
   <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
-
     <a class="navbar-brand" href="/">
       <strong>{{ name }}</strong>
       <span class="subscript">{{ version }}</span>
     </a>
 
-    <button class="navbar-toggler"
-      type="button" data-toggle="collapse"
+    <button
+      class="navbar-toggler"
+      type="button"
+      data-toggle="collapse"
       data-target="#navbarSupportedContent"
       aria-controls="navbarSupportedContent"
       aria-expanded="false"
@@ -18,7 +19,6 @@
 
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
-
         <li class="nav-item" :class="{ active: $route.name === 'datasets' }">
           <RouterLink class="nav-link" to="/datasets">Datasets</RouterLink>
         </li>
@@ -28,20 +28,26 @@
         <li class="nav-item" :class="{ active: $route.name === 'undo' }">
           <RouterLink class="nav-link" to="/undo">Undo</RouterLink>
         </li>
-        <li v-show="$store.getters['user/isAdmin']" class="nav-item" :class="{ active: $route.name === 'admin' }">
+        <li
+          v-show="$store.getters['user/isAdmin']"
+          class="nav-item"
+          :class="{ active: $route.name === 'admin' }"
+        >
           <RouterLink class="nav-link" to="/admin/panel">Admin</RouterLink>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="/api">API</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="https://github.com/jsbroks/coco-annotator/wiki">Help</a>
+          <a
+            class="nav-link"
+            href="https://github.com/jsbroks/coco-annotator/wiki"
+            >Help</a
+          >
         </li>
-        
       </ul>
       <Status />
       <User v-if="loginEnabled" />
-      
     </div>
   </nav>
 </template>

client/src/components/NavBar.vue

@@ -7,10 +7,19 @@
           <span class="sr-only">Previous</span>
         </a>
       </li>
-      <li v-for="pageIndex in range" :key="pageIndex" :class="{ 'page-item': true, active: pageIndex + startPage == page }">
-        <a class="page-link" @click="page = pageIndex + startPage">{{ pageIndex + startPage}}</a>
+      <li
+        v-for="pageIndex in range"
+        :key="pageIndex"
+        :class="{ 'page-item': true, active: pageIndex + startPage == page }"
+      >
+        <a class="page-link" @click="page = pageIndex + startPage">{{
+          pageIndex + startPage
+        }}</a>
       </li>
-      <li :class="{ 'page-item': true, disabled: page == pages }" @click="nextPage">
+      <li
+        :class="{ 'page-item': true, disabled: page == pages }"
+        @click="nextPage"
+      >
         <a class="page-link" aria-label="Next">
           <span aria-hidden="true">&raquo;</span>
           <span class="sr-only">Next</span>