Cómo Usar Servicios de Aprendizaje Automático de Google Cloud para Android

() translation by (you can also view the original English article)

Las noticias estos días están llenas de palabras de moda tales como automatización, inteligencia artificial y aprendizaje automático. Eso es probablemente por lo que más y más usuarios de teléfonos inteligentes están comenzando a buscar aplicaciones más inteligentes. Como desarrollador regular de aplicaciones Android, sin embargo, probablemente careces de los recursos necesarios para crear tales aplicaciones desde cero.

Afortunadamente, Google recientemente lanzó una plataforma de Aprendizaje Automático en la Nube, que ofrece redes neuronales que han sido pre-entrenadas para realizar una variedad de tareas. La mayoría de sus modelos no solo son altamente precisos, sino también están en constante mejora. ¿Y adivina qué? ¡Puedes usarlos simplemente haciendo unas cuantas llamadas API REST!

En este tutorial te presentará la plataforma de Aprendizaje Automático en la Nube y te mostraré cómo usarla para crear una aplicación Android inteligente que puede reconocer objetos del mundo real y nombrarlos en múltiples lenguajes.

Prerrequisitos

Para sacar lo mejor de este tutorial, todo lo que necesitas es:

la última versión de Android Studio
un dispositivo ejecutando Android 4.4 o superior
y una cuenta de Plataforma Google Cloud

1. Adquiriendo una Llave API

Para poder usar los servicios de aprendizaje automático de Google en tu aplicación Android, necesitas una llave API. Puedes obtener una creando un nuevo proyecto en la consola de Plataforma Google Cloud.

Comienza iniciando sesión en la consola y presionando el botón Crear Nuevo Proyecto. En el diálogo que emerge, dale un nombre significativo al proyecto.

Una vez que el proyecto ha sido creado, ve a Administrador API > Tablero y presiona el botón Habilitar API.

En la siguiente pantalla, bajo el encabezado Aprendizaje Automático Google Cloud, podrás ver todas las diferentes APIs de aprendizaje automático disponibles para ti. En este tutorial, estaremos usando solo las APIs Visión y Traducción.

Para habilitar la API Visión, da clic en su enlace y presiona el botón Habilitar.

De manera similar, para habilitar la API Traducción, da clic sobre su enlace y presiona el botón Habilitar.

Solo necesitarás una llave para usar ambas APIs. Para obtenerla, ve a la pestaña de Credenciales, presiona el botón Crear credenciales, y selecciona llave API.

Ahora deberías ver una ventana emergente conteniendo tu llave API secreta.

2. Creando un Nuevo Proyecto Android

Inicia Android Studio y crea un nuevo proyecto con una actividad vacía. Te sugiero que elijas al menos API nivel 19 para el SDK mínimo soportado.

Aunque no tienes que hacerlo, siempre es una buena idea usar una librería robusta de trabajo en red para comunicar con la plataforma de Aprendizaje Automático Google Cloud. En este tutorial, estaremos usando una de esas librerías llamada Fuel. Agrégala como una dependencia compile en el archivo build.gradle del módulo de app:

1	compile 'com.github.kittinunf.fuel:fuel-android:1.5.0'

Presiona Sync Now para actualizar tu proyecto.

Después, nuestra aplicación necesitará el permiso INTERNET para comunicarse con los servidores de Google. Así pues, agrega la siguiente línea dentro del archivo manifest del proyecto:

1	<uses-permission android:name="android.permission.INTERNET"/>

Por último, agrega tu llave API al archivo values/strings.xml:

1	<string name="mykey">ABCDEF12345-abcdef12345-123</string>

3. Usando la API Visión

La API Visión te ayuda a crear aplicaciones que pueden ver y hacer sentido del entorno del usuario. La detección de rostros, detección de emociones, reconocimiento de caracter óptico, y comentario de imagen son algunas de sus muchas características. Por ahora, nos estaremos concentrando solo en la poderosa característica de comentario de imagen, también llamada detección de etiqueta---la cual, en mi opinión, es muy útil.

Como podrías esperar, la API espera una imagen como una de sus entradas. Así pues, creemos una pantalla en donde el usuario puede capturar imágenes usando la cámara del dispositivo.

Paso 1. Crea un Diseño

El diseño de nuestra pantalla debería tener widget Button que el usuario puede presionar para tomar una fotografía, un widget ImageView para mostrar la imagen, y un widget TextView para mostrar las etiquetas, o comentarios, generados por la API. De manera acorde, agrega el siguiente código al archivo XML de diseño de tu actividad:

<Button android:text="Take a picture"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/takePictureButton"
    android:onClick="takePicture"/>

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/takePictureButton"
    android:id="@+id/previewImage"
    android:layout_centerHorizontal="true"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/resultsText"
    android:layout_below="@id/previewImage"/>

Nota que hemos asociado un manejador onClick con el botón. Lo definiremos en el siguiente paso.

Paso 2: Crea un Intent

Creando un nuevo intent con la acción ACTION_IMAGE_CAPTURE y pasándolo al método startActivityForResult(), puedes pedir a la aplicación de cámara por defecto del dispositivo del usuario tomar fotografías y pasarlas a tu aplicación. Así pues, agrega el siguiente código a tu clase Activity:

public final static int MY_REQUEST_CODE = 1;

public void takePicture(View view) {
    Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
    startActivityForResult(intent, MY_REQUEST_CODE);
}

Para poder recibir las imágenes capturadas por la aplicación de cámara por defecto, debes anular el método onActivityResult() de tu clase Activity. Dentro del método, tendrás acceso a un objeto Bundle conteniendo toda la información de la imagen. Puedes generar la información de la imagen simplemente convirtiéndola a un Bitmap y pasándola al widget ImageView.

@Override
protected void onActivityResult(int requestCode, int resultCode,
                                Intent data) {
    if(requestCode == MY_REQUEST_CODE && resultCode == RESULT_OK) {

        // Convert image data to bitmap
        Bitmap picture = (Bitmap)data.getExtras().get("data");

        // Set the bitmap as the source of the ImageView
        ((ImageView)findViewById(R.id.previewImage))
                                .setImageBitmap(picture);

        // More code goes here
    }
}

Si ejecutas la aplicación ahora y tomas una foto, verás que el tamaño de la imagen es bastante pequeño. Eso está bien, sin embargo---la API Cloud Vision es muy precisa incluso con miniaturas de imagen.

Paso 3: Codifica la Imagen

La API Visión no puede usar objetos Bitmap directamente. En su lugar, espera una cadena de texto codificada en Base64 de información comprimida de imagen.

Para comprimir la información de la imagen, puedes usar el método compress() de la clase Bitmap. Como sus argumentos, el método espera el formato de compresión a usar, la calidad de salida deseada, y un objeto ByteArrayOutputStream. El siguiente código comprime el bitmap usando el formato JPEG y también asegura que la calidad de la imagen resultante es lo suficientemente alta:

1	ByteArrayOutputStream byteStream = new ByteArrayOutputStream();
2	picture.compress(Bitmap.CompressFormat.JPEG, 90, byteStream);

Ahora puedes generar la cadena Base64 usando el método encodeToString() de la clase Base64().

1	String base64Data = Base64.encodeToString(byteStream.toByteArray(),
2	Base64.URL_SAFE);

Paso 4: Procesa la Imagen

Después de todo ese arduo trabajo, tienes todo lo que necesitas para interactuar con la API Visión. Comienza creando una cadena que contenga la URL de la API y tu llave API:

1	String requestURL =
2	"https://vision.googleapis.com/v1/images:annotate?key=" +
3	getResources().getString(R.string.mykey);

Para enviar información a la API, debes crear una petición HTTP POST. El cuerpo de la petición debe ser un documento JSON conteniendo la información de la imagen codificada en Base64. Para detección de etiqueta, el documento también debe tener un arreglo features conteniendo el valor LABEL_DETECTION. Aquí está el formato del documento JSON.

