Classificação de imagens com Azure

Escrito por

Na dica de hoje, vamos continuar falando sobre classificação de imagens de forma automática, mas será uma outra abordagem, a de utilizar um serviço de visão computacional para reconhecer e classificar essa imagem.

Vamos utilizar a API Azure Computer Vídeo. Como pegamos uma key dessa API?

Se você colocar no Google Azure Cognitive Services, vamos ter serviços cognitivos, clique no link e você pode experimentar os serviços gratuitamente, apenas acessando ‘computer vision API’ para conseguir a Key.

Novamente no Google, vamos procurar o ‘axios http’ e importá-lo utilizando a cdn:

1<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Agora, no Visual Studio Code, vou criar um arquivo novo e salvar como azure-image.html. A ideia é a seguinte, vamos ter um input type text onde vamos por uma url para poder reconhecer a imagem:

1<html>
2 <head>
3 <tittle> Image </tittle>
4 </head>
5
6 <body>
7 <input
8 type="text"
9 id="imgInput"
10 value="https://tudosobrecachorros.com.br/wp-content/uploads/precos-de-cachorro.png"
11 />
12 <input type="button" id="btn" value="Analisar imagem" />
13 <img src="" id="img" />
14
15 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
16 <script>
17 const imgInput = document.getElementById('img') const img =
18 document.getElementById('img') imgInput.addEventListener('blur', () => (
19 img.src = imgInput.value ))
20 </script>
21 </body>
22</html>

Assim podemos colocar a url de uma imagem e clicar em analisar imagem, mas temos também uma imagem padrão. Toda vez que essa imagem padrão for trocada, nós trocamos essa imagem.

Agora vamos fazer uma requisição utilizando axios para que a gente consiga classificar essa imagem. Agora vamos classificar, para isso precisamos colocar nossa chave do Azure e também uma instância do axio para passarmos o baseURL e o headers que é onde preciso mandar algumas coisas como content type:

1<script>
2
3const btn = document.getElementById('btn')
4const imgInput = document.getElementById('imgInput')
5const img = document.getElementById('img')
6const key = 'keyDoAzure'
7const azure = axios.create({
8 'https://westcentralus.api.cognitive.microsoft.com/vision/v1.0/analyze',
9 headers: {
10 'Content-type': 'application/json',
11 'Ocp-apim-Subscription-Key': key
12 }
13})
14
15imgInput .addEventListener('blur', () => {
16 img.src = imgInput.value
17})
18
19btn.addEventListener('click', () => {
20 azure.post('?visualFeactures=Categories, Description, Color&details=&language=en', {
21 url: ImgInput.value
22 }).then( data => {
23 console.log(data)
24 })
25})
26
27</script>

Ao rodar, perceba que ele consegue capturar várias tags, além de cores dominantes no background, na frente, etc. Podemos utilizar isso para classificar, por exemplo, se a foto tem algum tipo de violência.

Curta o DevPleno no Facebook, inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

Evolua mais rápido

Junte-se a milhares de desenvolvedores no nosso time de alunos premium e alcance mais rápido o próximo nível da sua carreira.

Ver cursos Premium