TheLazy.Dev
Portfolio GitHub

Blog

node |tutorial |javascript |azure

Implementación de un Traductor en tiempo real con Translator Text & Node.js

glaucia86

Glaucia Lemos

Posted on October 29, 2019

Implementación de un Traductor en tiempo real con Translator Text & Node.js

microsoft-translator.jpg

¡Hola a todos! ¡Regresamos con otra nueva serie de artículos! ¡Y esta vez se trata de cómo podemos usar los Servicios Cognitivos de Microsoft para hacer que su aplicación sea más inteligente y mejor haciendo uso de I.A!

En este primer artículo de esta serie hablaré sobre Translator Text. Pero primero comprendamos qué es este Servicio Cognitivo.

¿Qué es Translator Text?

translator-api.png

Translator Text es un servicio de traducción automática neuronal que permite a los desarrolladores pueden interactuar de una manera muy simples y fácil: sitios, herramientas o cualquier tipo de solución que necesita varios idiomas, como los sitios de ubicación, atención al cliente, aplicaciones de mensajería y en múltiples escenarios.

Con la API de Translator, puede realizar traducciones para más de 60 idiomas. Ser capaz de realizar traducciones de textos en aplicaciones móviles, computadoras y aplicaciones Web. ¡Y lo mejor de todo es que API Translator es open source!

Algo muy importante aquí es que Translator Text es un servicio basado en la nube.

Este servicio tiene dos versiones:

  • V2 Translator API: esta versión permite una traducción utilizando sistemas estadísticos, sin ningún uso de un sistema neuronal.

  • V3 Translator API: esta versión hace uso de un sistema neuronal por defecto. Sin embargo, los sistemas estadísticos solo están disponibles cuando no hay un sistema neural.

¡Soporte para más de 60 idiomas!

Sí, Translator Text ofrece más de 60 idiomas, entre ellos podemos mencionar aquí: árabe, español, italiano, inglés, portugués y muchos otros.

Si desea saber qué idiomas están disponibles para Translator Text, puede verificar con más detalle AQUÍ.

Bueno ... después de toda esta explicación, ahora podemos comenzar a probar este servicio y desarrollar una aplicación en Node.js. ¡Vamos!

¡Codifiquemos!

Okay... hablar es bueno. ¡Pero vamos a codificar! Para esto necesitaremos algunos recursos necesarios. Entre ellos:

Si es estudiante en cualquier colegio o universidad, puede crear su cuenta de Azure for Students Azure for Students. Esta cuenta le dará el beneficio de tener un crédito de $ 100 para usar los servicios de forma gratuita, sin tener una tarjeta de crédito. Para activar esta cuenta, haga clic AQUÍ

Todo el código desarrollado a partir de este artículo ya está disponible AQUI. Después de instalar los programas necesarios y crear una cuenta de Azure, podemos continuar con nuestro tutorial.

Creando el Recurso del Translator Text

El primer paso que necesitaremos es crear un Recurso del Translator Text en el Portal Azure.

Para hacer esto, solo siga paso a paso como se muestra en gif: (¡haga clic en el gif para ver la imagen en acción!)

01-gif-translator-nodejs.md.gif

Tenga en cuenta que cuando terminamos de crear un recurso del Translator Text, se genera una key y enpoint para nosotros:

01-image.png

Guarda esta key y endpoint, porque durante el desarrollo de la aplicación más adelante vamos a necesitar esta información de nuevo!

Creando Clave de Entorno

Ahora que tenemos nuestra key es importante ahora crear una variable de entorno. Porque así podemos almacenar la key del recurso recién creado en el Portal de Azure. Y eso es exactamente lo que haremos ahora. Para hacer esto, abra su command prompt y ejecute el siguiente comando:

> setx TRANSLATOR_TEXT_SUBSCRIPTION_KEY "sua-key"

> setx TRANSLATOR_TEXT_ENDPOINT https://api.cognitive.microsofttranslator.com
Enter fullscreen mode Exit fullscreen mode

Tenga en cuenta que no utilizaremos el endpoint del Portal Azure. Pero sí, el siguiente endpoint: https://api.cognitive.microsofttranslator.com

Mira la imagen de abajo:

Screen-Shot-10-05-19-at-12-53-AM.png

Si el mensaje aparece como arriba es porque podemos establecer correctamente nuestra key y endpoint en la variable de entorno localmente. Si desea ejecutar este comando en otro Sistema Operativo, simplemente ejecute los comandos:

  • Linux 
