Select Git revision
ModelUpload.vue
ModelUpload.vue 4.06 KiB
<template>
<div class="modal-card">
<b-progress :value="progress" size="is-large" show-value :type="status">
{{message}}
</b-progress>
</div>
</template>
<script>
export default {
name: 'ModelUpload',
props: {
model: {
type: Object,
default: function () {
return {}
}
}
},
data () {
return {
message: '',
progress: 0,
status: 'is-primary',
stausMessage: '',
modelId: null
}
},
mounted () {
this.saveModel()
},
methods: {
setProgress (step) {
switch (step) {
case 0:
this.message = 'Sending description'
this.progress = 25
break
case 1:
this.message = 'Sending model file'
this.progress = 50
break
case 2:
this.message = 'Sending custom layers model'
this.progress = 75
break
case 3:
this.message = 'Upload completed !'
this.progress = 100
this.status = 'is-success'
break
}
},
setError (message) {
this.message = message
this.status = 'is-danger'
},
async saveModel () {
this.setProgress(0)
var response = await this.uploadModel()
if (response.error) {
this.setError(response.message)
return
} else {
this.modelId = response.id
}
if (this.model.file !== undefined) {
console.log('Upload model ' + this.model.file)
this.setProgress(1)
if (!await this.uploadModelFile()) {
this.setError('Model upload error')
return
}
}
if (this.model.customLayers !== undefined) {
console.log('Upload layers ' + this.model.customLayers)
this.setProgress(2)
if (!await this.uploadLayers()) {
this.setError('Custom layer upload error')
return
}
}
this.setProgress(3)
},
async uploadModel () {
const url = this.$serverurl + 'models'
const token = await localStorage.getItem('token')
try {
const response = await fetch(url, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: 'Bearer ' + token
},
body: JSON.stringify({
name: this.model.name,
shortDescription: this.model.shortDescription,
longDescription: this.model.longDescription,
performance: this.model.performance,
tags: this.model.tags,
customLayers: this.model.customLayers
})
})
return await response.json()
} catch (error) {
return null
}
},
async uploadModelFile () {
const data = new FormData()
const url = this.$serverurl + 'models?id=' + this.modelId + '/upload'
const token = await localStorage.getItem('token')
data.append('model', this.model.file)
try {
const response = await fetch(url, {
method: 'POST',
headers: {
Authorization: 'Bearer ' + token
},
body: data
})
return response !== 200
} catch (error) {
return null
}
},
async uploadLayers () {
const token = await localStorage.getItem('token')
for (var i = 0; i < this.model.customLayers.length; i++) {
const layer = this.model.customLayers[i]
const data = new FormData()
const url = this.$serverurl + 'models?id=' + this.modelId + '/layer?id=' + i
console.log('Upload layers ' + i + ' | ' + layer.file)
if (layer.file === undefined) continue
data.append('layer', layer.file)
try {
const response = await fetch(url, {
method: 'POST',
headers: {
Authorization: 'Bearer ' + token
},
body: data
})
if (response !== 200) return false
} catch (error) {
return false
}
}
return true
}
}
}
</script>
<style>
</style>