From e9f4ce25a7ab3b50c8a8c5e52c71418b71669b57 Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Mon, 6 Mar 2023 16:06:25 +0900
Subject: [PATCH 01/10] Remove seq2seq service from seq2seq page

---
 frontend/domain/models/tasks/textLabel.ts      |  4 ++++
 .../_id/sequence-to-sequence/index.vue         | 18 +++++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/domain/models/tasks/textLabel.ts b/frontend/domain/models/tasks/textLabel.ts
index c32a5a57..504c42c8 100644
--- a/frontend/domain/models/tasks/textLabel.ts
+++ b/frontend/domain/models/tasks/textLabel.ts
@@ -1,6 +1,10 @@
 export class TextLabel {
   constructor(readonly id: number, private _text: string, readonly user: number) {}
 
+  public static create(text: string): TextLabel {
+    return new TextLabel(0, text, 0)
+  }
+
   get text(): string {
     return this._text
   }
diff --git a/frontend/pages/projects/_id/sequence-to-sequence/index.vue b/frontend/pages/projects/_id/sequence-to-sequence/index.vue
index e436124c..4806f565 100644
--- a/frontend/pages/projects/_id/sequence-to-sequence/index.vue
+++ b/frontend/pages/projects/_id/sequence-to-sequence/index.vue
@@ -40,6 +40,7 @@ import AnnotationProgress from '@/components/tasks/sidebar/AnnotationProgress.vu
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
 import Seq2seqBox from '~/components/tasks/seq2seq/Seq2seqBox'
+import { TextLabel } from '~/domain/models/tasks/textLabel'
 
 export default {
   components: {
@@ -106,37 +107,40 @@ export default {
 
   async created() {
     this.project = await this.$services.project.findById(this.projectId)
-    this.progress = await this.$$repositories.metrics.fetchMyProgress(this.projectId)
+    this.progress = await this.$repositories.metrics.fetchMyProgress(this.projectId)
   },
 
   methods: {
     async list(docId) {
-      this.annotations = await this.$services.seq2seq.list(this.projectId, docId)
+      this.annotations = await this.$repositories.textLabel.list(this.projectId, docId)
     },
 
     async remove(id) {
-      await this.$services.seq2seq.delete(this.projectId, this.doc.id, id)
+      await this.$repositories.textLabel.delete(this.projectId, this.doc.id, id)
       await this.list(this.doc.id)
     },
 
     async add(text) {
-      await this.$services.seq2seq.create(this.projectId, this.doc.id, text)
+      const label = TextLabel.create(text)
+      await this.$repositories.textLabel.create(this.projectId, this.doc.id, label)
       await this.list(this.doc.id)
     },
 
     async update(annotationId, text) {
-      await this.$services.seq2seq.changeText(this.projectId, this.doc.id, annotationId, text)
+      const label = this.annotations.find((a) => a.id === annotationId)
+      label.updateText(text)
+      await this.$repositories.textLabel.update(this.projectId, this.doc.id, annotationId, label)
       await this.list(this.doc.id)
     },
 
     async clear() {
-      await this.$services.seq2seq.clear(this.projectId, this.doc.id)
+      await this.$repositories.textLabel.clear(this.projectId, this.doc.id)
       await this.list(this.doc.id)
     },
 
     async autoLabel(docId) {
       try {
-        await this.$services.seq2seq.autoLabel(this.projectId, docId)
+        await this.$repositories.textLabel.autoLabel(this.projectId, docId)
       } catch (e) {
         console.log(e.response.data.detail)
       }

From 7edbb9355978a598f002d058e97feb380f35055a Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Mon, 6 Mar 2023 16:10:20 +0900
Subject: [PATCH 02/10] Remove seq2seq service from speech to text page

---
 .../pages/projects/_id/speech-to-text/index.vue  | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/pages/projects/_id/speech-to-text/index.vue b/frontend/pages/projects/_id/speech-to-text/index.vue
index 89743b9a..d2e1cadd 100644
--- a/frontend/pages/projects/_id/speech-to-text/index.vue
+++ b/frontend/pages/projects/_id/speech-to-text/index.vue
@@ -42,6 +42,7 @@ import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
 import AudioViewer from '~/components/tasks/audio/AudioViewer'
 import Seq2seqBox from '~/components/tasks/seq2seq/Seq2seqBox'
+import { TextLabel } from '~/domain/models/tasks/textLabel'
 
 export default {
   components: {
@@ -117,32 +118,35 @@ export default {
 
   methods: {
     async list(itemId) {
-      this.annotations = await this.$services.seq2seq.list(this.projectId, itemId)
+      this.annotations = await this.$repositories.textLabel.list(this.projectId, itemId)
     },
 
     async remove(id) {
-      await this.$services.seq2seq.delete(this.projectId, this.item.id, id)
+      await this.$repositories.textLabel.delete(this.projectId, this.item.id, id)
       await this.list(this.item.id)
     },
 
     async add(text) {
-      await this.$services.seq2seq.create(this.projectId, this.item.id, text)
+      const label = TextLabel.create(text)
+      await this.$repositories.textLabel.create(this.projectId, this.item.id, label)
       await this.list(this.item.id)
     },
 
     async update(annotationId, text) {
-      await this.$services.seq2seq.changeText(this.projectId, this.item.id, annotationId, text)
+      const label = this.annotations.find((a) => a.id === annotationId)
+      label.updateText(text)
+      await this.$repositories.textLabel.update(this.projectId, this.item.id, annotationId, label)
       await this.list(this.item.id)
     },
 
     async clear() {
-      await this.$services.seq2seq.clear(this.projectId, this.item.id)
+      await this.$repositories.textLabel.clear(this.projectId, this.item.id)
       await this.list(this.item.id)
     },
 
     async autoLabel(itemId) {
       try {
-        await this.$services.seq2seq.autoLabel(this.projectId, itemId)
+        await this.$repositories.textLabel.autoLabel(this.projectId, itemId)
       } catch (e) {
         console.log(e.response.data.detail)
       }

From 803a3b9ab1bc706b5698b443b6e189343a7e20ce Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Mon, 6 Mar 2023 16:13:22 +0900
Subject: [PATCH 03/10] Remove seq2seq service from image captioning page

---
 .../projects/_id/image-captioning/index.vue      | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/pages/projects/_id/image-captioning/index.vue b/frontend/pages/projects/_id/image-captioning/index.vue
index c6e41822..8b7b02ca 100644
--- a/frontend/pages/projects/_id/image-captioning/index.vue
+++ b/frontend/pages/projects/_id/image-captioning/index.vue
@@ -51,6 +51,7 @@ import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
 import { useLabelList } from '@/composables/useLabelList'
 import Seq2seqBox from '~/components/tasks/seq2seq/Seq2seqBox'
+import { TextLabel } from '~/domain/models/tasks/textLabel'
 
 export default {
   components: {
@@ -154,32 +155,35 @@ export default {
 
   methods: {
     async list(imageId) {
-      this.annotations = await this.$services.seq2seq.list(this.projectId, imageId)
+      this.annotations = await this.$repositories.textLabel.list(this.projectId, imageId)
     },
 
     async remove(id) {
-      await this.$services.seq2seq.delete(this.projectId, this.image.id, id)
+      await this.$repositories.textLabel.delete(this.projectId, this.image.id, id)
       await this.list(this.image.id)
     },
 
     async add(text) {
-      await this.$services.seq2seq.create(this.projectId, this.image.id, text)
+      const label = TextLabel.create(text)
+      await this.$repositories.textLabel.create(this.projectId, this.image.id, label)
       await this.list(this.image.id)
     },
 
     async update(annotationId, text) {
-      await this.$services.seq2seq.changeText(this.projectId, this.image.id, annotationId, text)
+      const label = this.annotations.find((a) => a.id === annotationId)
+      label.updateText(text)
+      await this.$repositories.textLabel.update(this.projectId, this.image.id, annotationId, label)
       await this.list(this.image.id)
     },
 
     async clear() {
-      await this.$services.seq2seq.clear(this.projectId, this.image.id)
+      await this.$repositories.textLabel.clear(this.projectId, this.image.id)
       await this.list(this.image.id)
     },
 
     async autoLabel(imageId) {
       try {
-        await this.$services.seq2seq.autoLabel(this.projectId, imageId)
+        await this.$repositories.textLabel.autoLabel(this.projectId, imageId)
       } catch (e) {
         console.log(e.response.data.detail)
       }

From cc96a350a7fca386437841fef53fde33f9769118 Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Mon, 6 Mar 2023 16:15:05 +0900
Subject: [PATCH 04/10] Remove seq2seq application service

---
 frontend/plugins/services.ts                  |  3 ---
 .../seq2seq/seq2seqApplicationService.ts      | 26 -------------------
 .../application/tasks/seq2seq/seq2seqData.ts  | 13 ----------
 3 files changed, 42 deletions(-)
 delete mode 100644 frontend/services/application/tasks/seq2seq/seq2seqApplicationService.ts
 delete mode 100644 frontend/services/application/tasks/seq2seq/seq2seqData.ts

diff --git a/frontend/plugins/services.ts b/frontend/plugins/services.ts
index ddeba42e..1c070656 100644
--- a/frontend/plugins/services.ts
+++ b/frontend/plugins/services.ts
@@ -7,7 +7,6 @@ import { ProjectApplicationService } from '@/services/application/project/projec
 import { TagApplicationService } from '@/services/application/tag/tagApplicationService'
 import { BoundingBoxApplicationService } from '@/services/application/tasks/boundingBox/boundingBoxApplicationService'
 import { SegmentationApplicationService } from '@/services/application/tasks/segmentation/segmentationApplicationService'
-import { Seq2seqApplicationService } from '@/services/application/tasks/seq2seq/seq2seqApplicationService'
 import { SequenceLabelingApplicationService } from '@/services/application/tasks/sequenceLabeling/sequenceLabelingApplicationService'
 
 export interface Services {
@@ -17,7 +16,6 @@ export interface Services {
   project: ProjectApplicationService
   example: ExampleApplicationService
   sequenceLabeling: SequenceLabelingApplicationService
-  seq2seq: Seq2seqApplicationService
   option: OptionApplicationService
   tag: TagApplicationService
   bbox: BoundingBoxApplicationService
@@ -41,7 +39,6 @@ const plugin: Plugin = (_, inject) => {
       repositories.span,
       repositories.relation
     ),
-    seq2seq: new Seq2seqApplicationService(repositories.textLabel),
     option: new OptionApplicationService(repositories.option),
     tag: new TagApplicationService(repositories.tag),
     bbox: new BoundingBoxApplicationService(repositories.boundingBox),
diff --git a/frontend/services/application/tasks/seq2seq/seq2seqApplicationService.ts b/frontend/services/application/tasks/seq2seq/seq2seqApplicationService.ts
deleted file mode 100644
index 04d78570..00000000
--- a/frontend/services/application/tasks/seq2seq/seq2seqApplicationService.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { AnnotationApplicationService } from '../annotationApplicationService'
-import { Seq2seqDTO } from './seq2seqData'
-import { TextLabel } from '@/domain/models/tasks/textLabel'
-
-export class Seq2seqApplicationService extends AnnotationApplicationService<TextLabel> {
-  public async list(projectId: string, exampleId: number): Promise<Seq2seqDTO[]> {
-    const items = await this.repository.list(projectId, exampleId)
-    return items.map((item) => new Seq2seqDTO(item))
-  }
-
-  public async create(projectId: string, exampleId: number, text: string): Promise<void> {
-    const item = new TextLabel(0, text, 0)
-    await this.repository.create(projectId, exampleId, item)
-  }
-
-  public async changeText(
-    projectId: string,
-    exampleId: number,
-    labelId: number,
-    text: string
-  ): Promise<void> {
-    const textLabel = await this.repository.find(projectId, exampleId, labelId)
-    textLabel.updateText(text)
-    await this.repository.update(projectId, exampleId, labelId, textLabel)
-  }
-}
diff --git a/frontend/services/application/tasks/seq2seq/seq2seqData.ts b/frontend/services/application/tasks/seq2seq/seq2seqData.ts
deleted file mode 100644
index b2d39380..00000000
--- a/frontend/services/application/tasks/seq2seq/seq2seqData.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { TextLabel } from '@/domain/models/tasks/textLabel'
-
-export class Seq2seqDTO {
-  id: number
-  text: string
-  user: number
-
-  constructor(item: TextLabel) {
-    this.id = item.id
-    this.text = item.text
-    this.user = item.user
-  }
-}

From e264b4c3d167a94b77ec98ee267ffa0029a195ee Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Tue, 14 Mar 2023 16:57:37 +0900
Subject: [PATCH 05/10] Add useTextLabel

---
 frontend/composables/useTextLabel.ts          | 78 ++++++++++++++++
 .../projects/_id/image-captioning/index.vue   | 92 ++++++-------------
 2 files changed, 107 insertions(+), 63 deletions(-)
 create mode 100644 frontend/composables/useTextLabel.ts

diff --git a/frontend/composables/useTextLabel.ts b/frontend/composables/useTextLabel.ts
new file mode 100644
index 00000000..993477d6
--- /dev/null
+++ b/frontend/composables/useTextLabel.ts
@@ -0,0 +1,78 @@
+import { reactive, ref } from '@nuxtjs/composition-api'
+import { TextLabel } from '~/domain/models/tasks/textLabel'
+
+export const useTextLabel = (repository: any, projectId: string) => {
+  const state = reactive({
+    labels: [] as TextLabel[],
+  })
+  const error = ref("")
+
+  const validateText = (text: string) => {
+    if (state.labels.some((label) => label.text === text)) {
+        error.value = "The label already exists."
+        return false
+    }
+    return true
+  }
+
+  const add = async (exampleId: number, text: string) => {
+    const textLabel = TextLabel.create(text)
+    if (!validateText(textLabel.text)) {
+        return
+    }
+    try {
+        await repository.create(projectId, exampleId, textLabel)
+        await list(exampleId)
+    } catch (e: any) {
+        error.value = e.response.data.detail
+    }
+  }
+
+  const list = async (exampleId: number) => {
+    state.labels = await repository.list(projectId, exampleId)
+  }
+
+  const update = async (exampleId: number, labelId: number, text: string) => {
+    if (!validateText(text)) {
+        return
+    }
+    const label = state.labels.find((label) => label.id === labelId)!
+    label.updateText(text)
+    try {
+        await repository.update(projectId, exampleId, labelId, label)
+        await list(exampleId)
+    } catch (e: any) {
+        error.value = e.response.data.detail
+    }
+  }
+
+  const remove = async (exampleId: number, labelId: number) => {
+    await repository.delete(projectId, exampleId, labelId)
+    state.labels = state.labels.filter((label) => label.id !== labelId)
+  }
+
+  const clear = async (exampleId: number) => {
+    await repository.clear(projectId, exampleId)
+    state.labels = []
+  }
+
+  const autoLabel = async (exampleId: number) => {
+    try {
+        await repository.autoLabel(projectId, exampleId)
+        await list(exampleId)
+    } catch (e: any) {
+        error.value = e.response.data.detail
+    }
+  }
+
+  return {
+    state,
+    error,
+    add,
+    list,
+    update,
+    remove,
+    clear,
+    autoLabel
+  }
+}
diff --git a/frontend/pages/projects/_id/image-captioning/index.vue b/frontend/pages/projects/_id/image-captioning/index.vue
index 8b7b02ca..51c82177 100644
--- a/frontend/pages/projects/_id/image-captioning/index.vue
+++ b/frontend/pages/projects/_id/image-captioning/index.vue
@@ -8,7 +8,7 @@
         :is-reviewd="image.isConfirmed"
         :total="images.count"
         class="d-none d-sm-block"
-        @click:clear-label="clear"
+        @click:clear-label="clear(image.id)"
         @click:review="confirm"
       >
         <v-btn-toggle v-model="labelOption" mandatory class="ms-2">
@@ -23,13 +23,20 @@
       <toolbar-mobile :total="images.count" class="d-flex d-sm-none" />
     </template>
     <template #content>
+      <v-snackbar
+        :value="!!error"
+        color="error"
+        timeout="2000"
+      >
+        {{ error }}
+      </v-snackbar>
       <v-card>
         <v-img contain :src="image.url" :max-height="imageSize.height" class="grey lighten-2" />
         <seq2seq-box
-          :annotations="annotations"
-          @delete:annotation="remove"
-          @update:annotation="update"
-          @create:annotation="add"
+          :annotations="labels"
+          @delete:annotation="(labelId) => remove(image.id, labelId)"
+          @update:annotation="(labelId, text) => update(image.id, labelId, text)"
+          @create:annotation="(text) => add(image.id, text)"
         />
       </v-card>
     </template>
@@ -49,9 +56,8 @@ import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import AnnotationProgress from '@/components/tasks/sidebar/AnnotationProgress.vue'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
-import { useLabelList } from '@/composables/useLabelList'
 import Seq2seqBox from '~/components/tasks/seq2seq/Seq2seqBox'
-import { TextLabel } from '~/domain/models/tasks/textLabel'
+import { useTextLabel } from '~/composables/useTextLabel'
 
 export default {
   components: {
@@ -62,6 +68,7 @@ export default {
     ToolbarLaptop,
     ToolbarMobile
   },
+  
   layout: 'workspace',
 
   validate({ params, query }) {
@@ -69,19 +76,26 @@ export default {
   },
 
   setup() {
-    const { app } = useContext()
-    const { state, getLabelList, shortKeys } = useLabelList(app.$services.categoryType)
+    const { app, params } = useContext()
+    const { state, error, autoLabel, list, clear, remove, add, update } = useTextLabel(
+      app.$repositories.textLabel,
+      params.value.id
+    )
 
     return {
       ...toRefs(state),
-      getLabelList,
-      shortKeys
+      error,
+      add,
+      autoLabel,
+      list,
+      clear,
+      remove,
+      update
     }
   },
 
   data() {
     return {
-      annotations: [],
       images: [],
       project: {},
       enableAutoLabeling: false,
@@ -92,19 +106,7 @@ export default {
       },
       mdiText,
       mdiFormatListBulleted,
-      progress: {},
-      headers: [
-        {
-          text: 'Text',
-          align: 'left',
-          value: 'text'
-        },
-        {
-          text: 'Actions',
-          align: 'right',
-          value: 'action'
-        }
-      ]
+      progress: {}
     }
   },
 
@@ -120,8 +122,9 @@ export default {
     this.setImageSize(image)
     if (this.enableAutoLabeling) {
       await this.autoLabel(image.id)
+    } else {
+      await this.list(image.id)
     }
-    await this.list(image.id)
   },
 
   computed: {
@@ -142,53 +145,16 @@ export default {
     async enableAutoLabeling(val) {
       if (val && !this.image.isConfirmed) {
         await this.autoLabel(this.image.id)
-        await this.list(this.image.id)
       }
     }
   },
 
   async created() {
-    this.getLabelList(this.projectId)
     this.project = await this.$services.project.findById(this.projectId)
     this.progress = await this.$repositories.metrics.fetchMyProgress(this.projectId)
   },
 
   methods: {
-    async list(imageId) {
-      this.annotations = await this.$repositories.textLabel.list(this.projectId, imageId)
-    },
-
-    async remove(id) {
-      await this.$repositories.textLabel.delete(this.projectId, this.image.id, id)
-      await this.list(this.image.id)
-    },
-
-    async add(text) {
-      const label = TextLabel.create(text)
-      await this.$repositories.textLabel.create(this.projectId, this.image.id, label)
-      await this.list(this.image.id)
-    },
-
-    async update(annotationId, text) {
-      const label = this.annotations.find((a) => a.id === annotationId)
-      label.updateText(text)
-      await this.$repositories.textLabel.update(this.projectId, this.image.id, annotationId, label)
-      await this.list(this.image.id)
-    },
-
-    async clear() {
-      await this.$repositories.textLabel.clear(this.projectId, this.image.id)
-      await this.list(this.image.id)
-    },
-
-    async autoLabel(imageId) {
-      try {
-        await this.$repositories.textLabel.autoLabel(this.projectId, imageId)
-      } catch (e) {
-        console.log(e.response.data.detail)
-      }
-    },
-
     async updateProgress() {
       this.progress = await this.$repositories.metrics.fetchMyProgress(this.projectId)
     },

From 7f4a0384d5a7acab3694edba13accf3b8820cf90 Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Thu, 16 Mar 2023 11:53:36 +0900
Subject: [PATCH 06/10] Use useExampleItem in caption page

---
 frontend/composables/useTextLabel.ts          |  31 ++--
 .../projects/_id/image-captioning/index.vue   | 171 +++++++-----------
 2 files changed, 79 insertions(+), 123 deletions(-)

diff --git a/frontend/composables/useTextLabel.ts b/frontend/composables/useTextLabel.ts
index 993477d6..04a9584d 100644
--- a/frontend/composables/useTextLabel.ts
+++ b/frontend/composables/useTextLabel.ts
@@ -1,16 +1,16 @@
-import { reactive, ref } from '@nuxtjs/composition-api'
+import { reactive } from '@nuxtjs/composition-api'
 import { TextLabel } from '~/domain/models/tasks/textLabel'
 
 export const useTextLabel = (repository: any, projectId: string) => {
   const state = reactive({
     labels: [] as TextLabel[],
+    error: ''
   })
-  const error = ref("")
 
   const validateText = (text: string) => {
     if (state.labels.some((label) => label.text === text)) {
-        error.value = "The label already exists."
-        return false
+      state.error = 'The label already exists.'
+      return false
     }
     return true
   }
@@ -18,13 +18,13 @@ export const useTextLabel = (repository: any, projectId: string) => {
   const add = async (exampleId: number, text: string) => {
     const textLabel = TextLabel.create(text)
     if (!validateText(textLabel.text)) {
-        return
+      return
     }
     try {
-        await repository.create(projectId, exampleId, textLabel)
-        await list(exampleId)
+      await repository.create(projectId, exampleId, textLabel)
+      await list(exampleId)
     } catch (e: any) {
-        error.value = e.response.data.detail
+      state.error = e.response.data.detail
     }
   }
 
@@ -34,15 +34,15 @@ export const useTextLabel = (repository: any, projectId: string) => {
 
   const update = async (exampleId: number, labelId: number, text: string) => {
     if (!validateText(text)) {
-        return
+      return
     }
     const label = state.labels.find((label) => label.id === labelId)!
     label.updateText(text)
     try {
-        await repository.update(projectId, exampleId, labelId, label)
-        await list(exampleId)
+      await repository.update(projectId, exampleId, labelId, label)
+      await list(exampleId)
     } catch (e: any) {
-        error.value = e.response.data.detail
+      state.error = e.response.data.detail
     }
   }
 
@@ -58,16 +58,15 @@ export const useTextLabel = (repository: any, projectId: string) => {
 
   const autoLabel = async (exampleId: number) => {
     try {
-        await repository.autoLabel(projectId, exampleId)
-        await list(exampleId)
+      await repository.autoLabel(projectId, exampleId)
+      await list(exampleId)
     } catch (e: any) {
-        error.value = e.response.data.detail
+      state.error = e.response.data.detail
     }
   }
 
   return {
     state,
-    error,
     add,
     list,
     update,
diff --git a/frontend/pages/projects/_id/image-captioning/index.vue b/frontend/pages/projects/_id/image-captioning/index.vue
index 51c82177..b134d680 100644
--- a/frontend/pages/projects/_id/image-captioning/index.vue
+++ b/frontend/pages/projects/_id/image-captioning/index.vue
@@ -1,62 +1,48 @@
 <template>
-  <layout-text v-if="image.id">
+  <layout-text v-if="example.id">
     <template #header>
       <toolbar-laptop
-        :doc-id="image.id"
+        :doc-id="example.id"
         :enable-auto-labeling.sync="enableAutoLabeling"
         :guideline-text="project.guideline"
-        :is-reviewd="image.isConfirmed"
-        :total="images.count"
+        :is-reviewd="example.isConfirmed"
+        :total="totalExample"
         class="d-none d-sm-block"
-        @click:clear-label="clear(image.id)"
-        @click:review="confirm"
-      >
-        <v-btn-toggle v-model="labelOption" mandatory class="ms-2">
-          <v-btn icon>
-            <v-icon>{{ mdiFormatListBulleted }}</v-icon>
-          </v-btn>
-          <v-btn icon>
-            <v-icon>{{ mdiText }}</v-icon>
-          </v-btn>
-        </v-btn-toggle>
-      </toolbar-laptop>
-      <toolbar-mobile :total="images.count" class="d-flex d-sm-none" />
+        @click:clear-label="clear(example.id)"
+        @click:review="confirm(projectId)"
+      />
+      <toolbar-mobile :total="totalExample" class="d-flex d-sm-none" />
     </template>
     <template #content>
-      <v-snackbar
-        :value="!!error"
-        color="error"
-        timeout="2000"
-      >
+      <v-snackbar :value="!!error" color="error" timeout="2000">
         {{ error }}
       </v-snackbar>
       <v-card>
-        <v-img contain :src="image.url" :max-height="imageSize.height" class="grey lighten-2" />
+        <v-img contain :src="example.url" :max-height="imageSize.height" class="grey lighten-2" />
         <seq2seq-box
           :annotations="labels"
-          @delete:annotation="(labelId) => remove(image.id, labelId)"
-          @update:annotation="(labelId, text) => update(image.id, labelId, text)"
-          @create:annotation="(text) => add(image.id, text)"
+          @delete:annotation="(labelId) => remove(example.id, labelId)"
+          @update:annotation="(labelId, text) => update(example.id, labelId, text)"
+          @create:annotation="(text) => add(example.id, text)"
         />
       </v-card>
     </template>
     <template #sidebar>
       <annotation-progress :progress="progress" />
-      <list-metadata :metadata="image.meta" class="mt-4" />
+      <list-metadata :metadata="example.meta" class="mt-4" />
     </template>
   </layout-text>
 </template>
 
 <script>
-import { mdiFormatListBulleted, mdiText } from '@mdi/js'
-import { toRefs, useContext } from '@nuxtjs/composition-api'
-import _ from 'lodash'
+import { reactive, ref, toRefs, useContext, useFetch, watch } from '@nuxtjs/composition-api'
 import LayoutText from '@/components/tasks/layout/LayoutText'
 import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import AnnotationProgress from '@/components/tasks/sidebar/AnnotationProgress.vue'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
 import Seq2seqBox from '~/components/tasks/seq2seq/Seq2seqBox'
+import { useExampleItem } from '~/composables/useExampleItem'
 import { useTextLabel } from '~/composables/useTextLabel'
 
 export default {
@@ -68,7 +54,7 @@ export default {
     ToolbarLaptop,
     ToolbarMobile
   },
-  
+
   layout: 'workspace',
 
   validate({ params, query }) {
@@ -76,54 +62,69 @@ export default {
   },
 
   setup() {
-    const { app, params } = useContext()
-    const { state, error, autoLabel, list, clear, remove, add, update } = useTextLabel(
+    const { app, params, query } = useContext()
+    const projectId = params.value.id
+    const { state, autoLabel, list, clear, remove, add, update } = useTextLabel(
       app.$repositories.textLabel,
-      params.value.id
+      projectId
     )
+    const { state: exampleState, confirm, getExample, updateProgress } = useExampleItem()
+    const enableAutoLabeling = ref(false)
+    const imageSize = reactive({
+      height: 0,
+      width: 0
+    })
+
+    updateProgress(projectId)
+
+    const setImageSize = (val) => {
+      const img = new Image()
+      img.onload = function () {
+        imageSize.height = this.height
+        imageSize.width = this.width
+      }
+      img.src = val.url
+    }
+
+    const { fetch } = useFetch(async () => {
+      await getExample(projectId, query.value)
+      setImageSize(exampleState.example)
+      if (enableAutoLabeling.value) {
+        try {
+          await autoLabel(projectId, exampleState.example.id)
+        } catch (e) {
+          enableAutoLabeling.value = false
+        }
+      } else {
+        await list(exampleState.example.id)
+      }
+    })
+    watch(query, fetch)
+    watch(enableAutoLabeling, async (val) => {
+      if (val && !exampleState.example.isConfirmed) {
+        await autoLabel(exampleState.example.id)
+      }
+    })
 
     return {
       ...toRefs(state),
-      error,
+      ...toRefs(exampleState),
       add,
       autoLabel,
       list,
       clear,
       remove,
-      update
+      update,
+      confirm,
+      getExample,
+      enableAutoLabeling,
+      imageSize
     }
   },
 
   data() {
     return {
-      images: [],
       project: {},
-      enableAutoLabeling: false,
-      labelOption: 0,
-      imageSize: {
-        height: 0,
-        width: 0
-      },
-      mdiText,
-      mdiFormatListBulleted,
-      progress: {}
-    }
-  },
-
-  async fetch() {
-    this.images = await this.$services.example.fetchOne(
-      this.projectId,
-      this.$route.query.page,
-      this.$route.query.q,
-      this.$route.query.isChecked,
-      this.$route.query.ordering
-    )
-    const image = this.images.items[0]
-    this.setImageSize(image)
-    if (this.enableAutoLabeling) {
-      await this.autoLabel(image.id)
-    } else {
-      await this.list(image.id)
     }
   },
 
@@ -131,55 +132,11 @@ export default {
     projectId() {
       return this.$route.params.id
     },
-    image() {
-      if (_.isEmpty(this.images) || this.images.items.length === 0) {
-        return {}
-      } else {
-        return this.images.items[0]
-      }
-    }
-  },
-
-  watch: {
-    '$route.query': '$fetch',
-    async enableAutoLabeling(val) {
-      if (val && !this.image.isConfirmed) {
-        await this.autoLabel(this.image.id)
-      }
-    }
   },
 
   async created() {
     this.project = await this.$services.project.findById(this.projectId)
     this.progress = await this.$repositories.metrics.fetchMyProgress(this.projectId)
   },
-
-  methods: {
-    async updateProgress() {
-      this.progress = await this.$repositories.metrics.fetchMyProgress(this.projectId)
-    },
-
-    async confirm() {
-      await this.$services.example.confirm(this.projectId, this.image.id)
-      await this.$fetch()
-      this.updateProgress()
-    },
-
-    setImageSize(val) {
-      const img = new Image()
-      const self = this
-      img.onload = function () {
-        self.imageSize.height = this.height
-        self.imageSize.width = this.width
-      }
-      img.src = val.url
-    }
-  }
 }
 </script>
-
-<style scoped>
-.text-pre-wrap {
-  white-space: pre-wrap !important;
-}
-</style>

From bb0f741bbb45bfb15d95c29bb57c2d403078e62e Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Thu, 16 Mar 2023 13:32:09 +0900
Subject: [PATCH 07/10] Use useProjectItem in caption page

---
 .../projects/_id/image-captioning/index.vue   | 26 +++++--------------
 1 file changed, 7 insertions(+), 19 deletions(-)

diff --git a/frontend/pages/projects/_id/image-captioning/index.vue b/frontend/pages/projects/_id/image-captioning/index.vue
index b134d680..31f200a3 100644
--- a/frontend/pages/projects/_id/image-captioning/index.vue
+++ b/frontend/pages/projects/_id/image-captioning/index.vue
@@ -43,6 +43,7 @@ import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
 import Seq2seqBox from '~/components/tasks/seq2seq/Seq2seqBox'
 import { useExampleItem } from '~/composables/useExampleItem'
+import { useProjectItem } from '~/composables/useProjectItem'
 import { useTextLabel } from '~/composables/useTextLabel'
 
 export default {
@@ -64,6 +65,7 @@ export default {
   setup() {
     const { app, params, query } = useContext()
     const projectId = params.value.id
+    const { state: projectState, getProjectById } = useProjectItem()
     const { state, autoLabel, list, clear, remove, add, update } = useTextLabel(
       app.$repositories.textLabel,
       projectId
@@ -75,6 +77,7 @@ export default {
       width: 0
     })
 
+    getProjectById(projectId)
     updateProgress(projectId)
 
     const setImageSize = (val) => {
@@ -109,6 +112,7 @@ export default {
     return {
       ...toRefs(state),
       ...toRefs(exampleState),
+      ...toRefs(projectState),
       add,
       autoLabel,
       list,
@@ -118,25 +122,9 @@ export default {
       confirm,
       getExample,
       enableAutoLabeling,
-      imageSize
-    }
-  },
-
-  data() {
-    return {
-      project: {},
+      imageSize,
+      projectId
     }
-  },
-
-  computed: {
-    projectId() {
-      return this.$route.params.id
-    },
-  },
-
-  async created() {
-    this.project = await this.$services.project.findById(this.projectId)
-    this.progress = await this.$repositories.metrics.fetchMyProgress(this.projectId)
-  },
+  }
 }
 </script>

From cbe05d3d25595e6fcd540e41243256a4d50b79ca Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Wed, 31 May 2023 14:51:56 +0900
Subject: [PATCH 08/10] Apply linter

---
 .../projects/_id/image-captioning/index.vue     | 17 ++++++++++-------
 frontend/pages/projects/_id/labels/import.vue   |  2 +-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/pages/projects/_id/image-captioning/index.vue b/frontend/pages/projects/_id/image-captioning/index.vue
index 31f200a3..26a707ba 100644
--- a/frontend/pages/projects/_id/image-captioning/index.vue
+++ b/frontend/pages/projects/_id/image-captioning/index.vue
@@ -66,10 +66,15 @@ export default {
     const { app, params, query } = useContext()
     const projectId = params.value.id
     const { state: projectState, getProjectById } = useProjectItem()
-    const { state, autoLabel, list, clear, remove, add, update } = useTextLabel(
-      app.$repositories.textLabel,
-      projectId
-    )
+    const {
+      state: labelState,
+      autoLabel,
+      list,
+      clear,
+      remove,
+      add,
+      update
+    } = useTextLabel(app.$repositories.textLabel, projectId)
     const { state: exampleState, confirm, getExample, updateProgress } = useExampleItem()
     const enableAutoLabeling = ref(false)
     const imageSize = reactive({
@@ -110,17 +115,15 @@ export default {
     })
 
     return {
-      ...toRefs(state),
+      ...toRefs(labelState),
       ...toRefs(exampleState),
       ...toRefs(projectState),
       add,
-      autoLabel,
       list,
       clear,
       remove,
       update,
       confirm,
-      getExample,
       enableAutoLabeling,
       imageSize,
       projectId
diff --git a/frontend/pages/projects/_id/labels/import.vue b/frontend/pages/projects/_id/labels/import.vue
index d837254e..0c8f98f6 100644
--- a/frontend/pages/projects/_id/labels/import.vue
+++ b/frontend/pages/projects/_id/labels/import.vue
@@ -54,7 +54,7 @@ export default Vue.extend({
       try {
         await this.service.upload(this.projectId, file)
         this.$router.push(`/projects/${this.projectId}/labels`)
-      } catch (e) {
+      } catch (e: any) {
         this.errorMessage = e.message
       }
     },

From 43502bafe42ddc6faa22f81cfd68777c2105f686 Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Wed, 31 May 2023 15:17:58 +0900
Subject: [PATCH 09/10] Use composition API in sequence to sequence page

---
 .../_id/sequence-to-sequence/index.vue        | 173 +++++++-----------
 1 file changed, 64 insertions(+), 109 deletions(-)

diff --git a/frontend/pages/projects/_id/sequence-to-sequence/index.vue b/frontend/pages/projects/_id/sequence-to-sequence/index.vue
index 4806f565..12473e69 100644
--- a/frontend/pages/projects/_id/sequence-to-sequence/index.vue
+++ b/frontend/pages/projects/_id/sequence-to-sequence/index.vue
@@ -1,46 +1,48 @@
 <template>
-  <layout-text v-if="doc.id">
+  <layout-text v-if="example.id">
     <template #header>
       <toolbar-laptop
-        :doc-id="doc.id"
+        :doc-id="example.id"
         :enable-auto-labeling.sync="enableAutoLabeling"
         :guideline-text="project.guideline"
-        :is-reviewd="doc.isConfirmed"
-        :total="docs.count"
+        :is-reviewd="example.isConfirmed"
+        :total="totalExample"
         class="d-none d-sm-block"
-        @click:clear-label="clear"
-        @click:review="confirm"
+        @click:clear-label="clear(example.id)"
+        @click:review="confirm(projectId)"
       />
-      <toolbar-mobile :total="docs.count" class="d-flex d-sm-none" />
+      <toolbar-mobile :total="totalExample" class="d-flex d-sm-none" />
     </template>
     <template #content>
       <v-card class="mb-5">
-        <v-card-text class="title text-pre-wrap" v-text="doc.text" />
+        <v-card-text class="title text-pre-wrap">{{ example.text }}</v-card-text>
       </v-card>
       <seq2seq-box
-        :text="doc.text"
-        :annotations="annotations"
-        @delete:annotation="remove"
-        @update:annotation="update"
-        @create:annotation="add"
+        :text="example.text"
+        :annotations="labels"
+        @delete:annotation="(labelId) => remove(example.id, labelId)"
+        @update:annotation="(labelId, text) => update(example.id, labelId, text)"
+        @create:annotation="(text) => add(example.id, text)"
       />
     </template>
     <template #sidebar>
       <annotation-progress :progress="progress" />
-      <list-metadata :metadata="doc.meta" class="mt-4" />
+      <list-metadata :metadata="example.meta" class="mt-4" />
     </template>
   </layout-text>
 </template>
 
 <script>
-import _ from 'lodash'
+import { ref, toRefs, useContext, useFetch, watch } from '@nuxtjs/composition-api'
 import LayoutText from '@/components/tasks/layout/LayoutText'
 import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import AnnotationProgress from '@/components/tasks/sidebar/AnnotationProgress.vue'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
 import Seq2seqBox from '~/components/tasks/seq2seq/Seq2seqBox'
-import { TextLabel } from '~/domain/models/tasks/textLabel'
+import { useExampleItem } from '~/composables/useExampleItem'
+import { useProjectItem } from '~/composables/useProjectItem'
+import { useTextLabel } from '~/composables/useTextLabel'
 
 export default {
   components: {
@@ -57,103 +59,56 @@ export default {
     return /^\d+$/.test(params.id) && /^\d+$/.test(query.page)
   },
 
-  data() {
-    return {
-      annotations: [],
-      docs: [],
-      project: {},
-      enableAutoLabeling: false,
-      progress: {}
-    }
-  },
-
-  async fetch() {
-    this.docs = await this.$services.example.fetchOne(
-      this.projectId,
-      this.$route.query.page,
-      this.$route.query.q,
-      this.$route.query.isChecked,
-      this.$route.query.ordering
-    )
-    const doc = this.docs.items[0]
-    if (this.enableAutoLabeling) {
-      await this.autoLabel(doc.id)
-    }
-    await this.list(doc.id)
-  },
-
-  computed: {
-    projectId() {
-      return this.$route.params.id
-    },
-    doc() {
-      if (_.isEmpty(this.docs) || this.docs.items.length === 0) {
-        return {}
+  setup() {
+    const { app, params, query } = useContext()
+    const projectId = params.value.id
+    const { state: projectState, getProjectById } = useProjectItem()
+    const {
+      state: labelState,
+      autoLabel,
+      list,
+      clear,
+      remove,
+      add,
+      update
+    } = useTextLabel(app.$repositories.textLabel, projectId)
+    const { state: exampleState, confirm, getExample, updateProgress } = useExampleItem()
+    const enableAutoLabeling = ref(false)
+
+    getProjectById(projectId)
+    updateProgress(projectId)
+
+    const { fetch } = useFetch(async () => {
+      await getExample(projectId, query.value)
+      if (enableAutoLabeling.value) {
+        try {
+          await autoLabel(projectId, exampleState.example.id)
+        } catch (e) {
+          enableAutoLabeling.value = false
+        }
       } else {
-        return this.docs.items[0]
+        await list(exampleState.example.id)
       }
-    }
-  },
-
-  watch: {
-    '$route.query': '$fetch',
-    async enableAutoLabeling(val) {
-      if (val && !this.doc.isConfirmed) {
-        await this.autoLabel(this.doc.id)
-        await this.list(this.doc.id)
+    })
+    watch(query, fetch)
+    watch(enableAutoLabeling, async (val) => {
+      if (val && !exampleState.example.isConfirmed) {
+        await autoLabel(exampleState.example.id)
       }
-    }
-  },
+    })
 
-  async created() {
-    this.project = await this.$services.project.findById(this.projectId)
-    this.progress = await this.$repositories.metrics.fetchMyProgress(this.projectId)
-  },
-
-  methods: {
-    async list(docId) {
-      this.annotations = await this.$repositories.textLabel.list(this.projectId, docId)
-    },
-
-    async remove(id) {
-      await this.$repositories.textLabel.delete(this.projectId, this.doc.id, id)
-      await this.list(this.doc.id)
-    },
-
-    async add(text) {
-      const label = TextLabel.create(text)
-      await this.$repositories.textLabel.create(this.projectId, this.doc.id, label)
-      await this.list(this.doc.id)
-    },
-
-    async update(annotationId, text) {
-      const label = this.annotations.find((a) => a.id === annotationId)
-      label.updateText(text)
-      await this.$repositories.textLabel.update(this.projectId, this.doc.id, annotationId, label)
-      await this.list(this.doc.id)
-    },
-
-    async clear() {
-      await this.$repositories.textLabel.clear(this.projectId, this.doc.id)
-      await this.list(this.doc.id)
-    },
-
-    async autoLabel(docId) {
-      try {
-        await this.$repositories.textLabel.autoLabel(this.projectId, docId)
-      } catch (e) {
-        console.log(e.response.data.detail)
-      }
-    },
-
-    async updateProgress() {
-      this.progress = await this.$repositories.metrics.fetchMyProgress(this.projectId)
-    },
-
-    async confirm() {
-      await this.$services.example.confirm(this.projectId, this.doc.id)
-      await this.$fetch()
-      this.updateProgress()
+    return {
+      ...toRefs(labelState),
+      ...toRefs(exampleState),
+      ...toRefs(projectState),
+      add,
+      list,
+      clear,
+      remove,
+      update,
+      confirm,
+      enableAutoLabeling,
+      projectId
     }
   }
 }

From 4945903a1a4ba73f383dd15a4752d8b9394bee38 Mon Sep 17 00:00:00 2001
From: Hironsan <hiroki.nakayama.py@gmail.com>
Date: Wed, 31 May 2023 15:34:34 +0900
Subject: [PATCH 10/10] Use composition API in speech to text page

---
 .../projects/_id/speech-to-text/index.vue     | 186 +++++++-----------
 1 file changed, 68 insertions(+), 118 deletions(-)

diff --git a/frontend/pages/projects/_id/speech-to-text/index.vue b/frontend/pages/projects/_id/speech-to-text/index.vue
index d2e1cadd..83099b9d 100644
--- a/frontend/pages/projects/_id/speech-to-text/index.vue
+++ b/frontend/pages/projects/_id/speech-to-text/index.vue
@@ -1,40 +1,40 @@
 <template>
-  <layout-text v-if="item.id">
+  <layout-text v-if="example.id">
     <template #header>
       <toolbar-laptop
-        :doc-id="item.id"
+        :doc-id="example.id"
         :enable-auto-labeling.sync="enableAutoLabeling"
         :guideline-text="project.guideline"
-        :is-reviewd="item.isConfirmed"
-        :total="items.count"
+        :is-reviewd="example.isConfirmed"
+        :total="totalExample"
         class="d-none d-sm-block"
-        @click:clear-label="clear"
-        @click:review="confirm"
+        @click:clear-label="clear(example.id)"
+        @click:review="confirm(projectId)"
       />
-      <toolbar-mobile :total="items.count" class="d-flex d-sm-none" />
+      <toolbar-mobile :total="totalExample" class="d-flex d-sm-none" />
     </template>
     <template #content>
       <v-overlay :value="isLoading">
         <v-progress-circular indeterminate size="64" />
       </v-overlay>
-      <audio-viewer :source="item.url" class="mb-5" />
+      <audio-viewer :source="example.url" class="mb-5" />
       <seq2seq-box
-        :text="item.text"
-        :annotations="annotations"
-        @delete:annotation="remove"
-        @update:annotation="update"
-        @create:annotation="add"
+        :text="example.text"
+        :annotations="labels"
+        @delete:annotation="(labelId) => remove(example.id, labelId)"
+        @update:annotation="(labelId, text) => update(example.id, labelId, text)"
+        @create:annotation="(text) => add(example.id, text)"
       />
     </template>
     <template #sidebar>
       <annotation-progress :progress="progress" />
-      <list-metadata :metadata="item.meta" class="mt-4" />
+      <list-metadata :metadata="example.meta" class="mt-4" />
     </template>
   </layout-text>
 </template>
 
 <script>
-import _ from 'lodash'
+import { ref, toRefs, useContext, useFetch, watch } from '@nuxtjs/composition-api'
 import LayoutText from '@/components/tasks/layout/LayoutText'
 import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import AnnotationProgress from '@/components/tasks/sidebar/AnnotationProgress.vue'
@@ -42,7 +42,9 @@ import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
 import AudioViewer from '~/components/tasks/audio/AudioViewer'
 import Seq2seqBox from '~/components/tasks/seq2seq/Seq2seqBox'
-import { TextLabel } from '~/domain/models/tasks/textLabel'
+import { useExampleItem } from '~/composables/useExampleItem'
+import { useProjectItem } from '~/composables/useProjectItem'
+import { useTextLabel } from '~/composables/useTextLabel'
 
 export default {
   components: {
@@ -60,113 +62,61 @@ export default {
     return /^\d+$/.test(params.id) && /^\d+$/.test(query.page)
   },
 
-  data() {
-    return {
-      annotations: [],
-      items: [],
-      project: {},
-      enableAutoLabeling: false,
-      isLoading: false,
-      progress: {}
-    }
-  },
-
-  async fetch() {
-    this.isLoading = true
-    this.items = await this.$services.example.fetchOne(
-      this.projectId,
-      this.$route.query.page,
-      this.$route.query.q,
-      this.$route.query.isChecked,
-      this.$route.query.ordering
-    )
-    const item = this.items.items[0]
-    if (this.enableAutoLabeling) {
-      await this.autoLabel(item.id)
-    }
-    await this.list(item.id)
-    this.isLoading = false
-  },
-
-  computed: {
-    projectId() {
-      return this.$route.params.id
-    },
-    item() {
-      if (_.isEmpty(this.items) || this.items.items.length === 0) {
-        return {}
+  setup() {
+    const { app, params, query } = useContext()
+    const projectId = params.value.id
+    const { state: projectState, getProjectById } = useProjectItem()
+    const {
+      state: labelState,
+      autoLabel,
+      list,
+      clear,
+      remove,
+      add,
+      update
+    } = useTextLabel(app.$repositories.textLabel, projectId)
+    const { state: exampleState, confirm, getExample, updateProgress } = useExampleItem()
+    const enableAutoLabeling = ref(false)
+    const isLoading = ref(false)
+
+    getProjectById(projectId)
+    updateProgress(projectId)
+
+    const { fetch } = useFetch(async () => {
+      isLoading.value = true
+      await getExample(projectId, query.value)
+      if (enableAutoLabeling.value) {
+        try {
+          await autoLabel(projectId, exampleState.example.id)
+        } catch (e) {
+          enableAutoLabeling.value = false
+        }
       } else {
-        return this.items.items[0]
+        await list(exampleState.example.id)
       }
-    }
-  },
-
-  watch: {
-    '$route.query': '$fetch',
-    async enableAutoLabeling(val) {
-      if (val && !this.item.isConfirmed) {
-        await this.autoLabel(this.item.id)
-        await this.list(this.item.id)
+      isLoading.value = false
+    })
+    watch(query, fetch)
+    watch(enableAutoLabeling, async (val) => {
+      if (val && !exampleState.example.isConfirmed) {
+        await autoLabel(exampleState.example.id)
       }
-    }
-  },
+    })
 
-  async created() {
-    this.project = await this.$services.project.findById(this.projectId)
-    this.progress = await this.$repositories.metrics.fetchMyProgress(this.projectId)
-  },
-
-  methods: {
-    async list(itemId) {
-      this.annotations = await this.$repositories.textLabel.list(this.projectId, itemId)
-    },
-
-    async remove(id) {
-      await this.$repositories.textLabel.delete(this.projectId, this.item.id, id)
-      await this.list(this.item.id)
-    },
-
-    async add(text) {
-      const label = TextLabel.create(text)
-      await this.$repositories.textLabel.create(this.projectId, this.item.id, label)
-      await this.list(this.item.id)
-    },
-
-    async update(annotationId, text) {
-      const label = this.annotations.find((a) => a.id === annotationId)
-      label.updateText(text)
-      await this.$repositories.textLabel.update(this.projectId, this.item.id, annotationId, label)
-      await this.list(this.item.id)
-    },
-
-    async clear() {
-      await this.$repositories.textLabel.clear(this.projectId, this.item.id)
-      await this.list(this.item.id)
-    },
-
-    async autoLabel(itemId) {
-      try {
-        await this.$repositories.textLabel.autoLabel(this.projectId, itemId)
-      } catch (e) {
-        console.log(e.response.data.detail)
-      }
-    },
-
-    async updateProgress() {
-      this.progress = await this.$repositories.metrics.fetchMyProgress(this.projectId)
-    },
-
-    async confirm() {
-      await this.$services.example.confirm(this.projectId, this.item.id)
-      await this.$fetch()
-      this.updateProgress()
+    return {
+      ...toRefs(labelState),
+      ...toRefs(exampleState),
+      ...toRefs(projectState),
+      add,
+      list,
+      clear,
+      remove,
+      update,
+      confirm,
+      enableAutoLabeling,
+      projectId,
+      isLoading
     }
   }
 }
 </script>
-
-<style scoped>
-.text-pre-wrap {
-  white-space: pre-wrap !important;
-}
-</style>