> export TRANSLATOR_TEXT_SUBSCRIPTION_KEY=your-key

> export TRANSLATOR_TEXT_ENDPOINT https://api.cognitive.microsofttranslator.com

> source ~/.bashrc
Enter fullscreen mode Exit fullscreen mode
  • MacOs 
> export TRANSLATOR_TEXT_SUBSCRIPTION_KEY=your-key

> export TRANSLATOR_TEXT_ENDPOINT https://api.cognitive.microsofttranslator.com

> source ~/.bashrc
Enter fullscreen mode Exit fullscreen mode

tip: cuando haya terminado, sería bueno cerrar el command prompt y abrir de nuevo.

Bueno, ahora todo está configurado. Ahora vamos a crear nuestra aplicación en Node.js.

Coding Time!

Ahora abre tu Visual Studio Code y escriba el siguiente comando:

> npm init -y
Enter fullscreen mode Exit fullscreen mode

Este comando creará un archivo llamado ** package.json **. Ábralo e incluya el siguiente bloque de código:

arquivo: package.json

{
  "name": "demo-api-translator-nodejs",
  "version": "1.0.0",
  "description": "Demo responsável por ",
  "main": "src/tradutor-texto.js",
  "scripts": {
    "dev": "node src/tradutor-texto.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/glaucia86/translatortext-nodejs-demo.git"
  },
  "keywords": [
    "nodejs",
    "javascript",
    "azure",
    "cognitive-services",
    "translator-text"
  ],
  "author": "Glaucia Lemos",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/glaucia86/demo-api-translator-nodejs/issues"
  },
  "homepage": "https://github.com/glaucia86/demo-api-translator-nodejs#readme"
}
Enter fullscreen mode Exit fullscreen mode

Creando la estructura del proyecto

Construyamos la siguiente estructura del proyecto como la imagen:

Screen-Shot-10-04-19-at-06-54-PM.png

Tenga en cuenta que el archivo tradutor-texto.js dentro de la carpeta src. Es en este archivo es donde desarrollaremos la lógica de nuestra aplicación.

Desarrollando el proyecto

En primer lugar, instalemos algunos paquetes que deben estar presentes en nuestro proyecto. Para hacer esto, abra el command prompt y escriba el siguiente comando:

> npm install request uuidv4
Enter fullscreen mode Exit fullscreen mode

