Node.js + Visual Recognition Parte 2.

Com o multer configurado, iremos para o core do app, a api de reconhecimento visual da Watson. Será necessário criar uma conta no https://console.bluemix.net/registration/ para ter acesso ao Watson, ao criar a conta, você poderá criar uma projeto do tipo Visual Recognition e o mesmo retornará um path em json informando quais são os valores para a configuração da api dentro da app.

Inicialmente iremos declarar a variável que irá receber o tipo VR:

var VisualRecognitionV3 = require('watson-developer-cloud/visual-recognition/v3');

Lembrando que o watson-developer-cloud deverá ser previamente instalado pelo comando npm com a opção –save. Após a configuração do tipo da variável, iremos declarar uma outra o qual recebe esse tipo e adiciona configurações pertinentes a conexão com o Watson.

var visualRecognition = new VisualRecognitionV3({
  url: 'https://URL/api',
  version: 'VERSÃO',
  iam_apikey: 'SUA KEY',
});

Finalizado nosso set de conexão, precisamos adicionar o path de onde a imagem está no servidor, lembrando que pra esse projeto, estamos usando uma imagem (1.jpg) que se sobrepõe quando o próximo usuário executa a API.

  var params = {
    images_file: fs.createReadStream('./public/img/1.jpg')
  };

Para evitar problemas com possível delay entre o front-end com o back-end, iremos declarar a variável acima, depois do request do nosso método POST no qual já executou o multer e o mesmo salvou em nosso arquivo destino.

Ao chamar nossa função de reconhecimento visual, precisamos apenas definir o path de onde está a imagem, declarada na variável params, e irá gerar uma função de call-back o qual iremos tratar possíveis erros antes do render da página end.ejs.

visualRecognition.classify(params, function(err, response) {
  if (err) {
    console.log(err);
  } else {
    console.log(JSON.stringify(response, null, 2));
    res.render('end', { classes: response.images[0].classifiers[0].classes});
  }
});

Após o tratamento de possíveis erros, ao renderizar nossa view, enviaremos para nosso front-end uma variável classes, que irá receber todo o json da resposta a partir da informação classes, que irá conter todas as classes da imagem com seus respectivos scores. Quando a api do Watson retorna a classificação, o modelo chega no formato:

data.images[0].classifiers[0].classes[i].class = Nome da Classes da IMG
data.images[0].classifiers[0].classes[i].score = Score em float.

Neste exemplo, iremos usar o classificador padrão do Watson, pode-se montar um conjunto de classes exclusiva no próprio painel de administração do Watson que deverá ser feito afim de dar mais exclusividade ao projeto. Irei exemplificar a baixo.

Imagine que nosso APP precisa classificar se uma foto é um gato, ou um cão. Inicialmente iremos criar as duas classes no painel e fazer a importação dos dados para o treinamento da máquina. Para importar os dados, a própria api do Watson indica a utilização de 10 modelos por classe e todas elas devem estar em um pacote .ZIP.

Necessita uma certa cautela ao selecionar as imagens necessárias para treinamento e autenticação do aprendizado. As imagens responsáveis pelo aprendizado do Watson, precisão ser “cleans” apenas com o elemento referente a classes, mesmo que o mesmo se repita na foto. Como na imagem a seguir:

• 

  Imagem para treinamento

• 

  Repetindo classes no mesmo input

Para fazer a autenticação da APP, podemos usar fotos como:

Existe uma classe NOT dentro do projeto, ondem lá pode-se armazenar imagens que não contém nas classes cachorro e gato.

Concluindo:

• 

  Treinamento

• 

  NOT

• 

  Validação

Código final da API.js:

var express = require('express');
var router = express.Router();
const multer = require('multer');

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '../ProjIA/public/img');
  },
  filename: function (req, file, cb) {
     var exts = file.originalname.split('.')[1];
    cb(null, '1' + '.' + exts);
  }
});

var upload = multer({ storage: storage });

var VisualRecognitionV3 = require('watson-developer-cloud/visual-recognition/v3');

var fs = require('fs');

var visualRecognition = new VisualRecognitionV3({
  url: '',
  version: '',
  iam_apikey: '',
});


router.get('/', function(req, res, next) {
    res.render('end', { classes: 'teste'});
});

/* GET home page. */
router.post('/', upload.single('file'), function(req, res, next) {
  var data = {};
  var params = {
    images_file: fs.createReadStream('./public/img/1.jpg')
  };


  visualRecognition.classify(params, function(err, response) {
  if (err) {
    console.log(err);
  } else {
    console.log(JSON.stringify(response, null, 2));
    res.render('end', { classes: response.images[0].classifiers[0].classes});
  }

  });


});

module.exports = router;

Exemplo

GitHUB

Node.js + Visual Recognition Parte 1.

Com o Node.js instalado no computador host do app, iremos criar o arquivo inicial do nosso servidor com: npm init, registrado o app, é necessário importar bibliotecas para montar a estrutura base do nosso webserver, seguindo o recomendado, irei importar:

        npm install express –save
	npm install express-generator –save
	npm install multer –save
	npm install ibm-watson-cloud –save
	npm install nodemon –g

O express e o express-generator são micro frameworks que ajuda na configuração das rotas do servidor, multer será responsável por manipular a imagem que nosso usuário irá inserir no front-end e salvar em uma pasta dentro do servidor pelo nosso back-end. Para nossa api de classificação de imagens, iremos importar a lib responsável pela comunicação com a IA Watson. Buscando melhor eficiência no projeto, iremos usar o nodemon apenas para desenvolvimento, com ele poderá fazer alterações no código do servidor sem a necessidade de ficar reiniciando. Ao terminar o download iremos executar o express –view ejs via console e o mesmo irá gerar todas as pastas e arquivos necessário para executar a primeira api no servidor.

Estruturalmente, um servidor Node.js possui uma pasta bin, no qual contém o primeiro arquivo a ser executado quando o servidor estiver ligado. Node_modules carrega todos os módulos importados pelas tags –save ao instalar os pacotes, routes irá assumir nossas rotas de tráfego e as views será front-end renderizada em ejs. O arquivo app.js irá conter todas as informações e configurações do nosso servidor.

No app.js iremos adicionar:

var apiRouter = require('./routes/api');
app.use('/api', apiRouter);

Função responsável para criar uma rota para nossa api.

api.js

var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
  res.render('end', { title: 'Express' });
});
module.exports = router;

Criado um arquivo javascript que irá contar todo o conteúdo necessário para exemplificar nosso exemplo de reconhecimento visual. Inicialmente irá receber um método get e responder com uma view end.ejs com dados que futuramente será recebido da cloud.

            Foi criado uma view index.ejs apenas com um input de imagem, requerendo um método post para a api. Precisa-se criar uma resposta para a requisição post do index.ejs e o mesmo salvar a imagem em um arquivo local. Essa imagem será criada de forma estática, como é um exemplo de como usar a ferramenta, para não consumir banco de dados e várias linhas de código tratando strings e inserts, o foco é o potencial da ferramenta de reconhecimento visual.

const multer = require('multer');
const fs = require('fs');

Importando o multer, responsável pela manipulação de nossa imagem. Multer cria um storage que contém informações do nosso path de destino e de entrada, configurando a variável para aceitar requisição post e salvar a imagem.

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '../ProjIA/public/img');
  },
  filename: function (req, file, cb) {
     var exts = file.originalname.split('.')[1];
    cb(null, '1' + '.' + exts);
  }
});
var upload = multer({ storage: storage });
router.post('/', upload.single('file'), function(req, res, next) {});

---

Chat Simples com Node.js

Geralmente apps de chat de tempo real, são muito complicados para desenvolver, diferente do popular Lamp(PHP), Socket.io é uma solução bem plausível para desenvolvimento de real-time chat.

Essa lib da Node.js, cria um canal de comunicação bi-direcional entre o cliente e o server. Podendo enviar sinal para todos os clientes presentes.

Será necessária uma configuração, primeiramente a instalação do Node.JS que pode ser encontrado em:

https://nodejs.org/en/

Depois de criado a pasta do nosso aplicativo um npm init irá gera o package.json, nosso pacote onde irá ter todas as libs que iremos usar em nosso projeto.

Pronto, agora podemos instalar nossa lib Express e começar nosso desenvolvimento do app, para instalar o express, digite esse comando no prompt dentro da pasta do seu projeto.

npm install express --save

Após instalar a lib express, iremos iniciar a programação do nosso APP. Com o index.js:

var app = require('express')();
 var http = require('http').Server(app);
 
 app.get('/', function(req, res){
   res.send('<h1>Olá Mundo</h1>');
 });
 
 http.listen(3000, function(){
   console.log('Servidor rodando na porta: 3000);
 }); 

Inicialmente, declaramos duas variáveis, uma do tipo express (nossa lib previamente instalada) e http onde iremos carregar nosso servidor http.

A função app.get irá redirecionar qualquer cliente que se conectar no path ‘/’ (raiz do programa) e irá enviar uma mensagem Olá Mundo, lembrando que req irá carregar qualquer requisição da função e res irá dar uma função de resposta para nossa função get APP.

Após servidor http criado e nossa rota com o app setado, chamaremos a função listen, que irá ouvir nossas requisições na porta 3000, ou seja, http://localhost:3000.

Lembrando que estamos trabalhando em ambiente localhost para desenvolvimento. Agora, iremos rodar nosso APP, para exemplificar oque desenvolvemos até agora.

No Prompt do comando iremos exexcutar:

node index.js

Ao acessar o endereço localhost, notamos que foi exibido nossa tela “Olá Mundo”, e no nosso prompt irá exibir a porta em que o server irá ouvir as solicitações.

Observamos que nosso aplicativo utiliza o res.send() para enviar nossa mensagem de “Ola Mundo”, porem é apenas uma string e seria inviável criar um html pelo res.send dentro do index.js. Então iremos redirecionar nosso GET para um endereço index.html.

app.get('/',function(req,res){
   res.sendFile(__dirname+'/index.html');
 });

Essa substituição do nosso APP get, irá redirecionar todos os métodos GET na pasta raiz do nosso APP para um endereço de html.

Nosso html de forma simplificada e mais didática(sem css e configs).

<!doctype html>
 <html>
   <head>
     <title>Socket.IO Exemplo (chat)</title>
   </head>
   <body>
     <ul id="messages"></ul>
     <form action="">
       <input id="m" autocomplete="off" /><button>Enviar</button>
     </form>
   </body>
 </html>

Nosso html tem uma simples lista que irá retornar as mensagens de todos os clientes, e um botão Enviar.

---

Após configurar o JS e montar nosso template em html, iremos importar a lib Socket.IO.

Essa lib é composta por duas partes:

• A primeira é responsável por integrar nossa lib com o Server http. (Server-side)

• Já a segunda, é responsável pelo carregamento de nosso browser (Client-side)

Para instalar nossa lib em nosso projeto, iremos apenas executar uma linha de comando em nosso prompt na raiz da aplicação.

npm install socket.io --save

Ao conferir seu package.json, observe que sua lib já foi incluída nas dependências do projeto.

Em index.js iremos declarar nossa variável io do tipo socket recebe do tipo http para ouvir todas as possíveis conexões http.

var io = require('socket.io')(http);

Após declarar nosso socket, iremos conectá-los.

io.on('connection', function(socket){
  console.log('Um usuário conectou.');
});

Será informado no nosso log do servidor quando um cliente conectar. Ao executar o código usando node index.js iremos observar que toda vez que nosso cliente requisitar por get nosso index.html, o mesmo irá executar a função de conexão com o socket.

Precisamos também criar uma função de retorno para quando nosso client desconectar.

io.on('connection', function(socket){
  console.log('Um usuário conectou');
  socket.on('disconnect', function(){
    console.log(' Um usuário desconectou');
  });
});

Agora temos uma conexão servidor-cliente, nosso próximo passo é enviar ao nosso cliente informações recebidas por todas as conexões de socket que tivermos.

Para isso, iremos utilizar no server-side, o emit.

Lembrando que temos as opções:

io.emit('evento', { for: 'everyone' });

Irá enviar um evento para todos os clientes.

socket.broadcast.emit('Olá');

Irá enviar para todos os clientes com exceção de um específico socket.

Agora iremos pegar as mensagens de todos os clientes e enviar de novo para eles.

io.emit('chat message', msg);

E na versão browser (client-side) iremos adicionar a nossa tag Javascript uma função que recebe essa mensagem do servidor e salva na lista com id #m

<script>
  $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
</script>

---

Exemplo

GitHub