{"requests": [{
      "image": {
        "content": <Base64-encoded image data>
      },
      "features": [{
          "type": "LABEL_DETECTION"
      }]
}]}

Aunque es posible codificar a mano el documento JSON, crearlo de manera programática es menos propenso al error. El siguiente código te muestra cómo hacerlo usando las clases JSONObject y JSONArray:

// Create an array containing
// the LABEL_DETECTION feature
JSONArray features = new JSONArray();
JSONObject feature = new JSONObject();
feature.put("type", "LABEL_DETECTION");
features.put(feature);

// Create an object containing
// the Base64-encoded image data
JSONObject imageContent = new JSONObject();
imageContent.put("content", base64Data);

// Put the array and object into a single request
// and then put the request into an array of requests
JSONArray requests = new JSONArray();
JSONObject request = new JSONObject();
request.put("image", imageContent);
request.put("features", features);
requests.put(request);
JSONObject postData = new JSONObject();
postData.put("requests", requests);

// Convert the JSON into a
// string
String body = postData.toString();

En este punto, podemos usar el método post() de la clase Fuel para hacer la petición HTTP POST. Como su único argumento, el método espera la URL de la API. También debes incluir los encabezados content-length y content-type en la petición. Para hacerlo, usa el método header(). De manera similar, para poder agregar el documento JSON al cuerpo de la petición POST, usa el método post().

Por último, llamando al método responseString() y pasando una nueva instancia de la clase Handler a este, puedes obtener de manera asíncrona la respuesta de la petición como una cadena. De manera acorde, agrega el siguiente código:

Fuel.post(requestURL)
    .header(
        new Pair<String, Object>("content-length", body.length()),
        new Pair<String, Object>("content-type", "application/json")
        )
    .body(body.getBytes())
    .responseString(new Handler<String>() {
        @Override
        public void success(@NotNull Request request,
                            @NotNull Response response,
                            String data) {
            // More code goes here
        }

        @Override
        public void failure(@NotNull Request request,
                            @NotNull Response response,
                            @NotNull FuelError fuelError) {}
    });

Cuando usas la característica de detección de etiqueta, la API Visión devuelve un documento JSON conteniendo etiquetas. Junto con cada etiqueta, puedes también obtener una puntuación especificando qué tan certera es la etiqueta. El documento luce como esto:

