Skip to content
Snippets Groups Projects
Commit 87e96f1b authored by Edward Alexander Jaya's avatar Edward Alexander Jaya
Browse files

Add pascal outputs for all images

parent 77b169ad
Branches
2 merge requests!40Release First Version,!21Add dockerize
Pipeline #24502 passed with stage
in 38 seconds
...@@ -10,10 +10,11 @@ export default { ...@@ -10,10 +10,11 @@ export default {
mixins: [imageAndLabelMethods], mixins: [imageAndLabelMethods],
methods: { methods: {
async getCategoriesArr (allLabels) { async getCategoriesArr (allLabels) {
var alreadyCheckedContentID = {}
var categoriesArr = [] var categoriesArr = []
for (var labelIdx in allLabels) { for (var labelIdx in allLabels) {
var label = allLabels[labelIdx] var label = allLabels[labelIdx]
if (this.imagesObj[label["image_id"]]) { if (this.imagesObj[label["image_id"]] && !alreadyCheckedContentID[label["label_content_id"]]) {
// Category // Category
var labelResponse = await this.getLabelContentByID(label["label_content_id"]) var labelResponse = await this.getLabelContentByID(label["label_content_id"])
var categoryObj = { var categoryObj = {
...@@ -21,6 +22,7 @@ export default { ...@@ -21,6 +22,7 @@ export default {
name: labelResponse["content_name"], name: labelResponse["content_name"],
supercategory: "" supercategory: ""
} }
alreadyCheckedContentID[label["label_content_id"]] = true
categoriesArr.push(categoryObj) categoriesArr.push(categoryObj)
} }
} }
......
export default {
data () {
return {
dataset: '',
updateUI: false
}
},
mounted () {
if (this.$route.query.dataset) {
this.dataset = this.$route.query.dataset
this.updateUI = !this.updateUI
}
},
methods: {
changeDataset (newDataset) {
this.dataset = newDataset
this.updateUI = !this.updateUI
}
}
}
\ No newline at end of file
import { backendURL } from '~/config.js'
import imageAndLabelMethods from '~/mixins/outputs/imageAndLabelMethods'
export default {
data () {
return {
backendURL: backendURL,
imagesAttributes: {},
pascalJSON: {}
}
},
mixins: [imageAndLabelMethods],
methods: {
async getObjectsAttr (allLabels) {
var objectsAttr = {}
for (var labelIdx in allLabels) {
var label = allLabels[labelIdx]
if (this.pascalJSON[label["image_id"]]) {
var labelResponse = await this.getLabelContentByID(label["label_content_id"])
// If exists, push to the bounding box
if (objectsAttr[label["label_content_id"]]) {
objectsAttr[label["label_content_id"]].boundingBox.push(this.getBoundingBoxAttr(label))
this.pascalJSON[label["image_id"]].object.pop()
this.pascalJSON[label["image_id"]].object.push(objectsAttr[label["label_content_id"]])
} else {
// Else, Construct new Obj
var objectAttr = {
name: labelResponse["content_name"],
pose: "Unspecified",
truncated: 0,
difficult: 0,
boundingBox: [this.getBoundingBoxAttr(label)]
}
objectsAttr[label["label_content_id"]] = objectAttr
this.pascalJSON[label["image_id"]].object.push(objectsAttr[label["label_content_id"]])
}
}
}
},
getBoundingBoxAttr (label) {
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 x_bot_right = Math.round(label.label_x_center + (0.5 * label.label_width))
var y_bot_right = Math.round(label.label_y_center - (0.5 * label.label_height))
return {
xmin: x_top_left,
ymin: y_top_left,
xmax: x_bot_right,
ymax: y_bot_right
}
},
async setSingleImageAttr (image, dataset) {
var url = this.backendURL + '/api/' + image.ImagePath
var imageMeta = await this.getImageMeta(url)
this.pascalJSON[image.ImageID] = {
folder: dataset,
filename: image.Filename,
path: url,
source: {
database: dataset
},
size: {
width: imageMeta.naturalWidth,
height: imageMeta.naturalHeight,
depth: 3
},
object: []
}
}
}
}
\ No newline at end of file
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
<script> <script>
import cocoMethods from '~/mixins/outputs/cocoMethods' import cocoMethods from '~/mixins/outputs/cocoMethods'
import datasetMethods from '~/mixins/outputs/datasetMethods'
import Label from '~/components/label/Label' import Label from '~/components/label/Label'
import Dropdown from '~/components/dropdown/Dropdown' import Dropdown from '~/components/dropdown/Dropdown'
...@@ -51,28 +52,16 @@ export default { ...@@ -51,28 +52,16 @@ export default {
Label, Label,
Dropdown Dropdown
}, },
mixins: [cocoMethods], mixins: [cocoMethods, datasetMethods],
data () { data () {
return { return {
dataset: '',
isOutputViewer: true, isOutputViewer: true,
isLabeled: true, isLabeled: true,
standard: 'coco', standard: 'coco',
search: '', search: ''
updateUI: false
}
},
mounted () {
if (this.$route.query.dataset) {
this.dataset = this.$route.query.dataset
this.updateUI = !this.updateUI
} }
}, },
methods: { methods: {
changeDataset (newDataset) {
this.dataset = newDataset
this.updateUI = !this.updateUI
},
async getCOCOJSON () { async getCOCOJSON () {
var infoObj = this.getInfoObj() var infoObj = this.getInfoObj()
var licensesArr = this.getLicensesArr() var licensesArr = this.getLicensesArr()
......
...@@ -2,23 +2,40 @@ ...@@ -2,23 +2,40 @@
<div class="col"> <div class="col">
<div class="ml-4"> <div class="ml-4">
<div class="row"> <div class="row">
<div class="col-3"> <div class="col">
<h5 class="title users-margin"> <Dropdown
Complete XML class="margin-dropdown"
</h5> :dropdown-value="dataset"
@onDatasetChanged="changeDataset"
/>
</div>
</div>
<div :key="updateUI" class="row animated fadeIn">
<div class="col">
<div style="display: flex">
<h5 class="title users-margin">
{{ dataset }} Pascal file:
<span v-if="!dataset" style="margin-left: 20px; font-size: 0.85rem;">
Choose Folder First
</span>
</h5>
<button v-if="dataset" class="btn-white margin-download" @click="downloadXML()">
{{ dataset }}.xml
<i class="ml-3 mt-1 fas fa-download" />
</button>
</div>
</div> </div>
<button class="btn-white" @click="downloadXML()">
XMLFile.xml
<i class="ml-3 mt-1 fas fa-download" />
</button>
</div> </div>
</div> </div>
<div class="row"> <div v-if="dataset" class="row" style="margin-top: -1.5rem;">
<Label <Label
:key="updateUI"
:is-output-viewer="isOutputViewer" :is-output-viewer="isOutputViewer"
:is-labeled="isLabeled" :is-labeled="isLabeled"
:dataset="dataset"
title="XML Per Image" title="XML Per Image"
viewer-u-r-l="/main/output-view" viewer-u-r-l="/main/output-view"
:output="{type: 'xml', standard: standard}"
/> />
</div> </div>
</div> </div>
...@@ -26,89 +43,63 @@ ...@@ -26,89 +43,63 @@
<script> <script>
import getAllLabeledImages from '~/mixins/image/getAllLabeledImages.js' import datasetMethods from '~/mixins/outputs/datasetMethods'
import { backendURL } from '~/config.js' import pascalMethods from '~/mixins/outputs/pascalMethods'
import Convert from 'xml-js' import Convert from 'xml-js'
import Label from '~/components/label/Label' import Label from '~/components/label/Label'
import Dropdown from '~/components/dropdown/Dropdown'
export default { export default {
components: { components: {
Label Label,
Dropdown
}, },
mixins: [getAllLabeledImages], mixins: [datasetMethods, pascalMethods],
data () { data () {
return { return {
isOutputViewer: true, isOutputViewer: true,
isLabeled: true, isLabeled: true,
backendURL: backendURL,
standard: 'pascal', standard: 'pascal',
search: '' search: '',
}
},
computed: {
filterImages: function(){
return this.labeledImages.filter((labs) => {
return labs.Filename.match(this.search)
})
} }
}, },
methods: { methods: {
async getAllLabelJSON(standard){ async getPascalXML () {
var url = '/api/label' this.pascalJSON = {}
var response = await this.$axios(url).catch(error => console.log(error)) var newPascalJSON = {"annotation": []}
if (response && response.status === 200) { var allImages = await this.getAllImages()
var rawJSON = response.data.data if (allImages) {
return this.standardJSON(rawJSON, standard) this.imagesAttributes = {}
} else { var allLabels = await this.getAllLabel()
return null await this.setImagesAttr(allImages)
await this.getObjectsAttr(allLabels)
for (var key in this.pascalJSON) {
newPascalJSON["annotation"].push(this.pascalJSON[key])
}
return newPascalJSON
} }
}, },
standardJSON(rawJSON, standard){ async setImagesAttr (allImages) {
var JSONstandard = [] for (var imageIdx in allImages) {
rawJSON.forEach(element => { var image = allImages[imageIdx]
var area = element.label_width * element.label_height, await this.setSingleImageAttr(image, this.dataset)
x_top_left = element.label_x_center - (0.5 * element.label_width), }
y_top_left = element.label_y_center - (0.5 * element.label_height),
x_bot_right = element.label_x_center + (0.5 * element.label_width),
y_bot_right = element.label_y_center - (0.5 * element.label_height),
json = {
id: element.label_id,
image_id: element.image_id,
category_id: element.label_content_id,
area: area,
bounding_box: {
},
created_at: element.created_at,
updated_at: element.updated_at
}
if(standard == "coco"){
json.bounding_box.x_top_left = x_top_left
json.bounding_box.y_top_left = y_top_left
json.bounding_box.width = element.label_width
json.bounding_box.height = element.label_height
JSONstandard.push(json)
}else if(standard == "pascal"){
json.bounding_box.x_top_left = x_top_left
json.bounding_box.y_top_left = y_top_left
json.bounding_box.x_bot_right = x_bot_right
json.bounding_box.y_bot_right = y_bot_right
JSONstandard.push(json)
}
})
return JSONstandard
}, },
convertToXML(json){ convertToXML(json){
var option = { var option = {
compact: true, compact: true,
spaces: 4 spaces: 4,
attributes_key: 'annotation'
} }
var result = Convert.json2xml(JSON.stringify(json,0,4),option) var result = Convert.json2xml(JSON.stringify(json,0,4), option)
return result return result
}, },
async downloadXML() { async downloadXML() {
var filename = 'XMLFile.xml' var filename = 'XMLFile.xml'
var element = document.createElement('a') var element = document.createElement('a')
var label = await this.getAllLabelJSON(this.standard) var newPascalJSON = await this.getPascalXML()
var xml = this.convertToXML(label) var xml = this.convertToXML(newPascalJSON)
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(xml)) element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(xml))
element.setAttribute('download',filename) element.setAttribute('download',filename)
element.style.display = 'none' element.style.display = 'none'
...@@ -162,6 +153,11 @@ export default { ...@@ -162,6 +153,11 @@ export default {
padding-right: 1rem; padding-right: 1rem;
} }
.btn-white:hover {
background-color: #F7F7F7;
}
.standard-dropdown{ .standard-dropdown{
background: yellow; background: yellow;
width: 200px; width: 200px;
...@@ -176,4 +172,13 @@ export default { ...@@ -176,4 +172,13 @@ export default {
color: #1E889B; color: #1E889B;
} }
.margin-download {
margin-left: 2.25rem;
}
.margin-dropdown {
margin-top: 3.5rem;
margin-left: -0.775rem;
}
</style> </style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment