Bienvenida e Introduccion

1

Qué aprenderás sobre análisis predictivo

2

Introducción a Cloud Machine Learning

3

¬ŅPor qu√© correr cargas de Machine Learning en la nube?

Machine Learning genérico

4

Cinco increíbles APIs para diferentes usos de Machine Learning

5

Entendiendo las APIs de Machine Learning

6

Caso de Estudio: APIs de Machine Learning

7

Configurando el proyecto

8

Guardando im√°genes en Cloud Storage

9

Guardar datos en Firebase

10

Generando comentarios en tu proyecto

11

Usando Cloud Vision para analizar imagenes

12

Usando el NLP API para analizar sentimiento

13

Analizando la respuesta del NLP en API

14

Deploy a Firebase

Machine Learning con tus datos

15

Introducción y caso de estudio: AutoML

16

Preparando datos para AutoML

17

Entrenar y predicir con tu modelo

18

Evaluando tu modelo

19

Consejos para el entrenamiento

Machine Learning para An√°lisis de Datos

20

¬ŅQu√© es BigQuery Machine Learning?

21

Introducción a la consola de BigQuery Machine Learning

22

Crear y predecir con BigQuery Machine Learning

Machine Learning a la medida

23

¬ŅQu√© es Cloud Machine Learning Engine?

24

Entrenando un modelo con Cloud Machine Learning Engine

25

Sirviendo un modelo con Cloud Machine Learning Engine

Finalizando el curso

26

Conclusiones y cierre

Bonus meme: Machine Learning en la frontera

27

Introducción a Machine Learning en la frontera (TF.js y edge tpu, kubeflow)

28

¬ŅC√≥mo se usa Machine Learning para predecir datos?

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.