Cordova TensorFlow reconhecimento de imagem

Vamos mostrar como fazer o reconhecimento de imagem com Cordova e Tensorflow. Na documentação diz que funciona para Android e IOS. Vamos mostrar o funcionamento no Android. 

O model personalizado que vamos utilizar para fazer o reconhecimento de imagem foi gerado nesse post.

Nesse plugin tem o que precisamos para fazer funcionar. 

Vou utilizar como exemplo o projeto cordova criado nesse post. Vamos instalar o plugin cordova tensorflow executando esse comando na raiz do projeto:

cordova plugin add https://github.com/heigeo/cordova-plugin-tensorflow

O arquivo index.js deve ficar assim:

var app = {
     mostraMensagem: function(valor){
         document.getElementById("progress").innerHTML = valor;
     },
     // Application Constructor
     initialize: function() {
         var self = this;
         
         document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
     },
 
     // deviceready Event Handler
     //
     // Bind any cordova events here. Common events are:
     // 'pause', 'resume', etc.
     onDeviceReady: function() {
         this.receivedEvent('deviceready');
         var self = this;
         self.mostraMensagem("iniciou!");
         $("#deviceready").removeClass("blink");//para não ficar piscando.
         var self = this;
         
         var tf = new TensorFlow('custom-model', {
                     'label': 'My Custom Model',
                     'label_path': "http://www.davifelipe.com.br/arquivos/star_wars_graph.zip#retrained_labels.txt",
                     'model_path': "http://www.davifelipe.com.br/arquivos/star_wars_graph.zip#rounded_graph.pb",
                     'input_size': 299,
                     'image_mean': 128,
                     'image_std': 128,
                     'input_name': 'Mul',
                     'output_name': 'final_result'
                 });
         //var tf = new TensorFlow('inception-v1');
         self.mostraMensagem("Carregando...");
         tf.onprogress = function(evt) {
             if (evt['status'] == 'downloading'){
                 self.mostraMensagem("Downloading model files...");
                 self.mostraMensagem(evt.label);
                 if (evt.detail) {
                     // evt.detail is from the FileTransfer API
                     
                     var carregados = evt.detail.loaded/1024/1024;
                     var total = evt.detail.total/1024/1024;
                     
                     carregados = carregados.toFixed(2);
                     total = total.toFixed(2);
                     
                     var perc = (carregados * 100 / total).toFixed(2);
                     
                     self.mostraMensagem(`${perc}% ${carregados}MB de ${total}MB`);
                 }
             } else if (evt['status'] == 'unzipping') {
                 self.mostraMensagem("Extracting contents...");
             } else if (evt['status'] == 'initializing') {
                 self.mostraMensagem("Initializing TensorFlow");
             }
         };
         
         var imgData224 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASsAAAErCAYAAA...';
         
         var aData = imgData224.split(',');
         document.getElementById("preview").src = imgData224;
         
         tf.classify(aData[1]).then(function(results) {
             results.forEach(function(result) {
                 self.mostraMensagem(result.title + " " + result.confidence);
             });
         },
         function(error){
             self.mostraMensagem(error);
         });
         
     },
     
     // Update DOM on a Received Event
     receivedEvent: function(id) {
         var parentElement = document.getElementById(id);
         var listeningElement = parentElement.querySelector('.listening');
         var receivedElement = parentElement.querySelector('.received');
 
         listeningElement.setAttribute('style', 'display:none;');
         receivedElement.setAttribute('style', 'display:block;');
 
         console.log('Received Event: ' + id);
     }
 };
 
 app.initialize();

a variável var imgData224 é o base64 de uma imagem do Mestre Yoda. Pode pegar qualquer uma na internet, na pasta star_wars que criamos ou até mesmo utilizar o plugin cordova camera para tirar uma foto na hora. 

E o arquivo index.html deve ficar assim:

<html>
     <head>
         <meta name="format-detection" content="telephone=no">
         <meta name="msapplication-tap-highlight" content="no">
         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
         <link rel="stylesheet" type="text/css" href="css/index.css">
         <title>Hello World</title>
     </head>
     <body>
         <div class="app">
             <h1>Apache Cordova</h1>
             <div id="deviceready" class="blink">
                 <p class="event listening">Connecting to Device</p>
                 <p class="event received">Device is Ready</p>
                 <p>
                 <p id="progress" style="text-transform: none;">status!!!</p>
                 <img id="preview" width="150" alt="preview"/>
             </div>
         </div>
         <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
         <script type="text/javascript" src="cordova.js"></script>
         <script type="text/javascript" src="js/index.js"></script>
         
     </body>
</html>

Não esqueça de baixar o jquery-1.8.2.min.js para dentro da pasta js. usei o 1.8 mas pode ser a versão mais atual.

Quando iniciar o app o arquivo model e label vão ser baixados e o resultado deve ser esse:

 Imagem

 

Comentários

 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente