Merge branch '64-model-abilities' into 'master'

Resolve "model abilities"

Closes #64

See merge request troebs/pycs!60

app.py

@@ -1,3 +1,5 @@
+#!/usr/bin/env python
+
 from pycs.ApplicationStatus import ApplicationStatus
 from pycs.frontend.WebServer import WebServer
 from pycs.models.ModelManager import ModelManager

pycs/pipeline/Pipeline.py

@@ -10,16 +10,16 @@ class Pipeline:
         :param root_folder: relative path to model folder
         :param distribution: object parsed from distribution.json
         """
-        pass
+        raise NotImplementedError
 
     def close(self):
         """
         is called everytime a pipeline is not needed anymore and should be used
-        to close and clean native resources
+        to free native resources
 
         :return:
         """
-        pass
+        raise NotImplementedError
 
     def execute(self, job: Job) -> Result:
         """
@@ -28,4 +28,4 @@ class Pipeline:
         :param job: that should be executed
         :return:
         """
-        pass
+        raise NotImplementedError

webui/src/components/media/annotated-image.vue

@@ -7,6 +7,7 @@
 
     <annotation-box v-if="current"
                     :image="image"
+                    :supports="model.supports"
                     :position="current"/>
 
     <annotation-box v-for="(result, index) in predictions"
@@ -18,6 +19,7 @@
                     :socket="socket"
                     :box-url="mediaUrl + '/' + result.id"
                     :labels="project.labels"
+                    :supports="model.supports"
                     @move="move"
                     @resize="resize"/>
   </div>
@@ -29,7 +31,7 @@ import AnnotationBox from "@/components/media/annotation-box";
 export default {
   name: "annotated-image",
   components: {AnnotationBox},
-  props: ['project', 'data', 'socket'],
+  props: ['data', 'project', 'model', 'socket'],
   mounted: function () {
     window.addEventListener("resize", this.resizeEvent);
 
@@ -78,15 +80,18 @@ export default {
           .filter(k => 'x' in k);
     },
     events: function () {
-      return {
-        'touchstart': this.press,
-        'touchmove': this.track,
-        'touchend': this.release,
-        'mousedown': this.press,
-        'mousemove': this.track,
-        'mouseup': this.release,
-        'dragstart': e => e.stopPropagation()
-      }
+      if (this.model.supports.includes('bounding-boxes') || this.model.supports.includes('labeled-bounding-boxes'))
+        return {
+          'touchstart': this.press,
+          'touchmove': this.track,
+          'touchend': this.release,
+          'mousedown': this.press,
+          'mousemove': this.track,
+          'mouseup': this.release,
+          'dragstart': e => e.stopPropagation()
+        }
+      else
+        return {}
     }
   },
   methods: {

webui/src/components/media/annotated-media-view.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="annotated-media-view">
     <div class="media">
-      <annotated-image :data="currentMedia" :project="currentProject" :socket="socket"/>
+      <annotated-image :data="currentMedia"
+                       :project="currentProject" :model="currentModel"
+                       :socket="socket"/>
     </div>
 
     <div class="control">
@@ -11,6 +13,7 @@
                      :control="showMediaSelector"
                      @control="showMediaSelector = $event"
                      :project="currentProject"
+                     :model="currentModel"
                      :data="currentMedia"
                      :socket="socket"/>
     </div>
@@ -33,15 +36,15 @@ import MediaControl from "@/components/media/media-control";
 export default {
   name: "annotated-media-view",
   components: {MediaControl, AnnotatedImage, MediaSelector},
-  props: ['currentProject', 'socket'],
-  data: function() {
+  props: ['currentProject', 'currentModel', 'socket'],
+  data: function () {
     return {
       current: 0,
       showMediaSelector: true
     };
   },
   computed: {
-    hasPrevious: function() {
+    hasPrevious: function () {
       return this.current > 0;
     },
     hasNext: function() {

webui/src/components/media/annotation-box.vue

@@ -50,7 +50,7 @@
 <script>
 export default {
   name: "annotation-box",
-  props: ['type', 'image', 'position', 'socket', 'boxUrl', 'labels'],
+  props: ['type', 'image', 'position', 'socket', 'boxUrl', 'labels', 'supports'],
   data: function () {
     return {
       showLabelSelection: false
@@ -74,7 +74,7 @@ export default {
       return this.type === 'pipeline';
     },
     labelButton: function () {
-      return this.type !== 'pipeline';
+      return this.supports.includes('labeled-bounding-boxes') && this.type !== 'pipeline';
     },
     labelList: function () {
       return Object.keys(this.labels).map(key => this.labels[key]);

webui/src/components/media/media-control.vue

@@ -33,7 +33,7 @@
       >
     </button-input>
 
-    <button-input type="transparent">
+    <button-input type="transparent" v-if="model.supports.includes('labeled-images')">
       <img alt="label" src="@/assets/icons/tag.svg"
            :class="{tagged: currentLabel}"
            @touchstart.stop @mousedown.stop
@@ -64,7 +64,7 @@ import ButtonRow from "@/components/base/button-row";
 export default {
   name: "media-control",
   components: {ButtonRow, ButtonInput},
-  props: ['hasPrevious', 'hasNext', 'control', 'data', 'project', 'socket'],
+  props: ['hasPrevious', 'hasNext', 'control', 'data', 'project', 'model', 'socket'],
   data: function () {
     return {
       showLabelSelection: false

webui/src/components/projects/project-creation-window.vue

@@ -21,6 +21,17 @@
                     v-model="model">
         Model
       </select-input>
+
+      <div class="features">
+        This model supports:
+
+        <ul>
+          <li v-for="(feature, key) in current.supports"
+              v-bind:key="key">
+            {{ feature }}
+          </li>
+        </ul>
+      </div>
     </div>
 
     <button-row class="footer">
@@ -46,7 +57,7 @@ export default {
   name: "project-creation-window",
   components: {ButtonRow, ButtonInput, SelectInput, TextareaInput, TextInput},
   props: ['status', 'socket'],
-  data: function() {
+  data: function () {
     return {
       name: '',
       nameError: false,
@@ -56,24 +67,42 @@ export default {
     }
   },
   computed: {
-    models: function() {
+    models: function () {
+      const supported = {
+        'bounding-boxes': 'bounding boxes',
+        'labeled-bounding-boxes': 'labeled bounding boxes',
+        'labeled-images': 'labeled images',
+      };
       let result = [];
 
       for (let o in this.status.models) {
         result.push({
-          'name': this.status.models[o].name,
-          'value': this.status.models[o].id
-        });
+              'id': this.status.models[o].id,
+              'name': this.status.models[o].name,
+              'value': this.status.models[o].id,
+              'supports': this.status.models[o].supports
+                  .map(k => k in supported ? supported[k] : 'unknown feature')
+            }
+        );
       }
 
       return result;
+    },
+    current: function () {
+      for (let model of this.models) {
+        if (model.id === this.model) {
+          return model;
+        }
+      }
+
+      return false;
     }
   },
-  created: function() {
+  created: function () {
     this.model = this.models[0].value;
   },
   methods: {
-    create: function() {
+    create: function () {
       this.nameError = !this.name;
       this.descriptionError = !this.description;
 
@@ -120,6 +149,14 @@ export default {
   height: 4rem;
 }
 
+.features {
+  font-size: 80%;
+}
+
+.features ul {
+  margin-top: 0.4rem;
+}
+
 .footer {
   flex-grow: 0;
   padding: 2rem;

webui/src/components/projects/project-data-view-window.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="project-data-view-window">
-    <annotated-media-view :currentProject="currentProject" :socket="socket"/>
+    <annotated-media-view :currentProject="currentProject" :currentModel="currentModel" :socket="socket"/>
   </div>
 </template>
 
@@ -10,7 +10,15 @@ import AnnotatedMediaView from "@/components/media/annotated-media-view";
 export default {
   name: "project-data-view-window",
   components: {AnnotatedMediaView},
-  props: ['status', 'socket', 'currentProject']
+  props: ['status', 'socket', 'currentProject'],
+  computed: {
+    currentModel: function () {
+      if (this.currentProject.pipeline['model-distribution'] in this.status.models)
+        return this.status.models[this.currentProject.pipeline['model-distribution']];
+
+      return false;
+    }
+  }
 }
 </script>