mirror of https://github.com/doccano/doccano.git
Hironsan
3 years ago
15 changed files with 717 additions and 258 deletions
Split View
Diff Options
-
331frontend/components/containers/settings/ConfigCreationForm.vue
-
11frontend/components/containers/settings/ConfigList.vue
-
45frontend/components/containers/settings/form/ConfigHeader.vue
-
91frontend/components/containers/settings/form/ConfigLabelMapping.vue
-
131frontend/components/containers/settings/form/ConfigParameters.vue
-
131frontend/components/containers/settings/form/ConfigTemplate.vue
-
71frontend/components/containers/settings/form/ConfigTemplateName.vue
-
21frontend/components/containers/settings/form/LabelMapping.vue
-
2frontend/components/containers/settings/form/ObjectField.vue
-
25frontend/models/config/config-item-list.ts
-
20frontend/models/config/config-template.ts
-
31frontend/repositories/config/api.ts
-
8frontend/repositories/config/interface.ts
-
6frontend/rules/index.js
-
51frontend/services/application/config.service.ts
@ -0,0 +1,45 @@ |
|||
<template> |
|||
<v-stepper-header> |
|||
<v-stepper-step |
|||
:complete="step > 1" |
|||
step="1" |
|||
> |
|||
Select a template |
|||
</v-stepper-step> |
|||
<v-divider /> |
|||
<v-stepper-step |
|||
:complete="step > 2" |
|||
step="2" |
|||
> |
|||
Set parameters |
|||
</v-stepper-step> |
|||
<v-divider /> |
|||
<v-stepper-step |
|||
:complete="step > 3" |
|||
step="3" |
|||
> |
|||
Set a template |
|||
</v-stepper-step> |
|||
<v-divider /> |
|||
<v-stepper-step |
|||
:complete="step > 4" |
|||
step="4" |
|||
> |
|||
Set mappings |
|||
</v-stepper-step> |
|||
</v-stepper-header> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import Vue from 'vue' |
|||
|
|||
export default Vue.extend({ |
|||
props: { |
|||
step: { |
|||
type: Number, |
|||
default: 1, |
|||
required: true |
|||
} |
|||
} |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<v-stepper-content step="4"> |
|||
<v-card> |
|||
<v-card-text class="pa-0"> |
|||
<h4 class="text-h6">Configure label mappings</h4> |
|||
<p class="font-weight-regular body-1"> |
|||
Once you fetch the API response, you can convert the label into the defined one. |
|||
</p> |
|||
<label-mapping v-model="mapping" /> |
|||
<v-alert |
|||
v-for="(error, index) in errorMessages" |
|||
prominent |
|||
type="error" |
|||
:key="index" |
|||
> |
|||
<v-row align="center"> |
|||
<v-col class="grow"> |
|||
{{ error }} |
|||
</v-col> |
|||
</v-row> |
|||
</v-alert> |
|||
</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')" |
|||
> |
|||
Finish |
|||
</v-btn> |
|||
</v-card-actions> |
|||
</v-card> |
|||
</v-stepper-content> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import Vue from 'vue' |
|||
import LabelMapping from './LabelMapping.vue' |
|||
|
|||
export default Vue.extend({ |
|||
components: { |
|||
LabelMapping |
|||
}, |
|||
|
|||
props: { |
|||
value: { |
|||
type: Array, |
|||
default: () => [], |
|||
required: true |
|||
}, |
|||
errorMessages: { |
|||
type: Array, |
|||
default: () => [], |
|||
required: true |
|||
}, |
|||
isPassed: { |
|||
type: Boolean, |
|||
default: false, |
|||
required: true |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
mapping: { |
|||
get() { |
|||
return this.value |
|||
}, |
|||
set(newVal) { |
|||
this.$emit('input', newVal) |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,131 @@ |
|||
<template> |
|||
<v-stepper-content step="2"> |
|||
<v-card> |
|||
<v-card-text class="pa-0"> |
|||
<v-form> |
|||
<h4 class="text-h6">Set parameters</h4> |
|||
<p class="font-weight-regular body-1"> |
|||
You can set parameters to fetch API response. |
|||
</p> |
|||
<template v-for="item in value"> |
|||
<v-text-field |
|||
v-if="item.type === 'textField'" |
|||
v-model="item.value" |
|||
:label="item.name" |
|||
outlined |
|||
:key="item.name" |
|||
/> |
|||
<v-select |
|||
v-if="item.type === 'selectField'" |
|||
v-model="item.value" |
|||
:items="item.items" |
|||
:label="item.name" |
|||
outlined |
|||
:key="item.name" |
|||
/> |
|||
<object-field |
|||
v-if="item.type === 'objectField'" |
|||
v-model="item.value" |
|||
:title="item.name" |
|||
:key="item.name" |
|||
/> |
|||
</template> |
|||
<h4 class="text-h6">Test the parameters</h4> |
|||
<p class="font-weight-regular body-1"> |
|||
Before proceeding, you need to test the parameters whether they can fetch API response. |
|||
Please input sample text and press the <strong>Test</strong> button. |
|||
</p> |
|||
<v-text-field |
|||
v-model="sampleText" |
|||
outlined |
|||
label="Sample Text" |
|||
/> |
|||
<v-alert |
|||
v-for="(error, index) in errorMessages" |
|||
prominent |
|||
type="error" |
|||
:key="index" |
|||
> |
|||
<v-row align="center"> |
|||
<v-col class="grow"> |
|||
{{ error }} |
|||
</v-col> |
|||
</v-row> |
|||
</v-alert> |
|||
<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> |
|||
</v-form> |
|||
</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', sampleText)" |
|||
> |
|||
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' |
|||
import ObjectField from './ObjectField.vue' |
|||
|
|||
export default Vue.extend({ |
|||
components: { |
|||
ObjectField |
|||
}, |
|||
|
|||
props: { |
|||
value: { |
|||
type: Array, |
|||
default: () => [], |
|||
required: true |
|||
}, |
|||
errorMessages: { |
|||
type: Array, |
|||
default: () => [], |
|||
required: true |
|||
}, |
|||
isPassed: { |
|||
type: Boolean, |
|||
default: false, |
|||
required: true |
|||
}, |
|||
response: [String, Array, Object] |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
sampleText: '' |
|||
} |
|||
} |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,131 @@ |
|||
<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" |
|||
prominent |
|||
type="error" |
|||
:key="index" |
|||
> |
|||
<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: [String, Object, Array], |
|||
result: Array |
|||
}, |
|||
|
|||
watch: { |
|||
value(val) { |
|||
this.$emit('input', val) |
|||
} |
|||
} |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,71 @@ |
|||
<template> |
|||
<v-stepper-content step="1"> |
|||
<v-card> |
|||
<v-card-text class="pa-0"> |
|||
<v-form v-model="valid"> |
|||
<h4 class="text-h6">Select a config template</h4> |
|||
<p class="font-weight-regular body-1"> |
|||
You can select the template to create the auto-labeling configuration. |
|||
</p> |
|||
<v-select |
|||
v-model="templateName" |
|||
:items="templateNames" |
|||
:rules="templateNameRules()" |
|||
label="Select a config template" |
|||
outlined |
|||
/> |
|||
</v-form> |
|||
</v-card-text> |
|||
<v-card-actions class="pa-0"> |
|||
<v-spacer /> |
|||
<v-btn |
|||
:disabled="!valid" |
|||
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' |
|||
import { FromApiTemplateRepository } from '@/repositories/template/api' |
|||
import { TemplateApplicationService } from '@/services/application/template.service' |
|||
import { ConfigTemplateItem } from '@/models/config/config-template' |
|||
import { templateNameRules } from '@/rules/index' |
|||
|
|||
export default Vue.extend({ |
|||
data() { |
|||
return { |
|||
templateName: null, |
|||
templateNames: [] as string[], |
|||
templateNameRules, |
|||
valid: false |
|||
} |
|||
}, |
|||
|
|||
async created() { |
|||
this.templateNames = await this.templateService.list(this.$route.params.id) |
|||
}, |
|||
|
|||
watch: { |
|||
async templateName(val) { |
|||
const projectId = this.$route.params.id |
|||
const response: ConfigTemplateItem = await this.templateService.find(projectId, val) |
|||
this.$emit('input', response.toObject()) |
|||
}, |
|||
}, |
|||
|
|||
computed: { |
|||
templateService(): TemplateApplicationService { |
|||
const repository = new FromApiTemplateRepository() |
|||
const service = new TemplateApplicationService(repository) |
|||
return service |
|||
} |
|||
} |
|||
}) |
|||
</script> |
|||
Write
Preview
Loading…
Cancel
Save