Creando una aplicación de reconocimiento de imágenes con React Native y Clarifai

Tomar foto de una objeto con tu celular en la app de Miraa

Hace algunos meses me propuse el reto para desarrollar una aplicación movil que identificará los elementos en una fotografía utilizando inteligencia artificial y a partir de lo que identificara, mostrara un contenido.

Al inicio no tenía la menor idea como podría hacer algo así, en poco tiempo y que funcionará en dispositivos IOs y Android.

Primero que todo, al ser un proyecto tan largo y extenso, no escribire un tutorial paso a paso, mejor te mostraré cómo desarrolle la aplicación, que herramientas puedes usar y compartiré los repositorios donde se encuentra el código fuente, para que hagas tus propios experimentos.

1. ¿Cómo funciona la aplicación? ...es magia!

Los primero que deberías hacer es descargar la app, entender como funciona, la app se llama Miraa y la puedes descargar desde los siguientes enlaces:

Como usar Miraa para reconocer imagenes.

Miraa es una aplicación con la que podrás fotografiar o traer una imagen de la galería del teléfono. La aplicación al reconocer el logo de LED-LS en la imagen tomada, mostrará el video de la empresa. Si la imagen no contiene el logo de la empresa, nos mostrara un error.

Prueba tomando una fotografía a la siguiente imagen que contiene el logo de LED-LS, debera aparecer un video de la empresa si reconoce la imagen, si no reconoce nada aparecerá un mensaje de error:

Utiliza el poder de nuevas herramientas tecnológicas y un poco de inteligencia artificial para el análisis de imágenes y encontrar elementos por probabilidad.

Creando mi proyecto en React Native

Instalar react native es muy facil, te recomiendo usar CRNA: https://github.com/react-community/create-react-native-app

$ npm install -g create-react-native-app
$ create-react-native-app my-app
$ cd my-app/
$ npm start

Iniciamos nuestro archivo importando las librerias y components que vamos a usar en nuestro proyecto:

import React, { Component } from 'react';
import {  StyleSheet,  Text,  View,  TouchableHighlight,  Image,              ActivityIndicator,  StatusBar} from 'react-native';

Luego, Creamos nuestra clase y una estructura base de react native:

export default class home extends Component {
  constructor(){}
//métodos, funciones, estados, logica
  render(){
return{
//vistas del proyecto en JSX
}
}
  const styles = StyleSheet.create({
//Estilos css del proyecto
)}

Deberas crear el constructor, donde declaras las variables y métodos que vas a necesitar. Debe ir al inicio de tu clase. En este caso iniciaremos con una variable que llamamos source y dos estados, tags y contenido, que tomaran diferentes valores durante la ejecución. Contenido sera la variable que recibira los resultados del análisis de la imagen que nos arroja Clarifai.

constructor() {
super();
let source = null;
this.state = {
tags:'No has subido ninguna imagen',
contenido: null,
};
this.onPressButtonGET = this.onPressButtonGET.bind(this);
}

Image Picker

Con el módulo de react native image picker, podemos seleccionar una imagen de la galería o tomar una foto con la camara del telefono, es muy facil de instalar e integrar a nuestros proyectos, puedes encontrarla aquí:

https://github.com/react-community/react-native-image-picker

import ImagePicker from 'react-native-image-picker';

Una vez importado, esta es la forma como lo utiliza en tu render()

selectImage(){
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else {
// Se guarda la imagen y se formtea para base64
base64img= 'data:image/jpeg;base64,' + response.data;
// Se llama el metodo que en la imagen para análisis
this.onPressButtonGET();
}
});
}

En este caso, la variable base64img toma el valor de la foto, y la concatena para quedar lista en formato base64 y ser enviada para su analisis

base64img= 'data:image/jpeg;base64,' + response.data;

Si la imagen se subió correctamente, llamamos a onPressButtonGET(), quien se encarga en enviar la imagen en base64 al backend, por medio de una petición POST, para que este haga su trabajo de análisis con Clarifai:

 onPressButtonGET(){
fetch('https://led-ls.co/recognitionimage',{
'method':'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
imagen: base64img
})
})
.then((response)=>response.json())
.then((responseData)=>
this.setState({
contenido: responseData.contenido,
tipo: responseData.tipo_contenido,
valor: responseData.valor})
)
}

