Usando Cloud Vision para analizar imagenes

Hola, me funciono bien aquí dejo el código de Home.vue, instalé axios con npm install axios --save:

<template>
  <v-container>
    <v-layout xs12 pl-2>
      <v-flex>
        <input type="file" ref="fileInput" id="file" @change="processFile($event)">
      </v-flex>
    </v-layout>
    <v-layout xs12 pb-3>
      <v-flex>
        <v-btn color="primary" @click="uploadFile">Enviar</v-btn>
      </v-flex>
    </v-layout>
    <v-divider></v-divider>
    <v-layout row wrap align-center>
      <v-flex xs12 >
        <v-container fluid class="pl-0 pr-0">
            <v-layout row wrap>
              <v-flex xs12 sm6 lg3 v-for="image in images" v-bind:key="image.id">
                <v-card>
                  <v-img
                    :src="image.url"
                    height="200px"
                  ></v-img>
                  <v-card-title>
                    <div>
                      <span class="grey--text">{{image.name}}</span>
                      <v-chip> {{image.scorePromedio}}</v-chip>
                      <br>
                      <span>
                        {{image.labels | separateLabels}} 
                      </span>
                    </div>
                  </v-card-title>
                  <v-card-actions>
                    <v-btn text @click="goToImageDetail(image.id)">
                      Explore
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-flex>
            </v-layout>
        </v-container>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
  import { firestore } from '@/main'
  import { storage } from '@/main'
  import axios from 'axios'

  export default {
    name: 'Home',
    data: () => ({
      apiKey: 'apiKeyDeSuCuentaDeCloud',
      file: '',
      images: []
    }),
    methods: {
      processFile: function(event){
        this.file = event.target.files[0]
      },
      uploadFile: function(){
        let name = (+new Date()) + '-' + this.file.name
        let metadata = { contentType: this.file.type }
        storage.child(name).put(this.file, metadata)
        .then(snapshot => snapshot.ref.getDownloadURL())
        .then( url => {
          const input = this.$refs.fileInput
          input.type = 'text'
          input.type = 'file'
          const data = {
            "requests":[{
              "features":[{
                "type": "LABEL_DETECTION"
              }],
              "image": {
                "source": {
                  "imageUri": url
                }
              }
            }]
          }

          axios.post(`https://vision.googleapis.com/v1/images:annotate?key=${this.apiKey}`, data)
          .then(response => {
            const labels = []
            let slicedLabelArray = response.data.responses[0].labelAnnotations.slice(0,5)
            slicedLabelArray.forEach(function(label){
              labels.push(label.description)
            })
            let image = {
            url: url,
            name: name,
            labels: labels,
            createdAt: (+new Date()),
            scorePromedio: 0
          }
          firestore.collection('images').add(image)
          })
          
          
        })
      },
      goToImageDetail: function(id){
        this.$router.push({ path:  `/image/${id}` })
      }
    },
    firestore(){
      return {
        images: firestore.collection('images')
      }
    },
    filters: {
      separateLabels: function(value){
        return `${value[0]}, ${value[1]}, ${value[2]} , ${value[3]}, ${value[4]}`
      }
    }
  }
</script>

URL de la WebApp: https://fabrica-memes-6e168.firebaseapp.com/

¿Al ser vue un framework frontend, no queda expuesta la api-key?

Hola me sigue dando un error con el siguiente codigo:

