Add demo page for image classification

frontend/components/layout/TheHeader.vue

@@ -113,7 +113,8 @@ export default {
         { title: this.$t('home.demoNER'), link: 'named-entity-recognition' },
         { title: this.$t('home.demoSent'), link: 'sentiment-analysis' },
         { title: this.$t('home.demoTranslation'), link: 'translation' },
-        { title: this.$t('home.demoTextToSQL'), link: 'text-to-sql' }
+        { title: this.$t('home.demoTextToSQL'), link: 'text-to-sql' },
+        { title: 'Image Classification', link: 'image-classification' },
       ]
     }
   },

frontend/pages/demo/image-classification/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-main>
+    <v-container fluid>
+      <v-row justify="center">
+        <v-col cols="12" md="9">
+          <v-card>
+            <v-card-title>
+              <label-group
+                :labels="items"
+                :annotations="currentDoc.annotations"
+                :single-label="singleLabel"
+                @add="addLabel"
+                @remove="removeLabel"
+              />
+            </v-card-title>
+            <v-divider />
+            <v-img
+              contain
+              :src="currentDoc.filename"
+              max-height="300"
+              class="grey lighten-2"
+            />
+          </v-card>
+        </v-col>
+        <v-col cols="12" md="3">
+          <list-metadata :metadata="currentDoc.meta" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-main>
+</template>
+
+<script>
+import ListMetadata from '@/components/tasks/metadata/ListMetadata'
+import LabelGroup from '@/components/tasks/textClassification/LabelGroup'
+
+export default {
+  layout: 'demo',
+
+  components: {
+    LabelGroup,
+    ListMetadata
+  },
+
+  data() {
+    return {
+      items: [
+        {
+          id: 4,
+          text: 'Cat',
+          prefixKey: null,
+          suffixKey: 'c',
+          backgroundColor: '#7c20e0',
+          textColor: '#ffffff'
+        },
+        {
+          id: 5,
+          text: 'Dog',
+          prefixKey: null,
+          suffixKey: 'd',
+          backgroundColor: '#fbb028',
+          textColor: '#000000'
+        }
+      ],
+      singleLabel: true,
+      currentDoc: {
+        id: 8,
+        filename: 'https://avatars.githubusercontent.com/u/6737785?v=4',
+        annotations: [
+          {
+            id: 17,
+            prob: 0.0,
+            label: 4,
+            user: 1,
+            document: 8
+          }
+        ],
+        meta: {
+          url: 'https://github.com/Hironsan'
+        },
+        annotation_approver: null,
+      }
+    }
+  },
+
+  methods: {
+    removeLabel(annotationId) {
+      this.currentDoc.annotations = this.currentDoc.annotations.filter(item => item.id !== annotationId)
+    },
+    addLabel(labelId) {
+      const payload = {
+        id: Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER)),
+        label: labelId
+      }
+      this.currentDoc.annotations.push(payload)
+    }
+  }
+}
+</script>