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:
<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:
<html>
<head>
<title>Image</title>
</head>
<body>
<input
type="text"
id="imgInput"
value="https://tudosobrecachorros.com.br/wp-content/uploads/precos-de-cachorro.png"
/>
<input type="button" id="btn" value="Analisar imagem" />
<img src="" id="img" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const imgInput = document.getElementById('img')
const img = document.getElementById('img')
imgInput.addEventListener('blur', () => (img.src = imgInput.value))
</script>
</body>
</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. Para isso precisamos colocar nossa chave do Azure e também uma instância do axios para passarmos o baseURL e o headers que é onde preciso mandar algumas coisas como content type:
<script>
const btn = document.getElementById('btn')
const imgInput = document.getElementById('imgInput')
const img = document.getElementById('img')
const key = 'keyDoAzure'
const azure = axios.create({
baseURL:
'https://westcentralus.api.cognitive.microsoft.com/vision/v1.0/analyze',
headers: {
'Content-type': 'application/json',
'Ocp-apim-Subscription-Key': key
}
})
imgInput.addEventListener('blur', () => {
img.src = imgInput.value
})
btn.addEventListener('click', () => {
azure
.post(
'?visualFeactures=Categories,Description,Color&details=&language=en',
{ url: imgInput.value }
)
.then((data) => {
console.log(data)
})
})
</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!
