mirror of https://github.com/doccano/doccano.git
Hironsan
2 years ago
6 changed files with 287 additions and 2 deletions
Unified View
Diff Options
-
1frontend/nuxt.config.js
-
1frontend/package.json
-
117frontend/pages/demo/object-detection/index.vue
-
120frontend/pages/demo/segmentation/index.vue
-
7frontend/plugins/vue-konva.js
-
43frontend/yarn.lock
@ -0,0 +1,117 @@ |
|||||
|
<template> |
||||
|
<v-main> |
||||
|
<v-container fluid> |
||||
|
<v-row justify="center"> |
||||
|
<v-col cols="12" md="9"> |
||||
|
<v-card> |
||||
|
<v-bounding-box |
||||
|
:rectangles="rectangles" |
||||
|
:image-url="imageUrl" |
||||
|
:labels="labels" |
||||
|
:selected-label="selectedLabel" |
||||
|
:scale="scale" |
||||
|
@add-rectangle="addRectangle" |
||||
|
@update-rectangle="updateRectangle" |
||||
|
@delete-rectangle="deleteRectangle" |
||||
|
@update-scale="updateScale" |
||||
|
/> |
||||
|
</v-card> |
||||
|
</v-col> |
||||
|
<v-col cols="12" md="3"> |
||||
|
<list-metadata :metadata="meta" /> |
||||
|
</v-col> |
||||
|
</v-row> |
||||
|
</v-container> |
||||
|
</v-main> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { VBoundingBox } from 'vue-image-annotator' |
||||
|
import ListMetadata from '@/components/tasks/metadata/ListMetadata' |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
ListMetadata, |
||||
|
VBoundingBox |
||||
|
}, |
||||
|
|
||||
|
layout: 'demo', |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
imageUrl: 'https://www.pakutaso.com/shared/img/thumb/shikun20220402_122123_TP_V.jpg', |
||||
|
rectangles: [ |
||||
|
{ |
||||
|
id: 'uuid', |
||||
|
label: 1, |
||||
|
x: 10, |
||||
|
y: 10, |
||||
|
width: 100, |
||||
|
height: 100 |
||||
|
} |
||||
|
], |
||||
|
labels: [ |
||||
|
{ |
||||
|
id: 0, |
||||
|
name: 'pig', |
||||
|
color: '#ff0000' |
||||
|
}, |
||||
|
{ |
||||
|
id: 1, |
||||
|
name: 'cat', |
||||
|
color: '#00ff00' |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
name: 'dog', |
||||
|
color: '#0000ff' |
||||
|
} |
||||
|
], |
||||
|
meta: { wikiPageId: 2 }, |
||||
|
selectedLabel: undefined, |
||||
|
selectedPolygon: undefined, |
||||
|
scale: 1 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
selectLabel(index) { |
||||
|
this.selectedLabel = this.labels[index] |
||||
|
}, |
||||
|
|
||||
|
resetLabel() { |
||||
|
this.selectedLabel = undefined |
||||
|
}, |
||||
|
|
||||
|
addRectangle(rectangle) { |
||||
|
console.log('addRectangle', rectangle) |
||||
|
this.rectangles.push(rectangle) |
||||
|
}, |
||||
|
|
||||
|
updateRectangle(rectangle) { |
||||
|
console.log('updateRectangle', rectangle) |
||||
|
const index = this.rectangles.findIndex((r) => r.id === rectangle.id) |
||||
|
if (index !== -1) { |
||||
|
this.$set(this.rectangles, index, rectangle) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
deleteRectangle(rectangleId) { |
||||
|
console.log('deleteRectangle', rectangleId) |
||||
|
this.rectangles = this.rectangles.filter((r) => r.id !== rectangleId) |
||||
|
}, |
||||
|
|
||||
|
zoomOut() { |
||||
|
this.scale -= 0.1 |
||||
|
}, |
||||
|
|
||||
|
zoomIn() { |
||||
|
this.scale += 0.1 |
||||
|
}, |
||||
|
|
||||
|
updateScale(scale) { |
||||
|
this.scale = scale |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,120 @@ |
|||||
|
<template> |
||||
|
<v-main> |
||||
|
<v-container fluid> |
||||
|
<v-row justify="center"> |
||||
|
<v-col cols="12" md="9"> |
||||
|
<v-card> |
||||
|
<v-segmentation |
||||
|
:image-url="imageUrl" |
||||
|
:labels="labels" |
||||
|
:polygons="polygons" |
||||
|
:selected-label="selectedLabel" |
||||
|
:scale="scale" |
||||
|
@add-polygon="addPolygon" |
||||
|
@delete-polygon="deletePolygon" |
||||
|
@select-polygon="selectPolygon" |
||||
|
@update-polygon="updatePolygon" |
||||
|
@update-scale="updateScale" |
||||
|
/> |
||||
|
</v-card> |
||||
|
</v-col> |
||||
|
<v-col cols="12" md="3"> |
||||
|
<list-metadata :metadata="meta" /> |
||||
|
</v-col> |
||||
|
</v-row> |
||||
|
</v-container> |
||||
|
</v-main> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { VSegmentation } from 'vue-image-annotator' |
||||
|
import ListMetadata from '@/components/tasks/metadata/ListMetadata' |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
ListMetadata, |
||||
|
VSegmentation |
||||
|
}, |
||||
|
|
||||
|
layout: 'demo', |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
imageUrl: 'https://www.pakutaso.com/shared/img/thumb/shikun20220402_122123_TP_V.jpg', |
||||
|
polygons: [ |
||||
|
{ |
||||
|
id: 'uuid', |
||||
|
label: 1, |
||||
|
points: [372, 249, 284, 366, 450, 371] |
||||
|
} |
||||
|
], |
||||
|
task: 'bounding box', |
||||
|
labels: [ |
||||
|
{ |
||||
|
id: 0, |
||||
|
name: 'pig', |
||||
|
color: '#ff0000' |
||||
|
}, |
||||
|
{ |
||||
|
id: 1, |
||||
|
name: 'cat', |
||||
|
color: '#00ff00' |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
name: 'dog', |
||||
|
color: '#0000ff' |
||||
|
} |
||||
|
], |
||||
|
meta: { wikiPageId: 2 }, |
||||
|
selectedLabel: undefined, |
||||
|
selectedPolygon: undefined, |
||||
|
scale: 1 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
selectLabel(index) { |
||||
|
this.selectedLabel = this.labels[index] |
||||
|
}, |
||||
|
|
||||
|
resetLabel() { |
||||
|
this.selectedLabel = undefined |
||||
|
}, |
||||
|
|
||||
|
addPolygon(polygon) { |
||||
|
this.polygons.push(polygon) |
||||
|
}, |
||||
|
|
||||
|
deletePolygon(polygonId) { |
||||
|
this.polygons = this.polygons.filter((p) => p.id !== polygonId) |
||||
|
}, |
||||
|
|
||||
|
selectPolygon(id) { |
||||
|
console.log('selectPolygon', id) |
||||
|
this.selectedPolygon = this.polygons.find((p) => p.id === id) |
||||
|
}, |
||||
|
|
||||
|
updatePolygon(polygon) { |
||||
|
console.log('updatePolygon', polygon) |
||||
|
const index = this.polygons.findIndex((p) => p.id === polygon.id) |
||||
|
if (index !== -1) { |
||||
|
this.$set(this.polygons, index, polygon) |
||||
|
this.selectedPolygon = polygon |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
zoomOut() { |
||||
|
this.scale -= 0.1 |
||||
|
}, |
||||
|
|
||||
|
zoomIn() { |
||||
|
this.scale += 0.1 |
||||
|
}, |
||||
|
|
||||
|
updateScale(scale) { |
||||
|
this.scale = scale |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,7 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import VueKonva from 'vue-konva' |
||||
|
|
||||
|
// add any custom shortkey config settings here
|
||||
|
Vue.use(VueKonva) |
||||
|
|
||||
|
export default VueKonva |
||||
Write
Preview
Loading…
Cancel
Save