[TUTORIAL] Como Criar um Aplicativo de Machine Learning sem Programar usando o Google Cloud Vision API

Você com certeza já deve ter ouvido falar de machine learning, ou inteligência artificial, certo?

Esses são os temas da moda em tecnologia.

Assisti um vídeo muito bom do Filipe Deschamps, no qual ele ficava testando e experimentando uma ferramenta de machine learning do Google chamada Cloud Vision API.

Basicamente, ele inseria uma foto de qualquer coisa, e o Vision API dizia pra ele o que tinha na foto, se fosse uma pessoa ele conseguia identificar as emoções, se fosse um texto ele conseguia escanear o texto por OCR, se fosse um cachorro ele conseguia identificar a raça, enfim, ele usava todo esse conhecimento quase ilimitado da API do Google pra identificar padrões em qualquer imagem.

E se você está atento aqui no meu canal, já percebeu que consegue desenvolver softwares e aplicativos desde básicos à avançados sem usar nenhuma linguagem de programação, certo?

E aí eu pensei: será que a gente não consegue pegar emprestada toda essa inteligência do Google pra criar o NOSSO aplicativo de machine learning, sem código sem programação?

E sim, conseguimos!

Veja como ficou o sistema no vídeo, e como fizemos para construí-lo, e não deixe de ler o tutorial passo a passo abaixo:

1. Criar a Chave de API do Google Cloud Vision

Para conseguirmos usar a Google Cloud Vision API, precisamos de uma API KEY, é uma chave de autenticação. Para conesguir a sua (gratuita) é só seguir este passo:

Acesse o Google Cloud Platform (https://console.cloud.google.com) e crie um projeto (ou acesse um projeto que você já tenha), e então siga os passos abaixo:

Imagem ilustrativa Acesse Menu > APIs e Serviços > Painel

Imagem illustrativa Clique em + Ativar APIs e Serviços

Imagem illustrativa

Procure por CLOUD VISION API*

Imagem illustrativa Clique e ative a Cloud Vision API

Imagem ilustrativa Agora acesse o Menu > APIs e serviços > Credenciais

Imagem illustrativa Clique em Criar credenciais e Chave de API

Imagem illustrativa E PRONTO! Agora você já tem uma Chave do Google Cloud Vision API para poder autenticar o acesso quando fizermos a chamada nos próximos passos

Pronto, agora você tem a Chave da API. Com isso, você já consegue fazer a chamada pro Google Vision API e ela será autorizada.

Agora, vamos acessar o Bubble, criar nossa conta gratuita (caso ainda não tenha), criar um novo Aplicativo, e configurar o Conector de API, que é o que vai nos permitir integrar nosso aplicativo ao Vision API.

2. Criar o Conector de API no Bubble

Caso ainda não tenha, instale o plugin API CONNECTOR no seu Aplicativo Bubble.

Imagem ilustrativa Caso ainda não tenha, instale o plugin API CONNECTOR no seu Aplicativo Bubble.

Imagem ilustrativa Acesse o Plugin API Connector (na aba Plugins), e crie uma nova API chamada Google (ou Google NoAuth, como fiz aqui, apenas para identificar que esta é uma chama de API que não precisa de autenticação), com o modo Authentication em None or self-handled. Clique em Add another call.

Imagem ilustrativa Após clicar em Add another call, crie uma chamada de API com estes dados

Nome da Chamada de API: Vision API

Use as: Action

Data type: JSON

POST: https://vision.googleapis.com/v1/images:annotate?key=[key]

URL Parameters: key / adicione aqui a Chave de API do Google Vision API que você obteve no 1° passo

Body (JSON object): Aqui, copie e cole esse texto que está logo abaixo. É uma série de instruções em formato JSON que informa ao Google quais são, exatamente, os dados da API que queremos receber de volta:

{
  "requests":[
    {
      "image":{
        "source":{
          "imageUri":
          "<URLimagem>"
        }
      },
      "features":[
        {
          "type":"LOGO_DETECTION",
          "maxResults":3
        },
        {
          "type":"LABEL_DETECTION",
          "maxResults":10
        },
        {
          "type":"LANDMARK_DETECTION",
          "maxResults":10
        },
        {
          "type":"TEXT_DETECTION",
          "maxResults":10
        },
        {
          "type":"IMAGE_PROPERTIES",
          "maxResults":10
        },
        {
          "type":"WEB_DETECTION",
          "maxResults":10
        },
        {
          "type":"FACE_DETECTION"
        },
        {
          "type":"OBJECT_LOCALIZATION",
          "maxResults":10
        },
        {
          "type":"SAFE_SEARCH_DETECTION"
        }
      ]
    }
  ]
}

Para entender:

• “LOGO_DETECTION” significa que queremos que o Vision API detecte quais logotipos estão presentes na imagem. • “LABEL_DETECTION” significa que queremos saber quais ‘rótulos’ o Google identifica. • “LANDMARK_DETECTION” verifica a presença de Locais Históricos ou Pontos de Referência, como a Torre Eiffel. • “TEXT_DETECTION” solicita quais textos estão presentes na imagem, e o Google escaneia e retorna com caracteres. • “IMAGE_PROPERTIES” são propriedades das imagens que usamos para obter as cores. • “WEB_DETECTION” são os termos de pesquisa na internet que mais se assemelham. • “FACE_DETECTION” busca expressões faciais e de emoção. • “OBJECT_LOCALIZATION” procura por objetos, como mesas, copos, frutas. • “SAFE_SEARCH_DETECTION” avalia se a imagem contém conteúdo adulto, de violência, conteúdo racista, médico ou se parece um Meme (que o Google chama de Spoof).

Body Parameters (Key): URLimagem / Aqui, desmarque a caixinha “Private”, pois é o URL da imagem que você vai enviar para o Google para que ele analise. Neste primeiro momento, coloque o URL de uma imagem que preparei especialmente para obter todos os dados possíveis, com uma foto minha, da torre eiffel, e do logo da Apple. Segue abaixo o URL da imagem para você inserir aqui:

https://www.semcodar.com.br/wp-content/uploads/2019/09/TreinarVisionAPI.jpg

Pront, tudo configurado! Agora, clique em Initialize Call.

O Google manda de volta muitos, mas MUITOS dados. Agora vamos escolher um por um quais dados realmente vamos utilizar. Se quiser fazer como fiz, basta seguir essa referência acima e nas imagens de baixo.

Imagem ilustrativa

Feita a instalação instantânea do plugin Color API, você já conseguirá criar este texto. Configure assim:

Imagem ilustrativa

O que estamos fazendo é o seguinte: para converter a cor de RGB para Hexadecimal, a Color API nos pede 3 valores: o R (Red – vermelho de 0 a 255), o G (Green – verde de 0 a 255) e o B (Blue – azul de 0 a 255). A configuração acima é para enviarmos exatamente estes dados para o Color API, e ele vai nos devolver o nome da cor.

TEXTO 2: Current cell’s Vision API imagePropertiesAnnotation dominantColors color’s score:formatted as 102.858,00%

SHAPE: Esse Shape (forma) é apenas para exibir a cor. A única configuração aqui é, em Color, coloque The Color API – Get HEX from RGB’s hex value. Ou seja, ao informarmos a cor em Hexadecimal, esse shape já vai ficar nessa cor.

TEXTO 2: (continuação) Current cell’s Vision API imagePropertiesAnnotation dominantColors color’s score:formatted as 102.858,00%

GRUPO 5b. REPEATING GROUP Cores

The Color API – Get HEX from RGB’s name value
O resultado da cor em Hex

5c. REPEATING GROUP Pesquisa na Web

Current cell’s Vision API webDetection webEntitie’s description
Current cell’s Vision API webDetection webEntitie’s score:formatted as 102.858,00%

5d. REPEATING GROUP Objetos Encontrados

Current cell’s Vision API localizedObjectAnnotation’s name
Current cell’s Vision API localizedObjectAnnotation’s score:formatted as 102.858,00%

5e. REPEATING GROUP Imagens Similares

Vision API webDetection visuallySimilarImage’s URL

5f. REPEATING GROUP Palavra na Web

Current cell’s Vision API webDetection bestGuessLabel’s label

5g. GRUPO Face Inserir 5 novos grupos, um para cada leitura facial (Alegria, Tristeza, Raiva, Surpresa, Cabeça/Headwear) — cada grupo deve puxar a leitura correspondente do visionAnnotations

5h. GRUPO Safe Search 5i. GRUPO Textos 5j. REPEATING GROUP Logotipos 5k. REPEATING GROUP Locais 5l. REPEATING GROUP Mapas

5i. GRUPO Textos Type of content: Vision API textAnnotation Data source: Parent group’s Vision API response’s textAnnotations:first item Dentro do grupo colocar um texto: TEXTO: Parent group’s Vision API textAnnotation’s description (texto encontrado e escaneado na imagem)

5j. REPEATING GROUP Logotipos Type of content: Vision API logoAnnotation Data source: Parent group’s Vision API response’s logoAnnotation Dentro do Grupo Repetidor colocar 2 textos: TEXTO 1: Current cell’s Vision API logoAnnotation’s description (essa é a descrição do logotipo encontrado) TEXTO 2: Current cell’s Vision API logoAnnotation’s score:formatted as 102.858,00%

5k. REPEATING GROUP Locais Type of content: Vision API landmarkAnnotation Data source: Parent group’s Vision API response’s landmarkAnnotation Dentro deste grupo repetidor colocar 2 textos e 1 Repeating Group: TEXTO 1: Current cell’s Vision API landmarkAnnotation’s description TEXTO 2: Current cell’s Vision API landmarkAnnotation’s score:formatted as 102.858,00%

REPEATING GROUP Mapas:

Mapas: Vision API location Marker address: Calculate Formula -> Coordinates to Address Latitude: Current cell’s Vision API location’s latLng latitude Longitude: Current cell’s Vision API location’s latLng longitude

Todo o layout está montado!

Se você estiver com dúvidas em algum ponto, sugiro acessar o Editor do Bubble.io onde montei o aplicativo e você pode visualizar livremente cada item acima.

Agora vamos para a última parte, vamos definir as ações do Botão Analisar:

3. Layout do Aplicativo

Monte o aplicativo com o layout, cores e estilos que você desejar.

O importante é que o aplicativo contenha esses elementos abaixo:

Imagem ilustrativa

Os elementos que você precisa ter, para receber todos os dados, são:

INPUT URL tipo texto, onde o usuário irá inserir o URL da imagem que quer analisar
- CONDICIONAL: When PictureUploader’s value is not empty, mudar Initial Content para https:PictureUploader’s value
- O objetivo dessa formatação condicional é para que, se o usuário optar por carregar uma foto (via câmera de celular ou via computador), o INPUT irá automaticamente perceber que há uma foto carregada, e já vai mudar o próprio texto para informar o endereço URL onde está o arquivo.
PICTURE UPLOADER, onde o usuário poderá clicar para inserir uma foto do computador dele ou, se estiver no celular, pode bater uma foto na hora e mandar pro Google Vision.
IMAGE, que irá mostrar a imagem do endereço URL que consta no INPUT.
- DYNAMIC IMAGE: Input URL’s value
BOTÃO Analisar
- Este é o único botão que irá executar uma ação no nosso aplicativo. As ações estão um pouco mais abaixo neste tutorial.
- Opcional: caso você queira fazer aquela jogadinha que ensino no vídeo pro botão mudar para “Analisando…” enquanto ele pensa após o usuário clicar, você precisa criar um Custom State tipo yes/no neste botão.
GRUPO CARDS com todos os Cards onde iremos mostrar os dados
- 5a. REPEATING GROUP Rótulos
- 5b. REPEATING GROUP Cores
- 5c. REPEATING GROUP Pesquisa na Web
- 5d. REPEATING GROUP Objetos Encontrados
- 5e. REPEATING GROUP Imagens Similares
- 5f. REPEATING GROUP Palavra na Web
- 5g. GRUPO Face
- 5h. GRUPO Safe Search
- 5i. GRUPO Textos
- 5j. REPEATING GROUP Logotipos
- 5k. REPEATING GROUP Locais
- 5l. REPEATING GROUP Mapas

Todo o layout está montado!

Se você estiver com dúvidas em algum ponto, sugiro acessar o Editor do Bubble.io onde montei o aplicativo e você pode visualizar livremente cada item acima.

Agora vamos para a última parte, vamos definir as ações do Botão Analisar:

4. Ações

Veja que o único elemento do nosso aplicativo que executa alguma ação é o Botão Analisar.

Ao clicar no botão, serão executadas 5 ações, vide abaixo:

Imagem ilustrativa

Ação 1 – Set state loading of btn Analisar (Opcional): Essa é uma ação opcional e somente estética. Ao colocarmos o botão Analisar, comentei ali em cima que poderíamos colocar um “Estado Personalizado” ou “Custom State” chamado ‘loading’, para informarmos quando o botão está carregando, para que ele mude o texto (de “Analisar” para “Analisando”) e que ele não seja mais clicável, para evitar que o usuário envie o mesmo dado duas vezes. Se quiser utilizar, basta alterar o Custom State LOADING do Botão Analisar para YES. E lá no botão, lembre-se de configurar uma Formatação Condicional que irá alterar o texto e o não-clicável quando o Loading for YES.

Ação 2 – Google NoAuth – Vision API: Essa é a ação principal, é a chamada de API na qual enviamos a foto do campo INPUT URL para o Google, e o Google nos devolve os dados. Basta selecionar esta chamada e no parâmetro URLimagem colocar Input URL’s value.

Ação 3 – Display data in Group Cards: Aqui coletamos todos os dados que recebemos na ação 2, e inserimos esse dado no Grupo Cards (aquele que tem todas caixinhas dentro, lembra?). Basta selecionar Group > Display Data > Element Group Cards e, no Data to display colocar Result of step2 (Google NoAuth – V ersões)’s responses:first item.

Ação 4 – Set state loading of btn Analisar (Opcional): Lembra que na ação 1 colocamos o state LOADING do Botão Analisar como YES? Agora é só colocar como NO, para informar que ele já enviou e já recebeu os dados, portanto o botão pode voltar ao normal.

Ação 5 – Scroll to Group Cards (Opcional): Essa também é uma ação opcional e estética. É só para que, ao terminar todas essas ações, a tela do usuário corra direto para o Grupo Cards. É uma ação bacana pois fica mais claro pro usuário que a ação foi executada e não está mais processando.

E com tudo isso montado, agora já podemos partir pra melhor parte, o teste final.

5. Testar

Agora insira o URL de uma imagem que você quer testar no Input (sugiro fazer com aquela mesma de teste que postei lá em cima), e clicar em Analisar, e todos os dados deverão aparecer.

Se você acessar meu editor do Bubble, vai perceber que tem algumas configurações estéticas que não coloquei aqui, somente para simplificar a explicação.

Espero que tenha gostado de criar seu primeiro aplicativo de Machine Learning!

Não se esqueça de se inscrever no canal para acompanhar este e outros vídeos de programação visual e desenvolvimento de aplicativos sem código.

Links úteis