Ahora tenga en cuenta que nuestro archivo package.json cambiará y y se incluirá en el bloque dependencies los dos paquetes anteriores: request y uuidv4.

  • archivo: package.json 
{
  "name": "demo-api-translator-nodejs",
  "version": "1.0.0",
  "description": "Demo responsável por ",
  "main": "src/tradutor-texto.js",
  "scripts": {
    "dev": "node src/tradutor-texto.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/glaucia86/translatortext-nodejs-demo.git"
  },
  "keywords": [
    "nodejs",
    "javascript",
    "azure",
    "cognitive-services",
    "translator-text"
  ],
  "author": "Glaucia Lemos",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/glaucia86/demo-api-translator-nodejs/issues"
  },
  "homepage": "https://github.com/glaucia86/demo-api-translator-nodejs#readme",
  "dependencies": {
    "request": "^2.88.0",
    "uuidv4": "^5.0.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

Ahora, abra el tradutor-texto.js y agrega el siguiente bloque de código:

/**
 * 
 * Arquivo: src/tradutor-texto.js
 * Descrição: arquivo responsável por traduzir textos usando o Translator Text API.
 * Data: 03/10/2019
 * Author: Glaucia Lemos
 * 
 */

const request = require('request');
const uuidv4 = require('uuid/v4');
Enter fullscreen mode Exit fullscreen mode

Bien, ahora continuemos nuestro desarrollo. Incluya el siguiente bloque de código:

/**
 * 
 * Arquivo: src/tradutor-texto.js
 * Descrição: arquivo responsável por traduzir textos usando o Translator Text API.
 * Data: 03/10/2019
 * Author: Glaucia Lemos
 * 
 */

const request = require('request');
const uuidv4 = require('uuid/v4');

let chave_translator = 'TRANSLATOR_TEXT_SUBSCRIPTION_KEY';

//==> Se não encontrar uma variável de ambiente' enviar mensagem de erro!
if (!process.env[chave_translator]) {
  throw new Error('Por favor, configure a sua variável de ambiente: ' + chave_translator);
}

let subscriptionKey = process.env[chave_translator];

let endpoint_translator = 'TRANSLATOR_TEXT_ENDPOINT';

if (!process.env[endpoint_translator]) {
  throw new Error('Por favor, configure a sua variável de ambiente: ' + endpoint_translator);
}

let endpoint = process.env[endpoint_translator];
Enter fullscreen mode Exit fullscreen mode

¡Tenga en cuenta la importancia de establecer nuestras variables de entorno localmente para que cuando ejecute la aplicación no reciba un error!

¡Vamos!

Configurando la Solicitud

¡Estamos casi al final del desarrollo de nuestro código! Finalmente, configuremos la solicitud para realizar la llamada a la API de Translator Text. Para hacer esto, incluya el siguiente bloque de código:

  • archivo: tradutor-texto.js 
(...)

function traduzirTexto() {
  // ==> Aqui vamos configurar os requests
  let options = {
    method: 'POST',
    baseUrl: endpoint,
    url: 'translate',
    qs: {
      'api-version': '3.0',
      'to': ['en', 'es']
    },
    headers: {
      'Ocp-Apim-Subscription-Key': subscriptionKey,
      'Content-type': 'application/json',
      'X-ClientTraceId': uuidv4().toString()
    },
    body: [{
      'text': 'Olá Desenvolvedor!'
    }],
    json: true,
  }
};
Enter fullscreen mode Exit fullscreen mode

Perfecto! ¡Ahora imprimamos nuestra solicitud! Para hacer esto, incluya el siguiente bloque de código:

  • archivo: tradutor-texto.js 
(...)

function traduzirTexto() {
  // ==> Aquí vamos configurar la solicitud
  let options = {
    method: 'POST',
    baseUrl: endpoint,
    url: 'translate',
    qs: {
      'api-version': '3.0',
      'to': ['en', 'es']
    },
    headers: {
      'Ocp-Apim-Subscription-Key': subscriptionKey,
      'Content-type': 'application/json',
      'X-ClientTraceId': uuidv4().toString()
    },
    body: [{
      'text': 'Olá Desenvolvedor!'
    }],
    json: true,
  }

  // ==> Aquí vamos realizar la solicitud y impresión de la respuesta
  request(options, (err, res, body) => {
    console.log(JSON.stringify(body, null, 4));
  })
};

// Aquí llamaremos la función a realizar la traducción
// a tradução via API
traduzirTexto();
Enter fullscreen mode Exit fullscreen mode

¡Ahora ya está todo listo! ¡Ejecutemos nuestra aplicación y veamos si realmente traducirá la frase: Hello Developer a inglés y español?!

Ejecute el comando:

> npm run dev
Enter fullscreen mode Exit fullscreen mode

Screen-Shot-10-05-19-at-01-05-AM.png

Solo para que lo veas en acción, mira ahora con otra frase: ¡Hola! ¿Cuál es su nombre? traduciendo del portugués al inglés y español:

02-gif-translator-nodejs.gif

Genial, no?

Todo el código desarrollado durante este artículo está AQUÍ.

Conclusión

¡Hoy aprendimos un poco sobre Translator Text! Una gran cantidad de idiomas que podemos usar para traducir a aplicaciones y una demostración que podría aprender lo fácil que es usar esta API.
Un punto que no mencioné es que esta API, además de Node.js/JavaScript, también está disponible para desarrollarse en:

  • C#
  • Java
  • Python
  • Go
  • PHP
  • Ruby

Hay más cosas interesantes que hacer aquí en esta API, por ejemplo: en chino lees ideogramas, ¿verdad? Pero si queremos entender cómo leer estos ideogramas? (en este caso es el piyin ban). Bueno, tengo noticias para ti! Siempre después de salir un artículo de esta serie, voy a estar haciendo una serie de videos en que explican paso a paso cómo hacer el tutorial y hacer preguntas en tiempo real.

Y ya tenemos un video sobre Translator Text AQUÍ

Y para saber esta y otras novedades, ¡sígueme en twitter!

Twitter

¡Hasta muy pronto! ❤️ ❤️ ❤️

💖 💪 🙅 🚩
glaucia86
Glaucia Lemos

Posted on October 29, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Implementación de un Traductor en tiempo real con Translator Text & Node.js
node Implementación de un Traductor en tiempo real con Translator Text & Node.js

October 29, 2019

Reconhecimento Facial com Face API & Node.js
node Reconhecimento Facial com Face API & Node.js

October 17, 2019

Realizando traduções em tempo real com Translator Text & Node.js
node Realizando traduções em tempo real com Translator Text & Node.js

October 7, 2019