Guía de detección de idiomas para la Web

La tarea del detector de idioma de MediaPipe te permite identificar el idioma de un texto. En estas instrucciones, se muestra cómo usar el detector de idioma en apps web y de JavaScript. La muestra de código que se describe en estas instrucciones está disponible en GitHub.

Puedes ver la tarea en acción en la demostración. Para obtener más información sobre las capacidades, los modelos y las opciones de configuración de esta tarea, consulta la Descripción general.

Ejemplo de código

En el código de ejemplo del detector de lenguaje, se proporciona una implementación completa de esta tarea en JavaScript para tu referencia. Este código te ayuda a probar esta tarea y comenzar a compilar tu propia función del detector de lenguaje. Puedes ver, ejecutar y editar el código de ejemplo de Language Detector solo con tu navegador web.

Configuración

En esta sección, se describen los pasos clave para configurar tu entorno de desarrollo y los proyectos de código específicamente para usar el detector de idiomas. Si deseas obtener información general sobre cómo configurar tu entorno de desarrollo para usar tareas de MediaPipe, incluidos los requisitos de la versión de la plataforma, consulta la Guía de configuración para la Web.

Paquetes de JavaScript

El código del detector de idiomas está disponible en el paquete @mediapipe/tasks-text. Puedes encontrar y descargar estas bibliotecas desde los vínculos que se proporcionan en la Guía de configuración de la plataforma.

Puedes instalar los paquetes necesarios con el siguiente código para la etapa de pruebas local con el siguiente comando:

npm install @mediapipe/tasks-text

Si quieres realizar la implementación en un servidor, puedes usar un servicio de red de distribución de contenidos (CDN), como jsDelivr, para agregar código directamente a tu página HTML, como sigue:

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/index.js"
    crossorigin="anonymous"></script>
</head>

Modelo

La tarea del detector de lenguaje de MediaPipe requiere un modelo entrenado que sea compatible con esta tarea. Si quieres obtener más información sobre los modelos entrenados disponibles para el detector de idioma, consulta la descripción general de la tarea en la sección Modelos.

Selecciona y descarga un modelo, y almacénalo en el directorio del proyecto:

<dev-project-root>/app/shared/models

Especifica la ruta del modelo con el parámetro modelAssetPath del objeto baseOptions, como se muestra a continuación:

baseOptions: {
        modelAssetPath: `/app/shared/models/language_detector.tflite`
      }

Crea la tarea

Usa una de las funciones LanguageDetector.createFrom...() del detector de idiomas a fin de preparar la tarea para ejecutar inferencias. Puedes usar la función createFromModelPath() con una ruta relativa o absoluta al archivo del modelo entrenado. En el siguiente ejemplo de código, se muestra el uso de la función createFromOptions(). Para obtener más información sobre la configuración de tareas, consulta Opciones de configuración.

En el siguiente código, se muestra la compilación y configuración de esta tarea.

async function createDetector() {
  const textFiles = await FilesetResolver.forTextTasks(
      "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/wasm/");
  languageDetector = await languageDetector.createFromOptions(
    textFiles,
    {
      baseOptions: {
        modelAssetPath: `https://storage.googleapis.com/mediapipe-models/language_detector/language_detector/float32/1/language_detector.tflite`
      },
    }
  );
}
createDetector();

Opciones de configuración

Esta tarea tiene las siguientes opciones de configuración para aplicaciones web y JavaScript:

Nombre de la opción Descripción Rango de valores Valor predeterminado
maxResults Configura la cantidad máxima opcional de predicciones de idioma con puntuaciones más altas que se mostrarán. Si este valor es menor que cero, se muestran todos los resultados disponibles. Cualquier número positivo -1
scoreThreshold Establece el umbral de puntuación de predicción que anula el proporcionado en los metadatos del modelo (si corresponde). Se rechazarán los resultados inferiores a este valor. Cualquier número de punto flotante No establecida
categoryAllowlist Establece la lista opcional de códigos de idioma permitidos. Si no está vacío, se filtrarán las predicciones de idioma cuyo código de idioma no se encuentre en este conjunto. Esta opción es mutuamente excluyente con categoryDenylist, y el uso de ambas genera un error. Cualquier cadena No establecida
categoryDenylist Establece la lista opcional de códigos de idioma que no están permitidos. Si no está vacío, se filtrarán las predicciones de idioma cuyo código de idioma se encuentre en este conjunto. Esta opción es mutuamente excluyente con categoryAllowlist, y el uso de ambas da como resultado un error. Cualquier cadena No establecida

Preparar los datos

El detector de idioma funciona con datos de texto (string). La tarea maneja el procesamiento previo de la entrada de datos, incluida la asignación de token y el procesamiento previo del tensor. Todo el procesamiento previo se controla dentro de la función detect. No es necesario realizar un procesamiento previo adicional del texto de entrada con anticipación.

const inputText = "The input text for the detector.";

Ejecuta la tarea

El detector de lenguaje usa la función detect para activar las inferencias. Para la detección de idiomas, esto significa mostrar los idiomas posibles del texto de entrada.

En el siguiente código, se muestra cómo ejecutar el procesamiento con el modelo de tareas:

// Wait to run the function until inner text is set
const detectionResult = languageDetector.detect(inputText);

Cómo controlar y mostrar los resultados

La tarea Detector de lenguaje genera una LanguageDetectorResult que consta de una lista de predicciones de idiomas junto con las probabilidades de esas predicciones. A continuación, se muestra un ejemplo de los datos de salida de esta tarea:

LanguageDetectorResult:
  LanguagePrediction #0:
    language_code: "fr"
    probability: 0.999781

Este resultado se obtiene ejecutando el modelo en el texto de entrada: "Il y a beaucoup de bouches qui parlent et fort peu de têtes qui pensent.".

Si deseas ver un ejemplo del código necesario para procesar y visualizar los resultados de esta tarea, consulta la app web de ejemplo.