Cómo enseñarle al navegador a leer texto de imágenes sin magia del lado del servidor

Imagina que estás construyendo una aplicación web para seguimiento de gastos, y el usuario necesita ingresar manualmente los datos de los recibos. Es aburrido, lento y francamente anticuado. Quieres simplemente tomar una foto de un papel e inmediatamente obtener los números en la base de datos. Por lo general, para tales tareas, configuras servicios pesados de Python con OCR o pagas a los gigantes de la nube por cada solicitud. Pero hay una forma más fácil y, lo más importante, gratuita.

Hablamos de Tesseract.js. Esta es una implementación en JavaScript del legendario motor OCR Tesseract que funciona directamente en el navegador o en Node.js.

Qué es esto en realidad

Tesseract.js no es solo un wrapper sobre una API. Los desarrolladores tomaron el motor original en C++, lo compilaron a WebAssembly y lo empaquetaron en una biblioteca JS conveniente. Como resultado, obtenemos reconocimiento de texto completo que se ejecuta del lado del cliente.

¿Por qué es necesario? Primero, la privacidad. Los datos del usuario no viajan a tu servidor, todo se procesa localmente. Segundo, el ahorro de infraestructura. Tus servidores no gastan recursos en cálculos pesados de reconocimiento de patrones — este trabajo lo hace el procesador del usuario.

Cómo ponerlo en marcha en un par de minutos

La biblioteca soporta más de 100 idiomas, incluyendo ruso. Para comenzar, solo necesitas un par de líneas de código. Aquí hay un ejemplo básico para Node.js o navegador usando módulos:

import { createWorker } from 'tesseract.js';

(async () => {
  // Создаем воркер и указываем язык (например, английский)
  const worker = await createWorker('eng');
  
  // Скармливаем картинку — это может быть URL, путь к файлу или Blob
  const ret = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
  
  console.log(ret.data.text);
  
  // Не забываем прибраться за собой
  await worker.terminate();
})();

Si necesitas procesar un lote de fotos, crear un worker para cada una es una mala idea. Es mejor inicializarlo una vez, pasar todas las imágenes por el método recognize y solo entonces cerrarlo.

Qué más puede hacer la biblioteca además del texto plano

El proyecto ha evolucionado mucho más allá de la simple lectura de letras. Las versiones recientes (actualmente v5 y v6) trajeron muchas características útiles.

La biblioteca detecta automáticamente la orientación del texto. Si el usuario sube una foto al revés, Tesseract.js intentará rotarla para mejores resultados. Incluso puedes extraer imágenes intermedias: ver cómo el algoritmo convirtió la imagen a B&N o eliminó ruido.

Curiosamente, el proyecto puede trabajar con video en tiempo real. Puedes apuntar la cámara de tu smartphone a una etiqueta de precio, y el script inmediatamente «extraerá» las palabras relevantes del flujo.

En la versión v5, los desarrolladores trabajaron mucho en el tamaño del archivo. Los archivos de modelos entrenados para inglés se redujeron un 54%, y para chino — un completo 73%. Para la web, donde cada megabyte cuenta, esto es crítico.

Lo que deberías saber de antemano

No hay rosa sin espinas. Tesseract.js es OCR puro. Maneja bien texto impreso en fondos de alto contraste, pero tiene dificultades con entrada escrita a mano o diseños demasiado complejos.

Otra sutileza — PDF. La biblioteca nativa no los soporta. Si tu tarea es analizar documentos de varias páginas, necesitarás preconvertirlos a imágenes o buscar alternativas como Scribe.js, que surgió de intentos de extender las capacidades de Tesseract.js.

También debes tener en cuenta que WebAssembly es poderoso pero hambriento de memoria. Si ejecutas reconocimiento en un smartphone débil con una docena de pestañas abiertas, la página podría simplemente «colapsar».

Dónde puedes aplicar esto

En mi experiencia, tales herramientas son más útiles en pequeñas utilidades internas. Por ejemplo:

• Auto-rellenar formularios desde escaneos de documentos.
• Herramientas de traducción de texto en pantalla (captura de pantalla).
• Indexación de texto en imágenes para búsqueda local.

Si necesitas agregar rápidamente reconocimiento de texto y no quieres tratar con el backend, Tesseract.js es la opción más obvia y probada en el tiempo. El proyecto está vivo, activamente mantenido, y tiene una enorme comunidad, así que la mayoría de los problemas se pueden buscar en Google en cinco minutos.

Puedes probar la biblioteca en acción en su sitio demo oficial. Allí puedes ver claramente cómo el motor «ve» la estructura del documento y lo divide en bloques y palabras.