La peticion POST a “https://led-ls.co/recognitionimage” debera retornar el resultado del análisis, un contenido si reconoce el logo de LED LS, en este caso el enlace de video de youtube o un mensaje de error, informando que no se encontró el logo.

Mediante promesas el estado de “contenido” cambia dependiendo del resultado obtenido, el cual es evaluado por otro método y mostrado al usuario en la vista de la app.

.then((response)=>response.json())
.then((responseData)=>
this.setState({
contenido: responseData.contenido,
)
}

2. Analizando imagenes con inteligencia artificial.

Probé muchas opciones buscando en internet, al final me decidí por estudiar dos, Google Cloud Vision y Clarifai, mira un demo de cada una:

https://cloud.google.com/vision/

https://clarifai.com/demo

Finalmente me decidi por usar Clarifai, por que basicamente me parecio mas facil de integrar, de entrenar nuevos modelos y un plan gratis muy bueno. Clarifai analiza cualquier imagen que envies, devolvera datos acerca de lo que considera que contiene esa imagen, basado en probabilidades.

Analizando una fotografía con Clarifai

Puedes entrenar tus propios modelos, en este caso necesitaba que reconociera el logo de la empresa LED-LS, para lo cual Clarifai tiene una interfaz que lo hace bastante sencillo, te registras y creas tu aplicación, lo cual te permitira crear tus propios modelos y te dara acceso a tu API Key:

Registro de la aplicación en mi cuenta de Clarifai

Entrena tus propios modelos

Un modelo es básicamente un elemento que quiero enseñarle a Clarifai a reconocer, por ejemplo si quiero que Clarifai reconozca el logo de una empresa siempre que lo vea en una fotografia, primero debo enseñarle al sistema. Para ello te piden subir varias imágenes positivas, donde se encuentre ese logo, entre mas subas mucho mejor, también es importante desde diferentes ángulos y con varios tipos de luz. Por otro lado también te piden subir varias imágenes negativas, donde no se encuentre el logo:

Entrenando la inteligencia artifical de Clarifai

El sistema empezara a reconocer tu logo cada vez que lo vea en una foto:

Analizando detalles de una imagen que estamos entrenando

Con esto, cada vez que enviemos una imagen que contenga el logo de LED-LS Clarifai nos devolverá entre sus resultados entre 0.00 y 0.99 el cual es la probabilidad de que se encuentre o no el logo. Clarifai nunca estara 100% seguro, asi que debemos asumir que cuando hay una alta probabilidad es muy posible que contenga el logo de LED-LS, entre mejor entrenemos nuestro modelo, mas acertados serán los resultados de cada analisis.

3. Por qué usar React Native?

Básicamente es la mejor forma de hacer aplicaciones moviles nativas con javascript, multiplataforma. Lo que significa que el mismo código te puede servir tanto para IOs como para Android, lo cual evita crear dos aplicaciones por separado con diferente lenguaje. Puedes trabajar con componentes nativos de tu celular.

Ademas esta respaldado por facebook, es una de las comunidades de desarrollo más activas del mundo y se utiliza en muchas aplicaciones grandes y complejas a nivel mundial. En otro blog hablare un poco mas de react native y su poder a la hora de hacer aplicaciones móviles multiplataforma.

4. Los que estabas esperando, el código fuente!

Te dejo el codigo fuente de la aplicación movil en react native y el backend en laravel PHP que se conecta con Clarifai. Espero que este tutorial te anime a realizar tus propios experimentos y futuros proyectos.

No documente el repositorio, esta poco organizado realmente y el proyecto final entregado al cliente se encuentra en un repositorio privado, así que espero que comprendas y hagas el mejor uso, igual es fácil de entender:

https://github.com/gusplayer/image-recognition

En este proyecto también utilice:

“react-native-youtube”: “¹.0.0-alpha.4” Para visualizar videos de youtube.

“react-native-router-flux”: “³.39.2”, Para la navegación de la app.

“react-native-vector-icons”: “⁴.2.0”, Para usar algunos iconos.

Una ultima cosa….

Si te gusto este articulo, haz 👏 y compártelo con tus amigos. Recuerda, puedes aplaudir hasta 50 veces , realmente hace una gran diferencia para mí.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.