Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Usando Cloud Vision para analizar imagenes

11/28
Recursos

Aportes 13

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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>

¿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

Creo que faltó detenerse a explicar mejor como es la interacción con cloud vision, los features que puedes consultar, etc. El profesor le está dando mucha importancia al código frontend en lugar de dárselo a las herramientas de ML.

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.