From 77b169ad6396aae60ac44920fd09132afca19a0d Mon Sep 17 00:00:00 2001
From: EdwardAJ <13517115@std.stei.itb.ac.id>
Date: Sat, 11 Apr 2020 12:35:03 +0700
Subject: [PATCH] COCO outputs done
---
frontend/mixins/outputs/cocoMethods.js | 96 +++++++++++++
.../mixins/outputs/imageAndLabelMethods.js | 56 ++++++++
frontend/pages/main/coco.vue | 129 +-----------------
frontend/pages/main/output-view/index.vue | 52 ++++---
4 files changed, 188 insertions(+), 145 deletions(-)
create mode 100644 frontend/mixins/outputs/cocoMethods.js
create mode 100644 frontend/mixins/outputs/imageAndLabelMethods.js
diff --git a/frontend/mixins/outputs/cocoMethods.js b/frontend/mixins/outputs/cocoMethods.js
new file mode 100644
index 0000000..00f8ba8
--- /dev/null
+++ b/frontend/mixins/outputs/cocoMethods.js
@@ -0,0 +1,96 @@
+import { backendURL } from '~/config.js'
+import imageAndLabelMethods from '~/mixins/outputs/imageAndLabelMethods'
+export default {
+ data () {
+ return {
+ backendURL: backendURL,
+ imageObj: {}
+ }
+ },
+ mixins: [imageAndLabelMethods],
+ methods: {
+ async getCategoriesArr (allLabels) {
+ var categoriesArr = []
+ for (var labelIdx in allLabels) {
+ var label = allLabels[labelIdx]
+ if (this.imagesObj[label["image_id"]]) {
+ // Category
+ var labelResponse = await this.getLabelContentByID(label["label_content_id"])
+ var categoryObj = {
+ id: label["label_content_id"],
+ name: labelResponse["content_name"],
+ supercategory: ""
+ }
+ categoriesArr.push(categoryObj)
+ }
+ }
+ return categoriesArr
+ },
+ async getAnnotationsArr (allLabels) {
+ var annotationsArr = []
+ for (var labelIdx in allLabels) {
+ var label = allLabels[labelIdx]
+ if (this.imagesObj[label["image_id"]]) {
+ // Annotations
+ var x_top_left = Math.round(label.label_x_center - (0.5 * label.label_width))
+ var y_top_left = Math.round(label.label_y_center - (0.5 * label.label_height))
+ var annotationObj = {
+ area: Math.round(label.label_width * label.label_height),
+ iscrowd: 0,
+ image_id: label.image_id,
+ bbox: [x_top_left, y_top_left, Math.round(label.label_width), Math.round(label.label_height)],
+ category_id: label.label_content_id,
+ id: label.label_id
+ }
+ annotationsArr.push(annotationObj)
+ }
+ }
+ return annotationsArr
+ },
+ getInfoObj () {
+ var curYear = new Date().getFullYear()
+ var infoObj = {
+ year: curYear,
+ version: "",
+ description: this.dataset,
+ contributor: "",
+ url: "",
+ date_created: ""
+ }
+ return infoObj
+ },
+ getLicensesArr () {
+ var licensesArr = [{
+ id: 1,
+ name: "",
+ url: ""
+ }]
+ return licensesArr
+ },
+ async assignImagesObj (imageID) {
+ this.imagesObj = {}
+ var allImages = await this.getAllImages()
+ if (allImages) {
+ allImages.forEach(async (image) => {
+ var url = this.backendURL + '/api/' + image.ImagePath
+ var imageMeta = await this.getImageMeta(url)
+ var singleImageObj = {
+ id: image.ImageID,
+ width: imageMeta.naturalWidth,
+ height: imageMeta.naturalHeight,
+ file_name: image.Filename,
+ license: 1,
+ date_captured: image.UpdatedAt
+ }
+ if (imageID) {
+ if (image.ImageID === imageID) {
+ this.imagesObj[imageID] = singleImageObj
+ }
+ } else {
+ this.imagesObj[image.ImageID] = singleImageObj
+ }
+ })
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/frontend/mixins/outputs/imageAndLabelMethods.js b/frontend/mixins/outputs/imageAndLabelMethods.js
new file mode 100644
index 0000000..de96d5f
--- /dev/null
+++ b/frontend/mixins/outputs/imageAndLabelMethods.js
@@ -0,0 +1,56 @@
+export default {
+ methods: {
+ async getLabelContentByID (contentID) {
+ var url = '/api/content/' + contentID
+ var response = await this.$axios(url).catch(error => console.log(error))
+ if (response && response.status === 200) {
+ return response.data.data
+ } else {
+ return null
+ }
+ },
+ async getAllLabel(){
+ var url = '/api/label'
+ var response = await this.$axios(url).catch(error => console.log(error))
+ if (response && response.status === 200) {
+ return response.data.data
+ } else {
+ return null
+ }
+ },
+ async getLabelByImageID (imageID) {
+ var url = '/api/label/imagequery/' + imageID
+ var response = await this.$axios(url).catch(error => console.log(error))
+ if (response && response.status === 200) {
+ return response.data.data
+ } else {
+ return null
+ }
+ },
+ async getImageMeta(url) {
+ return new Promise((resolve, reject) => {
+ let img = new Image()
+ img.onload = () => resolve(img)
+ img.onerror = reject
+ img.src = url
+ })
+ },
+ async getAllImages() {
+ var url = '/api/image'
+ const response = await this.$axios.get(url, {
+ params: {
+ PerPage: 999999,
+ Page: 1,
+ search: "",
+ Labeled: this.isLabeled,
+ Dataset: this.dataset
+ }
+ }).catch((error) => console.error(error))
+ if (response.data.data) {
+ return response.data.data.images
+ } else {
+ return null
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/frontend/pages/main/coco.vue b/frontend/pages/main/coco.vue
index 9f08aed..e9e974b 100644
--- a/frontend/pages/main/coco.vue
+++ b/frontend/pages/main/coco.vue
@@ -42,8 +42,7 @@
</template>
<script>
-import getAllLabeledImages from '~/mixins/image/getAllLabeledImages.js'
-import { backendURL } from '~/config.js'
+import cocoMethods from '~/mixins/outputs/cocoMethods'
import Label from '~/components/label/Label'
import Dropdown from '~/components/dropdown/Dropdown'
@@ -52,14 +51,12 @@ export default {
Label,
Dropdown
},
- mixins: [getAllLabeledImages],
+ mixins: [cocoMethods],
data () {
return {
dataset: '',
isOutputViewer: true,
isLabeled: true,
- imagesObj: {},
- backendURL: backendURL,
standard: 'coco',
search: '',
updateUI: false
@@ -79,7 +76,6 @@ export default {
async getCOCOJSON () {
var infoObj = this.getInfoObj()
var licensesArr = this.getLicensesArr()
- // Component "global" objects:
await this.assignImagesObj()
var categoriesAndAnnotations = await this.getCategoriesAndAnnotationsArr()
// Convert object to array
@@ -96,64 +92,6 @@ export default {
}
return COCOJSON
},
- getInfoObj () {
- var curYear = new Date().getFullYear()
- var infoObj = {
- year: curYear,
- version: "",
- description: this.dataset,
- contributor: "",
- url: "",
- date_created: ""
- }
- return infoObj
- },
- getLicensesArr () {
- var licensesArr = [{
- id: 1,
- name: "",
- url: ""
- }]
- return licensesArr
- },
- async assignImagesObj () {
- this.imagesObj = {}
- var allImages = await this.getAllImages()
- if (allImages) {
- allImages.forEach(async (image) => {
- var url = this.backendURL + '/api/' + image.ImagePath
- var imageMeta = await this.getImageMeta(url)
- var singleImageObj = {
- id: image.ImageID,
- width: imageMeta.naturalWidth,
- height: imageMeta.naturalHeight,
- file_name: image.Filename,
- license: 1,
- date_captured: image.UpdatedAt
- }
- this.imagesObj[image.ImageID] = singleImageObj
- })
- }
- },
- async getAllLabel(){
- var url = '/api/label'
- var response = await this.$axios(url).catch(error => console.log(error))
- if (response && response.status === 200) {
- var rawJSON = response.data.data
- return rawJSON
- } else {
- return null
- }
- },
- async getLabelContentByID (contentID) {
- var url = '/api/content/' + contentID
- var response = await this.$axios(url).catch(error => console.log(error))
- if (response && response.status === 200) {
- return response.data.data
- } else {
- return null
- }
- },
async getCategoriesAndAnnotationsArr () {
var allLabels = await this.getAllLabel()
var categoriesArr = await this.getCategoriesArr(allLabels)
@@ -163,69 +101,6 @@ export default {
annotations: annotationsArr
}
},
- async getCategoriesArr (allLabels) {
- var categoriesArr = []
- for (var labelIdx in allLabels) {
- var label = allLabels[labelIdx]
- if (this.imagesObj[label["image_id"]]) {
- // Category
- var labelResponse = await this.getLabelContentByID(label["label_content_id"])
- var categoryObj = {
- id: label["label_content_id"],
- name: labelResponse["content_name"],
- supercategory: ""
- }
- categoriesArr.push(categoryObj)
- }
- }
- return categoriesArr
- },
- async getAnnotationsArr (allLabels) {
- var annotationsArr = []
- for (var labelIdx in allLabels) {
- var label = allLabels[labelIdx]
- if (this.imagesObj[label["image_id"]]) {
- // Annotations
- var x_top_left = Math.round(label.label_x_center - (0.5 * label.label_width))
- var y_top_left = Math.round(label.label_y_center - (0.5 * label.label_height))
- var annotationObj = {
- area: Math.round(label.label_width * label.label_height),
- iscrowd: 0,
- image_id: label.image_id,
- bbox: [x_top_left, y_top_left, Math.round(label.label_width), Math.round(label.label_height)],
- category_id: label.label_content_id,
- id: label.label_id
- }
- annotationsArr.push(annotationObj)
- }
- }
- return annotationsArr
- },
- async getImageMeta(url) {
- return new Promise((resolve, reject) => {
- let img = new Image()
- img.onload = () => resolve(img)
- img.onerror = reject
- img.src = url
- })
- },
- async getAllImages() {
- var url = '/api/image'
- const response = await this.$axios.get(url, {
- params: {
- PerPage: 999999,
- Page: 1,
- search: "",
- Labeled: this.isLabeled,
- Dataset: this.dataset
- }
- }).catch((error) => console.error(error))
- if (response.data.data) {
- return response.data.data.images
- } else {
- return null
- }
- },
async downloadJSON() {
var filename = this.dataset + '.json'
var element = document.createElement('a')
diff --git a/frontend/pages/main/output-view/index.vue b/frontend/pages/main/output-view/index.vue
index c77ce34..00ed25a 100644
--- a/frontend/pages/main/output-view/index.vue
+++ b/frontend/pages/main/output-view/index.vue
@@ -12,7 +12,7 @@
<div class="row">
<div class="col">
<button class="btn-action btn-white" @click="downloadOutput()">
- {{ type.toUpperCase() }}File.{{ type }}
+ {{ name }}.{{ type }}
<i class="ml-3 mt-1 fas fa-download" />
</button>
</div>
@@ -42,7 +42,9 @@
<script>
import Convert from 'xml-js'
+import cocoMethods from '~/mixins/outputs/cocoMethods'
export default {
+ mixins: [cocoMethods],
data () {
return {
type: '',
@@ -57,39 +59,53 @@ export default {
collapseContent: true,
lineSeparator: '\n'
},
- dataset: ''
+ dataset: '',
+ imagesObj: {}
}
},
async mounted() {
this.type = this.$route.query.type
- this.id = this.$route.query.id
this.name = this.$route.query.name
this.standard = this.$route.query.standard
this.dataset = this.$route.query.dataset
- this.json = await this.getLabelByID(this.standard)
- // this.xml = XMLFormatter(this.convertToXML(),this.config)
+ this.id = this.$route.query.id
+ this.json = await this.getCOCOJSONPerImage()
if(this.type === 'xml'){
this.xml = this.convertToXML()
this.Format()
}
},
methods:{
+ async getCOCOJSONPerImage () {
+ var infoObj = this.getInfoObj()
+ var licensesArr = this.getLicensesArr()
+
+ await this.assignImagesObj(this.id)
+
+ var categoriesAndAnnotations = await this.getCategoriesAndAnnotationsArrPerImage()
+ var COCOJSON = {
+ info: infoObj,
+ licenses: licensesArr,
+ images: [this.imagesObj[this.id]],
+ categories: categoriesAndAnnotations.categories,
+ annotations: categoriesAndAnnotations.annotations
+ }
+ return COCOJSON
+ },
+ async getCategoriesAndAnnotationsArrPerImage () {
+ var allLabelsPerImage = await this.getLabelByImageID(this.id)
+ var categoriesArr = await this.getCategoriesArr(allLabelsPerImage)
+ var annotationsArr = await this.getAnnotationsArr(allLabelsPerImage)
+ return {
+ categories: categoriesArr,
+ annotations: annotationsArr
+ }
+ },
closeOutputViewer() {
if(this.type === 'json'){
this.$router.push({path: '/main/coco', query:{ dataset: this.dataset }})
}else{
- this.$router.push('/main/pascal')
- }
-
- },
- async getLabelByID(standard){
- var url = 'api/label/imagequery/'+ this.id
- var response = await this.$axios(url).catch(error => console.log(error))
- if(response && response.status === 200){
- var rawJSON = response.data.data
- return this.standardJSON(rawJSON,standard)
- }else{
- return null
+ this.$router.push({path: '/main/pascal', query:{ dataset: this.dataset }})
}
},
standardJSON(rawJSON,standard){
@@ -128,7 +144,7 @@ export default {
return JSONstandard
},
downloadOutput(){
- var filename = this.name.split('.',1)+'_JSONFile.json'
+ var filename = this.name + '.json'
var element = document.createElement('a')
if(this.type == 'json'){
--
GitLab