Neste artigo, vamos criar uma aplicação ASP.NET Core usando uma API de Inteligência Artificial da Microsoft. Parece fácil? Claro que é! Utilizar a IA do Azure é simples como tomar um café. Vamos usar a API Computer Vision – todo projeto precisa de um desafio, né?

Cognitive Services

Imagem

Cognitive Services da Microsoft é um mundo de APIs e SDKs de Inteligência Artificial, que vai desde detectar emoções em vídeos até entender a fala. Quem não quer uma máquina que entenda você melhor que seus colegas de trabalho?

Computer Vision API

Um robô chamado Pepper segurando um iPad

A API Computer Vision facilita a análise de imagens. Ela identifica elementos, faz OCR para ler textos e até tenta decifrar sua letra de médico.

SB Admin

SB Admin é um template front-end gratuito, conhecido por muitos, feito em Angular 6 e Bootstrap 4.

Projeto

E o projeto? Vamos criar uma WebApi em ASP.NET Core que utiliza o Computer Vision do Azure. Ela analisa uma imagem e te retorna um JSON. Vamos usar Angular 6 para fazer o upload das imagens com o SB Admin Bootstrap 4.

Resultado deste tutorial

VAMOS AO CÓDIGO

Código em um computador

Vamos abrir o código no VSCode.

Pré-requisitos

Prepare-se para começar com esses itens básicos:

Computer Vision API no Azure

No Azure, vá em Create Service > AI + Machine Learning > Computer Vision.

Portal Azure

Preencha os dados e use a camada F0. Depois, vá em All Resources, ache o Cognitive Services e guarde a Key.

VSCode

Crie a pasta CognitiveServices. No terminal, use os comandos necessários.

Startup.cs

Configure o arquivo Startup.cs para o Swagger.

ComputerVisionController.cs

A ComputerVisionController tem métodos para obter informações pela Url e upload.

Não esqueça de substituir YOUR KEY pela chave do Azure.

Models

Na pasta Models, adicione o ImageModel.cs.

Frontend - SB Admin

Dentro do VSCode, rode os comandos para baixar e instalar o necessário.

module

No computer-vision.module.ts, ajuste as rotas do Angular.

HTML Component

Crie um formulário para a WebApi.

Service

Configure o computer-vision.service.ts para manter a comunicação.

Component

Gerencie o upload no componente.

Models

Use FileUpload.ts para estruturar seus dados.

E ImageAnalisys para completar a estrutura.

Configurando o novo componente

Adicionando nova rota

Encontre a rota certa em layout-routing.module.ts.

Environment

Atualize o environment com o endereço da WebApi.

sidebar.component.ts

Altere o sidebar.component.html e adicione sua nova página.

Demo

Confira a demo do projeto.

Download

Clippy Octocat

O código está disponível no GitHub. Sim, o paraíso dos repositórios.