Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
157 lines (137 sloc) 5.82 KB
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container fluid>
<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
<v-img :src="image_url" height="300px" v-if="image_url" contain></v-img>
<v-text-field label="Select Image" @click='pickFile' v-model='image_name' prepend-icon='attach_file'></v-text-field>
<input
type="file"
style="display: none"
ref="image"
accept="image/*"
@change="onFilePicked"
>
</v-flex>
<v-layout align-center justify-center>
<v-btn v-show="!uploading" color="green" dark large @click="pickFile" >
Choose New Image &nbsp; <v-icon>upload</v-icon>
</v-btn>
<v-btn v-show="image_file && !uploading" color="blue" dark large @click="uploadFile" >
Upload &nbsp; <v-icon>upload</v-icon>
</v-btn>
<div v-show="uploading">Uploading</div>
</v-layout>
</v-container>
<v-container>
<v-alert v-show="error_message"
:value="true"
type="error"
>
{{error_message}}
</v-alert>
<v-layout row wrap>
<v-flex xs12 >
<v-data-table
:headers="headers"
:items="image_analysis"
class="elevation-1"
:total-items="image_analysis.length"
hide-actions
>
<template slot="items" slot-scope="props">
<td>{{ props.item.Name }}</td>
<td>{{ props.item.Confidence }}</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
<script>
new Vue({
el: '#app',
data: {
image_name:"",
image_file:"",
image_url:"",
uploading:false,
// returned on successful upload
uploaded_image:{},
image_analysis:[],
headers: [
{ text: 'Name' },
{ text: 'Confidence' }
],
error_message:null,
},
created(){
} ,
methods:{
pickFile () {
this.error_message = null
this.$refs.image.click ()
},
onFilePicked (e) {
const files = e.target.files
if(files[0] !== undefined) {
this.image_name = files[0].name
if(this.image_name.lastIndexOf('.') <= 0) {
return
}
const fr = new FileReader ()
fr.readAsDataURL(files[0])
fr.addEventListener('load', () => {
this.image_url = fr.result
this.image_file = files[0]
})
} else {
this.image_name = ''
this.image_file = ''
this.image_url = ''
}
},
async uploadFile()
{
this.uploading = true;
let formData = new FormData();
formData.append('file',this.image_file);
try{
axios.defaults.headers.common['x-api-key'] = "DEMO-API-KEY" // Replace this with your API Key
let response = await axios.post('https://api.thecatapi.com/v1/images/upload', formData, {headers: {'Content-Type':'multipart/form-data' }})
console.log(response.data)
this.uploaded_image = response.data
this.uploading = false;
this.image_file = null
this.loadImageAnaylsis(this.uploaded_image.id)
}catch(error){
console.log(error)
this.error_message = error.response.data.message
this.uploading = false;
this.image_file = null
}
},
async loadImageAnaylsis(image_id)
{
let response = await axios.get('https://api.thecatapi.com/v1/images/'+image_id +"/analysis") // Ask for 1 Image, at full resolution
this.image_analysis = response.data[0].labels
console.table(response.data[0].labels)
}
}
})
</script>
</body>
</html>
You can’t perform that action at this time.