Comment apprendre au navigateur à lire du texte dans des images sans magie côté serveur

Imaginez que vous construisez une application web de suivi des dépenses, et que l'utilisateur doit saisir manuellement les données des reçus. C'est ennuyeux, lent et frankly outdated. Vous voulez simplement prendre une photo d'un morceau de papier et obtenir immédiatement les chiffres dans la base de données. Habituellement, pour de telles tâches, vous configurez de lourds services Python avec OCR ou vous payez les géants du cloud pour chaque requête. Mais il y a une façon plus simple et, surtout, gratuite.

Nous parlons de Tesseract.js. C'est un port JavaScript du légendaire moteur OCR Tesseract qui fonctionne directement dans le navigateur ou sur Node.js.

Qu'est-ce que c'est exactement

Tesseract.js n'est pas qu'un simple wrapper autour d'une API. Les développeurs ont pris le moteur C++ original, l'ont compilé en WebAssembly et l'ont empaqueté dans une bibliothèque JS pratique. Le résultat est une reconnaissance de texte complète qui s'exécute côté client.

Pourquoi est-ce utile ? D'abord, pour la confidentialité. Les données utilisateur ne sont pas envoyées vers votre serveur, tout est traité localement. Ensuite, pour les économies d'infrastructure. Vos serveurs ne gaspillent pas de ressources sur des calculs lourds de reconnaissance de formes — ce travail est effectué par le processeur de l'utilisateur.

Comment le mettre en route en quelques minutes

La bibliothèque prend en charge plus de 100 langues, y compris le russe. Pour commencer, vous n'avez besoin que de quelques lignes de code. Voici un exemple de base pour Node.js ou le navigateur en utilisant des modules :

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 vous devez traiter un lot de photos, créer un worker pour chacune d'entre elles n'est pas une bonne idée. Il vaut mieux l'initialiser une seule fois, faire passer toutes les images par la méthode recognize, puis le fermer.

Que peut faire d'autre la bibliothèque en plus du texte brut

Le projet a largement dépassé la simple lecture de lettres. Les versions récentes (actuellement v5 et v6) ont apporté beaucoup de fonctionnalités utiles.

La bibliothèque détecte automatiquement l'orientation du texte. Si l'utilisateur télécharge une photo en mode paysage, Tesseract.js tentera de la redresser pour de meilleurs résultats. Vous pouvez même extraire des images intermédiaires : voyez comment l'algorithme a converti l'image en N&B ou supprimé le bruit.

Il est intéressant de noter que le projet peut fonctionner avec de la vidéo en temps réel. Vous pouvez pointer la caméra de votre smartphone vers une étiquette de prix, et le script extraira immédiatement les mots pertinents du flux.

Dans la version v5, les développeurs ont beaucoup travaillé sur la taille des fichiers. Les fichiers de modèles entraînés pour l'anglais sont devenus 54% plus petits, et pour le chinois — 73% complets. Pour le web, où chaque mégaoctet compte, c'est essentiel.

Ce que vous devez savoir à l'avance

Il n'y a pas de rose sans épines. Tesseract.js est de l'OCR pur. Il gère bien le texte imprimé sur des arrière-plans à fort contraste, mais a du mal avec les entrées manuscrites ou les designs trop complexes.

Une autre nuance — PDF. La bibliothèque native ne les prend pas en charge. Si votre tâche est d'analyser des documents multipages, vous devrez soit les préconvertir en images, soit explorer des alternatives comme Scribe.js, qui est né de tentatives d'étendre les capacités de Tesseract.js.

Vous devez également garder à l'esprit que WebAssembly est puissant mais gourmand en mémoire. Si vous lancez la reconnaissance sur un smartphone faible avec une dizaine d'onglets ouverts, la page pourrait simplement « planter ».

Où pouvez-vous appliquer ceci

D'après mon expérience, de tels outils sont particulièrement utiles dans les petites utilitaires internes. Par exemple :

• Remplissage automatique de formulaires à partir de scans de documents.
• Outils de traduction de texte d'écran (capture d'écran).
• Indexation de texte dans des images pour la recherche locale.

Si vous avez besoin d'ajouter rapidement une reconnaissance de texte et que vous ne voulez pas gérer de backend, Tesseract.js est l'option la plus évidente et la plus éprouvée. Le projet est vivant, activement maintenu et dispose d'une énorme communauté, donc la plupart des problèmes peuvent être résolus en cinq minutes sur Google.

Vous pouvez essayer la bibliothèque en action sur leur site de démonstration officiel. Là, vous pouvez voir clairement comment le moteur « voit » la structure du document et le décompose en blocs et en mots.