doccano/frontend/components/configAutoLabeling/form/ConfigTemplate.vue

<template>
  <v-stepper-content step="3">
    <v-card>
      <v-card-text class="pa-0">
        <h4 class="text-h6">Set mapping template</h4>
        <p class="font-weight-regular body-1">
          Now, you can successfuly fetch the API response.
          Next, you need to convert API response to doccano format with the mapping template.
        </p>
        <h4 class="text-h6">
          Response
        </h4>
        <v-sheet
          :dark="!$vuetify.theme.dark"
          :light="$vuetify.theme.dark"
          class="mb-5 pa-5"
        >
          <pre>{{ JSON.stringify(response, null, 4) }}</pre>
        </v-sheet>
        <h4 class="text-h6">
          doccano format
        </h4>
        <v-sheet
          :dark="!$vuetify.theme.dark"
          :light="$vuetify.theme.dark"
          class="mb-5 pa-5"
        >
          <pre>Text Classification</pre>
          <pre>[{ "label": "Cat" }, ...]</pre>
          <br>
          <pre>Sequence Labeling</pre>
          <pre>[{ "label": "Cat", "start_offset": 0, "end_offset": 5 }, ...]</pre>
          <br>
          <pre>Sequence to sequence</pre>
          <pre>[{ "text": "Cat" }, ...]</pre>
        </v-sheet>
        <h4 class="text-h6">Mapping template</h4>
        <p class="font-weight-regular body-1">
          You can set mapping template(<a href="https://jinja.palletsprojects.com/en/2.11.x/">Jinja2</a> format) to convert API response to doccano format.
          In the template, you can refer to the API response by the <strong>input</strong> variable.
          If you want to know the Jinja2 notation, please refer to the site.
        </p>
        <v-textarea
          v-model="value"
          outlined
          label="Mapping Template"
        />
        <v-alert
          v-for="(error, index) in errorMessages"
          :key="index"
          prominent
          type="error"
        >
          <v-row align="center">
            <v-col class="grow">
              {{ error }}
            </v-col>
          </v-row>
        </v-alert>
        <h4 class="text-h6">
          Result
        </h4>
        <v-sheet
          :dark="!$vuetify.theme.dark"
          :light="$vuetify.theme.dark"
          class="mb-5 pa-5"
        >
          <pre>{{ JSON.stringify(result, null, 4) }}</pre>
        </v-sheet>
      </v-card-text>
      <v-card-actions class="pa-0">
        <v-spacer />
        <v-btn
          text
          class="text-capitalize"
          @click="$emit('prev')"
        >
          Prev
        </v-btn>
        <v-btn
          v-show="!isPassed"
          color="primary"
          class="text-capitalize"
          @click="$emit('onTest')"
        >
          Test
        </v-btn>
        <v-btn
          v-show="isPassed"
          color="primary"
          class="text-capitalize"
          @click="$emit('next')"
        >
          Next
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-stepper-content>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  props: {
    value: {
      type: String,
      default: '',
      required: true
    },
    errorMessages: {
      type: Array,
      default: () => [],
      required: true
    },
    isPassed: {
      type: Boolean,
      default: false,
      required: true
    },
    response: {
      type: [String, Object, Array],
      default: () => [],
      required: true
    },
    result: {
      type: Array,
      default: () => [],
      required: true
    }
  },

  watch: {
    value(val) {
      this.$emit('input', val)
    }
  }
})
</script>