{"responses":[{
  "labelAnnotations": [
    {
      "mid": "/m/id1",
      "description": "label1",
      "score": 0.91
    },
    {
      "mid": "/m/id2",
      "description": "label2",
      "score": 0.90
    },
  ...
}]}

Por ahora, solo ciclemos a través de todos los objetos en el arreglo labelAnnotations y agrega el valor de cada llave description al widget TextView de nuestro diseño. Aquí está cómo puedes hacer eso dentro del método success() de la clase Handler:

// Access the labelAnnotations arrays
JSONArray labels = new JSONObject(data)
                    .getJSONArray("responses")
                    .getJSONObject(0)
                    .getJSONArray("labelAnnotations");

String results = "";

// Loop through the array and extract the
// description key for each item
for(int i=0;i<labels.length();i++) {
    results = results + 
              labels.getJSONObject(i).getString("description") +
              "\n";
}

// Display the annotations inside the TextView
((TextView)findViewById(R.id.resultsText)).setText(results);

Ahora puedes ejecuta la aplicación, tomar una foto de cualquier objeto cercano, y ver las etiquetas que la API Visión genera para este.

4. Usando la API Traducción

La API de Traducción en la Nube, como sugiere su nombre, puede traducir texto desde y hacia más de 100 lenguajes. Al usarla de manera efectiva, puedes crear aplicaciones inteligentes que puedan comunicarse con tus usuarios en sus propios lenguajes.

En el paso anterior, viste que las etiquetas que nuestra aplicación genera están en inglés. Agreguemos ahora un botón para traducir esas etiquetas a Alemán.

Paso 1: Actualiza el Diseño

Agrega un widget Button hacia el final del diseño de tu Activity usando el siguiente código:

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/resultsText"
    android:text="in German"
    android:onClick="translateToGerman"/>

Nota que este botón también tiene un manejador de evento onClick que debe ser definido en tu clase Activity.

Paso 2: Traduce las Etiquetas

Usando la API de Traducción es mucho más sencillo que usar la API Visión, primariamente porque no necesitas crear un documento JSON para definir tu petición. en su lugar, puedes simplemente pasarle parámetros en una cadena de consulta.

Crea el método translateToGerman() y, dentro de este, crea una cadena conteniendo la URL de la API de Traducción.

public void translateToGerman(View view) {
    String requestURL = 
        "https://translation.googleapis.com/language/translate/v2";

    // More code goes here
}

Para agregar campos a la cadena de consulta de la URL de arriba, podemos usar una List de objetos Pair. Los siguientes campos son importantes:

key, especificando tu llave API secreta
source, especificando el lenguaje desde el que quieres traducir
target, especificando el lenguaje al que quieres traducir
q, especificando el texto que quieres traducir

El siguiente código te muestra cómo configurar la API para traducir de Inglés a Alemán:

List<Pair<String, String>> params = new ArrayList<>();
// Add API key
params.add(new Pair<String, String>("key", 
                        getResources().getString(R.string.mykey)));

// Set source and target languages
params.add(new Pair<String, String>("source", "en"));
params.add(new Pair<String, String>("target", "de"));

Debido a que la cadena de consulta puede contener múltiples campos q, estaremos agregando uno por cada etiqueta que esté presente dentro del widget TextView dentro de nuestro diseño. Aquí está cómo:

String[] queries = ((TextView)findViewById(R.id.resultsText))
                    .getText().toString().split("\n");

for(String query:queries) {
    params.add(new Pair<String, String>("q", query));
}

Finalmente, puedes llamar al método get() de la clase Fuel para hacer una petición HTTP GET a la API de traducción. Esta vez también, puedes usar el método responseString() para obtener la respuesta de manera asíncrona como una cadena de texto.

Fuel.get(requestURL, params).responseString(new Handler<String>() {
    @Override
    public void success(@NotNull Request request, 
                        @NotNull Response response,
                        String data) {
        // More code here
    }

    @Override
    public void failure(@NotNull Request request, 
                        @NotNull Response response, 
                        @NotNull FuelError fuelError) { }
});

La respuesta de la API de Traducción es un documento JSON conteniendo un arreglo de traducciones. Tiene el siguiente formato:

{ "data": { "translations": [
  {
    "translatedText": "...."
  },
  {
    "translatedText": "...."
  },
  ...
] } }

Por ahora, dentro del método success() de la clase Handler, simplemente ciclemos a través del arreglo translations del documento JSON de arriba, y actualicemos los contenidos del widget TextView usando los valores asociados con las llaves translatedText.

// Access the translations array
JSONArray translations = new JSONObject(data)
                        .getJSONObject("data")
                        .getJSONArray("translations");

// Loop through the array and extract the translatedText
// key for each item
String result = "";
for(int i=0;i<translations.length();i++) {
    result += translations.getJSONObject(i)
                .getString("translatedText") + "\n";
}

// Update the contents of the TextView widget
((TextView)findViewById(R.id.resultsText)).setText(result);

Si ejecutas la aplicación ahora, generas etiquetas para una imagen, y presionas el segundo botón, deberías poder ver las etiquetas en Alemán.

Conclusión

En este tutorial, aprendiste cómo usar las APIs Cloud Vision y Cloud Translation, que son parte de la plataforma de Aprendizaje Automático Google Cloud, en una aplicación Android. Hay muchas más de estas APIs ofrecidas por la plataforma. Puedes aprender más acerca de ellas refiriéndote a la documentación oficial.

Mientras estás aquí, ¡revisa algunos de nuestros otros tutoriales sobre cómo usar servicios de aprendizaje automático y en la nube en tus aplicaciones Android!