From e9c97d22f7d12611b463143b4c5cb5e71f25121d Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Fri, 24 Dec 2021 15:30:11 +0900
Subject: [PATCH] Add a page for intent detection and slot filling

---
 .../index.vue                                 | 183 ++++++++++++++++++
 1 file changed, 183 insertions(+)
 create mode 100644 frontend/pages/projects/_id/intent-detection-and-slot-filling/index.vue

diff --git a/frontend/pages/projects/_id/intent-detection-and-slot-filling/index.vue b/frontend/pages/projects/_id/intent-detection-and-slot-filling/index.vue
new file mode 100644
index 00000000..bdfd57a7
--- /dev/null
+++ b/frontend/pages/projects/_id/intent-detection-and-slot-filling/index.vue
@@ -0,0 +1,183 @@
+
+<template>
+  <layout-text v-if="doc.id">
+    <template #header>
+      <toolbar-laptop
+        :doc-id="doc.id"
+        :enable-auto-labeling.sync="enableAutoLabeling"
+        :guideline-text="project.guideline"
+        :is-reviewd="doc.isConfirmed"
+        :total="docs.count"
+        class="d-none d-sm-block"
+        @click:clear-label="clear"
+        @click:review="confirm"
+      />
+      <toolbar-mobile
+        :total="docs.count"
+        class="d-flex d-sm-none"
+      />
+    </template>
+    <template #content>
+      <v-card>
+        <v-card-title>
+          <label-group
+            :labels="categoryTypes"
+            :annotations="categories"
+            :single-label="exclusive"
+            @add="addCategory"
+            @remove="removeCategory"
+          />
+        </v-card-title>
+        <v-divider />
+        <div class="annotation-text pa-4">
+          <entity-editor
+            :dark="$vuetify.theme.dark"
+            :rtl="isRTL"
+            :text="doc.text"
+            :entities="spans"
+            :entity-labels="spanTypes"
+            @addEntity="addSpan"
+            @click:entity="updateSpan"
+            @contextmenu:entity="deleteSpan"
+          />
+        </div>
+      </v-card>
+    </template>
+    <template #sidebar>
+      <list-metadata :metadata="doc.meta" />
+    </template>
+  </layout-text>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import EntityEditor from '@/components/tasks/sequenceLabeling/EntityEditor.vue'
+import LayoutText from '@/components/tasks/layout/LayoutText'
+import ListMetadata from '@/components/tasks/metadata/ListMetadata'
+import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
+import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
+import LabelGroup from '@/components/tasks/textClassification/LabelGroup'
+
+export default {
+  components: {
+    EntityEditor,
+    LayoutText,
+    ListMetadata,
+    LabelGroup,
+    ToolbarLaptop,
+    ToolbarMobile
+  },
+
+  layout: 'workspace',
+
+  validate({ params, query }) {
+    return /^\d+$/.test(params.id) && /^\d+$/.test(query.page)
+  },
+
+  data() {
+    return {
+      docs: [],
+      spans: [],
+      categories: [],
+      spanTypes: [],
+      categoryTypes: [],
+      project: {},
+      exclusive: false,
+      enableAutoLabeling: false,
+    }
+  },
+
+  async fetch() {
+    this.docs = await this.$services.example.fetchOne(
+      this.projectId,
+      this.$route.query.page,
+      this.$route.query.q,
+      this.$route.query.isChecked
+    )
+    const doc = this.docs.items[0]
+    await this.listSpan(doc.id)
+    await this.listCategory(doc.id)
+  },
+
+  computed: {
+    ...mapGetters('auth', ['isAuthenticated', 'getUsername', 'getUserId']),
+    ...mapGetters('config', ['isRTL']),
+
+    projectId() {
+      return this.$route.params.id
+    },
+
+    doc() {
+      if (_.isEmpty(this.docs) || this.docs.items.length === 0) {
+        return {}
+      } else {
+        return this.docs.items[0]
+      }
+    }
+  },
+
+  watch: {
+    '$route.query': '$fetch'
+  },
+
+  async created() {
+    this.spanTypes = await this.$services.spanType.list(this.projectId)
+    this.categoryTypes = await this.$services.categoryType.list(this.projectId)
+    this.project = await this.$services.project.findById(this.projectId)
+  },
+
+  methods: {
+    async listSpan(docId) {
+      const spans = await this.$services.sequenceLabeling.list(this.projectId, docId);
+      this.spans = spans;
+    },
+
+    async deleteSpan(id) {
+      await this.$services.sequenceLabeling.delete(this.projectId, this.doc.id, id)
+      await this.listSpan(this.doc.id)
+    },
+
+    async addSpan(startOffset, endOffset, labelId) {
+      await this.$services.sequenceLabeling.create(this.projectId, this.doc.id, labelId, startOffset, endOffset)
+      await this.listSpan(this.doc.id)
+    },
+
+    async updateSpan(annotationId, labelId) {
+      await this.$services.sequenceLabeling.changeLabel(this.projectId, this.doc.id, annotationId, labelId)
+      await this.listSpan(this.doc.id)
+    },
+
+    async listCategory(id) {
+      this.categories = await this.$services.textClassification.list(this.projectId, id)
+    },
+
+    async removeCategory(id) {
+      await this.$services.textClassification.delete(this.projectId, this.doc.id, id)
+      await this.listCategory(this.doc.id)
+    },
+
+    async addCategory(labelId) {
+      await this.$services.textClassification.create(this.projectId, this.doc.id, labelId)
+      await this.listCategory(this.doc.id)
+    },
+
+    async clear() {
+      await this.$services.sequenceLabeling.clear(this.projectId, this.doc.id)
+      await this.listSpan(this.doc.id)
+    },
+
+    async confirm() {
+      await this.$services.example.confirm(this.projectId, this.doc.id)
+      await this.$fetch()
+    }
+  }
+}
+</script>
+<style scoped>
+.annotation-text {
+  font-size: 1.25rem !important;
+  font-weight: 500;
+  line-height: 2rem;
+  font-family: "Roboto", sans-serif !important;
+  opacity: 0.6;
+}
+</style>