axios.post(https://vision.googleapis.com/v1/images:annotate?key=${this.apiKey}, data)
.then(response => {
const labels = []
let slicedLabelArray = response.data.responses[0].labelAnnotations.slice(0,5)
slicedLabelArray.forEach(function(label){
labels.push(label.description)
})

alguien me podría ayudar?

Excelente clase para conocer las categorias de una imagen por medio de la API de cloud vision

Es mejor utilizar fetch que axios, pues es nativo y a dia de hoy tiene soporte para casi todos los navegadores (menos IE)

Para hacer varias consultas a Vision se puede hacer d ela siguiente manera:

"requests":[{
                                    "features":[{
                                        "type":"LABEL_DETECTION"
                                    },{
                                        "type":"DOCUMENT_TEXT_DETECTION"
                                    },{
                                        "type":"FACE_DETECTION"
                                    }],
                                    "image":{
                                        "source":{
                                            "imageUri":url
                                        }
                                    }
                                }]

Al momento de instalar axios recuerden que debe ser desde la carpeta donde tienen el proyecto Vue

Gracias Wilantury

😦 bueno, no hay de otra sino seguir

Hola a todos, si a alguno le falló su proyecto después de instalar axios y le aparece un error como este:

ERROR  Failed to compile with 187 errors
These dependencies were not found: ....

Lo que tiene que hacer es lo siguiente:

1. Eliminar la carpeta de node_modules,
2. Eliminar el caché con el siguiente comando.

npm cache clean --force

1. Luego reinstalar las dependencias con el comando:

npm install

A mi me funcionó, espero que a ustedes igual.
Un abrazo!

Saludos, espero que se encuentre bien. Yo tuve problemas con el CORS, resulta que para habilitar los requests desde cualquier dominio es necesario habilitarlo desde la terminal del GCLOUD:

En la terminal, hay que crear un archivo cors.json, yo lo hice así:

touch cors.json
nano cors.json

Y a continuación escribí en cors.json:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Luego se debe ejecutar:

gsutil cors set cors.json gs://NOMBREDESUBUCKET

Finalmente en el código tuve que hacer los siguientes cambios:

<template>
  <v-container>
    <v-layout xs12 pl-2>
      <v-flex>
        <input type="file" ref="fileInput" id="file" @change="processFile($event)">
      </v-flex>
    </v-layout>
    <v-layout xs12 pb-3>
      <v-flex>
        <v-btn color="primary" @click="uploadFile">Enviar</v-btn>
      </v-flex>
    </v-layout>
    <v-divider></v-divider>
    <v-layout row wrap align-center>
      <v-flex xs12 >
        <v-container fluid class="pl-0 pr-0">
            <v-layout row wrap>
              <v-flex xs12 sm6 lg3 v-for="image in images" v-bind:key="image.id">
                <v-card>
                  <v-img
                    :src="image.url"
                    height="200px"
                  ></v-img>
                  <v-card-title>
                    <div>
                      <span class="grey--text">{{image.name}}</span>
                      <v-chip> {{image.scorePromedio}}</v-chip>
                      <br>
                      <span>
                        {{image.labels | separateLabels}} 
                      </span>
                    </div>
                  </v-card-title>
                  <v-card-actions>
                    <v-btn text @click="goToImageDetail(image.id)">
                      Explore
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-flex>
            </v-layout>
        </v-container>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
  import { firestore } from '@/main'
  import { storage } from '@/main'
  import axios from 'axios'

  export default {
    name: 'Home',
    data: () => ({
      apiKey: 'USEYOURAPIKEY',
      file: '',
      images: []
    }),
    methods: {
      processFile: function(event){
        this.file = event.target.files[0]
      },
      uploadFile: function(){
        let name = (+new Date()) + '-' + this.file.name
        let metadata = { contentType: this.file.type }
        storage.child(name).put(this.file, metadata)
        .then(snapshot => snapshot.ref.getDownloadURL())
        .then( url => {

          const input = this.$refs.fileInput
          input.type = 'text'
          input.type = 'file'

          axios.get(url, {responseType: 'arraybuffer'})
          .then(image=>{ 
              let bufferImage = Buffer.from(image.data).toString('base64')

              const data = {
                "requests":[
                  {
                    "image":{
                      "content":bufferImage
                    },
                    "features":[
                      {
                        "type":"LABEL_DETECTION",
                        "maxResults":10
                      }
                    ]
                  }
                ]
              }

          axios.post(`https://vision.googleapis.com/v1/images:annotate?key=${this.apiKey}`, data)
          .then(response => {
            const labels = []
            console.log(response.data)
            let slicedLabelArray = response.data.responses[0].labelAnnotations.slice(0,5)
            slicedLabelArray.forEach(function(label){
              labels.push(label.description)
            })
            let image = {
            url: url,
            name: name,
            labels: labels,
            createdAt: (+new Date()),
            scorePromedio: 0
          }
          firestore.collection('images').add(image)
          })


            }
          )          
        })
      },
      goToImageDetail: function(id){
        this.$router.push({ path:  `/image/${id}` })
      }
    },
    firestore(){
      return {
        images: firestore.collection('images')
      }
    },
    filters: {
      separateLabels: function(value){
        return `${value[0]}, ${value[1]}, ${value[2]} , ${value[3]}, ${value[4]}`
      }
    }
  }
</script>

Espero que poder ayudar con esto. Lamentablemente el curso está muy mal documentado y algunas cosas ya están muy desactualizadas.