diff --git a/frontend/components/label/Box.vue b/frontend/components/label/Box.vue index 808ac75527c28bcb35961d3a46c867e6f8d867e4..fb83614b3aad831c832b166631ec7f8f0ba2261c 100644 --- a/frontend/components/label/Box.vue +++ b/frontend/components/label/Box.vue @@ -1,14 +1,14 @@ <template> <div v-if="!isDeleted" class="box-wrapper"> <!-- Identifier Square --> - <div + <!-- <div v-if="bIndex !== -1" id="bIndex" class="shadow" :style="{ top: bTop + bHeight + -10 + 'px', left: bLeft + 'px'}" > id: {{ bIndex }} - </div> + </div> --> <div v-if="isDeleteActive"> <i diff --git a/frontend/pages/main/coco.vue b/frontend/pages/main/coco.vue index 67936f41552d350adecdb516c999b1ca674c6696..9f08aed63b1579f86bc89337ff4a9ea58b1b387e 100644 --- a/frontend/pages/main/coco.vue +++ b/frontend/pages/main/coco.vue @@ -55,8 +55,10 @@ export default { mixins: [getAllLabeledImages], data () { return { + dataset: '', isOutputViewer: true, isLabeled: true, + imagesObj: {}, backendURL: backendURL, standard: 'coco', search: '', @@ -74,56 +76,163 @@ export default { this.dataset = newDataset this.updateUI = !this.updateUI }, - async getAllLabel(standard){ + 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 + var imagesArr = [] + Object.keys(this.imagesObj).forEach((imageID) => { + imagesArr.push(this.imagesObj[imageID]) + }) + var COCOJSON = { + info: infoObj, + licenses: licensesArr, + categories: categoriesAndAnnotations.categories, + images: imagesArr, + annotations: categoriesAndAnnotations.annotations + } + 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 this.standardJSON(rawJSON, standard) + 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 } }, - standardJSON(rawJSON, standard){ - var JSONstandard = [] - rawJSON.forEach(element => { - var area = element.label_width * element.label_height, - 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 + async getCategoriesAndAnnotationsArr () { + var allLabels = await this.getAllLabel() + var categoriesArr = await this.getCategoriesArr(allLabels) + var annotationsArr = await this.getAnnotationsArr(allLabels) + return { + categories: categoriesArr, + 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 } - 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) + 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 }) - return JSONstandard + }, + 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') - var label = await this.getAllLabel(this.standard) - var text = JSON.stringify(label,0,5) + // var label = await this.getAllLabel(this.standard) + var COCOJSON = await this.getCOCOJSON() + console.log("COCO: ", COCOJSON) + var text = JSON.stringify(COCOJSON, 0, 5) element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)) element.setAttribute('download',filename) element.style.display = 'none'